
When building complex web designs, you might encounter situations where you want to number elements for improved usability and overall experience. Manually adding numbers to elements can be tedious and prone to errors. That's where CSS counters come to the rescue. In this tutorial, we’ll delve into the power of CSS counters, a user-friendly method to number your elements effortlessly. By implementing these techniques, you will improve your web design skills and enhance user experiences on your websites.

## What are CSS Counters?

CSS counters are variables that are maintained by CSS, allowing you to control and manipulate the numbering of elements on a webpage. They are incredibly useful when it comes to managing ordered lists, chapters, sections, and other elements that require consecutive numbering. Additionally, CSS counters are easy to implement and offer a wide range of customization options.

## Getting Started with CSS Counters

To show the power of CSS counters, we'll walk through an example with step-by-step instructions. The primary components of a CSS counter are the `counter-reset` and `counter-increment` properties along with the `content` property on the ::before or ::after pseudo-elements.

### Step 1: Set Up the Counter

First, you'll need to initialize the counter using the `counter-reset` property. This is typically done in a parent element that wraps the elements you wish to number. The `counter-reset` property works by defining a named counter and setting its initial value.

```css
.container {
  counter-reset: my-counter;
}
```

In this example, we're initializing a counter named `my-counter` with its initial value set to 0.

### Step 2: Increment the Counter

Next, you'll need to increment the counter using the `counter-increment` property. This should be applied to the elements that you want to number.

```css
.element {
  counter-increment: my-counter;
}
```

In this case, the value of `my-counter` will be incremented by 1 each time an `.element` appears in the HTML structure.

### Step 3: Display the Counter Value

Now that the counter has been initialized and set to increment, we need to display the counter value. For this, you will use the `content` property along with the `counter()` function within the `::before` or `::after` pseudo-element.

```css
.element::before {
  content: counter(my-counter) ". ";
}
```

Here, the `counter(my-counter)` function retrieves the current value of the counter, effectively numbering our `.element` instances.

## Customizing Your CSS Counter

CSS counters provide extensive customization options in terms of appearance and functionality. For instance, you can adjust the numbering style, customize the appearance, or use nested counters for multi-level numbering.

### Numbering Style

By default, the counter will use decimal numbers. However, CSS provides several other numbering styles that you can use. To change the style, use the `list-style-type` values within the `counter()` function. Here's an example with *Roman numerals*:

```css
.element::before {
  content: counter(my-counter, upper-roman) ". ";
}
```

This will generate uppercase Roman numerals for the list items. Other numbering styles include `lower-alpha`, `upper-alpha`, `lower-greek`, and `lower-roman`.

### Appearance Customization

Just like any other element, you can customize the appearance of your counters, such as the font size, color, and style with traditional CSS properties.

```css
.element::before {
  content: counter(my-counter) ". ";
  color: #ff5733;
  font-style: italic;
}
```

Such modifications can enhance your design and create an attractive user experience.

### Nested Counters

You can even use nested counters for multi-level numbering. Here's an example of nested counters:

```css
.section {
  counter-reset: subsection;
}

.subsection {
  counter-increment: subsection;
}

.subsection::before {
  content: counter(my-counter) "." counter(subsection) " ";
}
```

In this example, we created a counter for sub-sections that reset every time a new `.section` is encountered, resulting in a numbering like 1.1, 1.2, 2.1, 2.2, etc.

## Conclusion

CSS counters offer a powerful and flexible way to number elements on your webpages. With a strong command of CSS counters, you can improve the overall appearance and functionality of your web projects. Remember to experiment with different numbering styles, appearance customizations, and nested counters to provide an engaging user experience. Explore the possibilities and enhance your web design expertise with CSS counters today!


Discover the power of CSS counters for numbering elements, and enhance your web design techniques with this step-by-step guide.

Mastering CSS Counters: Effortlessly Number Your Elements


Typography is an essential element of web design, and responsive typography plays a significant role in creating a seamless user experience across various devices. In this article, we will discuss responsive typography, best practices for implementing it with CSS, and advanced techniques to make your web content easily adaptable to any screen size.

## What is responsive typography?

Responsive typography is a design approach that focuses on tailoring the appearance of text to suit different devices and screen sizes. Base font size, line-height, and font-weight adjustments are made on-the-fly to maintain readability and aesthetic appeal across various devices, from smartphones to desktop computers.

## Setting the foundation: Fluid base font size

To create responsive typography with CSS, you'll need to start with a fluid base font size. We use relative units like percentages or viewport units instead of static units like pixels to maintain scalability.

Let's set our base font size in the `html` selector:

```css
html {
  font-size: calc(1rem + 0.5vw);
}
```

With this method, the browser calculates the preferred font size using a combination of '1rem' as the basic font size and '0.5vw' as an additional sizing factor that adapts to the width of the viewport.

## Scaling text using media queries

When working with responsive typography, we often use media queries to apply different styles, such as font sizes, based on various screen sizes.

Here's an example of assigning different font sizes to a specific element based on the device width:

```css
h1 {
  font-size: 2.5rem;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media screen and (min-width: 1024px) {
  h1 {
    font-size: 4rem;
  }
}
```

The above code sets a base font size of 2.5rem for `h1` elements, but increases the size by device width breakpoints (768px and 1024px).

## Adjusting line-height and font-weight

Besides font size, readability can also be impacted by other typographic properties, such as [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) and [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). Use media queries to adjust these properties based on screen size as well. For example:

```css
p {
  line-height: 1.5;
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  p {
    line-height: 1.7;
  }
}

@media screen and (min-width: 1024px) {
  p {
    font-weight: 300;
  }
}
```

In this example, the line-height and font-weight change depending on the device width.

## Responsive typography with clamp()

To avoid using several media queries or complex calculations, you can use the [`clamp()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) to set fluid typography. `clamp()` takes three arguments: minimum size, preferred size, and maximum size:

```css
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
```

In this example, the h1 font size will be 1.5rem at a minimum, 3rem at a maximum, and 4vw in between.

## Incorporating responsive fonts for optimal readability

To make sure your content is readable across all devices, choose a font that performs well on various screen sizes. Popular font families such as [Roboto](https://fonts.google.com/specimen/Roboto), [Open Sans](https://fonts.google.com/specimen/Open+Sans), and [Lato](https://fonts.google.com/specimen/Lato/) are widely used for their versatility and readability.

To incorporate responsive fonts, declare a font stack in your CSS stylesheet:

```css
body {
  font-family: 'Roboto', Arial, sans-serif;
}
```

Remember to always include an appropriate fallback font in case your preferred font fails to load.

## Conclusion

Implementing responsive typography using CSS should be a top priority in your web design process. Use fluid units and media queries alongside advanced techniques like the `clamp()` function to create versatile typography that caters to all devices. By embracing responsive typography best practices, you will optimize readability for users and create a seamless and engaging user experience across devices.

Now that you have learned about the best practices and techniques to create responsive typography with CSS, you are equipped with the knowledge to tackle any design challenge and elevate the overall aesthetics of your web projects.



Learn the art of responsive typography using CSS, from fundamental principles to advanced techniques, for an engaging user experience.

Master Responsive Typography with CSS: Best Practices and Techniques


CSS flexbox is a layout module that provides a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown or dynamic. Flexbox has become one of the most popular ways to create modern layouts on the web, and with good reason. It is incredibly powerful and versatile, allowing developers to create complex and dynamic layouts with just a few lines of code.

In this article, we will explore the CSS property flex and its child properties, along with some common use cases and examples.

## The Flex Property

The `flex` property is shorthand for setting three other properties: `flex-grow`, `flex-shrink`, and `flex-basis`. It is used to specify how an element should grow or shrink to fit the available space within its container. The `flex` property takes three values:

```css
flex: <flex-grow> <flex-shrink> <flex-basis>;
```

* `flex-grow`: This property specifies how much an item should grow relative to the other items in the container. The default value is `0`, which means the item will not grow.
* `flex-shrink`: This property specifies how much an item should shrink relative to the other items in the container. The default value is `1`, which means the item will shrink equally with other items in the container.
* `flex-basis`: This property specifies the initial size of the item before any growing or shrinking occurs. The default value is `auto`, which means the item will be sized based on its content.

Here's an example:

```css
.container {
  display: flex;
}

.item {
  flex: 1 1 auto;
}
```

In this example, we have a container with the `display` property set to `flex`. This turns the container into a flex container and allows us to use the flex properties on its child items.

We also have an item with the `flex` property set to `1 1 auto`. This means the item will grow and shrink equally with other items in the container, and its initial size will be based on its content.

## The Flex-Grow Property

The `flex-grow` property is used to specify how much an item should grow relative to the other items in the container. It takes a value of `0` or higher, with higher values indicating that the item should grow more.

Here's an example:

```css
.container {
  display: flex;
}

.item {
  flex-grow: 1;
}
```

In this example, we have a container with the `display` property set to `flex`, and an item with the `flex-grow` property set to `1`. This means the item will grow equally with other items in the container, regardless of its initial size.

## The Flex-Shrink Property

The `flex-shrink` property is used to specify how much an item should shrink relative to the other items in the container. It takes a value of `0` or higher, with higher values indicating that the item should shrink more.

Here's an example:

```css
.container {
  display: flex;
}

.item {
  flex-shrink: 2;
}
```

In this example, we have a container with the display property set to `flex`, and an item with the `flex-shrink` property set to `2`. This means the item will shrink twice as much as other items in the container if there is not enough space to accommodate all items.
The flex-basis property is used to specify the initial size of an item before any growing or shrinking occurs. It takes a value of auto or a length value, such as px, em, or rem.



## The Flex-Basis Property

The `flex-basis` property is used to specify the initial size of an item before any growing or shrinking occurs. It takes a value of `auto` or a length value, such as `px`, `em`, or `rem`.

Here's an example:

```css
.container {
  display: flex;
}

.item {
  flex-basis: 200px;
}
```

In this example, we have a container with the `display` property set to `flex`, and an item with the `flex-basis` property set to `200px`. This means the item will have an initial size of `200px`, regardless of its content.

## The Flex-Direction Property

The `flex-directio`n property is used to specify the direction in which items are laid out within a container. It takes four values: `row`, `row-reverse`, `column`, and `column-reverse`. The default value is `row`.

* `row`: Items are laid out horizontally from left to right.
* `row`-reverse: Items are laid out horizontally from right to left.
* `column`: Items are laid out vertically from top to bottom.
* `column-reverse`: Items are laid out vertically from bottom to top.

Here's an example:

```css
.container {
  display: flex;
  flex-direction: row-reverse;
}
```

In this example, we have a container with the `display` property set to `flex`, and the `flex-direction` property set to `row-reverse`. This means the items within the container will be laid out horizontally from right to left.

## The Justify-Content Property

The `justify-content` property is used to align items along the main axis (the axis defined by the `flex-direction` property) within a container. It takes six values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`. The default value is `flex-start`.

* `flex-start`: Items are aligned to the start of the container.
* `flex-end`: Items are aligned to the end of the container.
* `center`: Items are centered within the container.
* `space-between`: Items are evenly distributed along the main axis, with the first item aligned to the start of the container and the last item aligned to the end of the container.
* `space-around`: Items are evenly distributed along the main axis, with equal space around them.
* `space-evenly`: Items are evenly distributed along the main axis, with equal space between them.

Here's an example:

```css
.container {
  display: flex;
  justify-content: center;
}
```

In this example, we have a container with the `display` property set to `flex`, and the `justify-content` property set to `center`. This means the items within the container will be centered along the main axis.

## The Align-Items Property

The `align-items` property is used to align items along the cross axis (the axis perpendicular to the main axis) within a container. It takes five values: `flex-start`, `flex-end`, `center`, `baseline`, and `stretch`. The default value is `stretch`.

* `flex-start`: Items are aligned to the start of the cross axis.
* `flex-end`: Items are aligned to the end of the cross axis.
* `center`: Items are centered within the cross axis.
* `baseline`: Items are aligned to their baselines.
* `stretch`: Items are stretched to fill the container along the cross axis.

Here's an example:

```css
.container {
  display: flex;
  align-items: center;
}
```

In this example, we have a container with the `display` property set to `flex`, and the `align-items` property set to `center`. This means the items within the container will be centered along the cross axis.

## Conclusion

CSS flexbox is a powerful layout module that allows developers to create flexible and responsive layouts with ease. The `flex` property is the cornerstone of flexbox, and it provides a powerful shorthand for setting the `flex-grow`, `flex-shrink`, and `flex-basis` properties. Additionally, the `flex-direction`, `justify-content`, and `align-items` properties allow developers to control the direction, alignment, and spacing of items within a container.

With its intuitive syntax and flexible nature, CSS flexbox is a great option for building modern, responsive layouts. By mastering the `flex` property and its child properties, developers can unlock the full potential of this powerful layout module and create beautiful, functional designs for the web.

Build flexible and responsive layouts with ease using CSS Flexbox - the ultimate solution for modern web design.

Flex Your Web Design Muscles with CSS Flexbox: A Comprehensive Guide

Over the years, I've used a few solutions for styling (React) components. Started out with vanilla CSS, later on with SCSS, and then a few JSS solutions such as Styled Components, Emotion, and Stitches. None of those (except maybe Stitches, but about that in a different post) has been as enjoyable as TailwindCSS has been for me. So here's a crash course based on my experience with TailwindCSS. We use it on this blog as well (at the time of writing this article).

## What is it?

TailwindCSS is a utility-first CSS framework with pre-defined classes that you can use directly in your markup – allowing you to style your markup as you're writing it. Cool.

In traditional web development, you would first write your markup (HTML), then style it with CSS. With TailwindCSS, you can style your markup right away. That looks something like this:

```html
<div class="p-4 bg-gray-100 shadow-md rounded-xl">
  <h2 class="text-2xl font-bold">Hello, world!</h2>
  ...
</div>
```

Whereas previously, you would need to write your HTML in one file, come up with a name for the class, and then style it in a separate CSS file.

```html

<div class="a-class-name-that-you-had-to-think-really-hard-about">
  <h2>Hello world</h2>
</div>
```

```css
/* index.css */
.a-class-name-that-you-had-to-think-really-hard-about {
  border-radius: 12px;
  background-color: #fafafa;
  padding: 12px;
}
```

## Install TailwindCSS

There are several ways to start using TailwindCSS. Depending on your setup, you have a few options. We'll cover only the one where you install it as a `node_module` in your project. This is probably the go-to option for most people who use some of the more popular frameworks like React, Vue,
Angular, etc...

```bash
# Via NPM
> npm install tailwindcss
# or Yarn
> yarn add tailwindcss
# Create tailwind.config.js
> npx tailwindcss init
```

The last command created a file `tailwind.config.js` in the root directory of your project.
Configure the config for the directories you want TailwindCSS to be used in:

```js
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

You can look up the other ways to use it and the rest of the documentation [here](https://tailwindcss.com/docs/installation).

## How do I use it?

Create an `index.css` file in a directory of your project where you have the rest of your styles if you're using a non-JSS solution.

Let's say you have `src/styles/index.css`

Populate that file with

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Import this file in the root file of your project.

```js
// App.tsx
import './styles/index.css'
```

Start using it within your components.

```js
// src/components/Button.tsx

export default function Button(props) {
  return <button {...props} className="rounded-md bg-blue-600 text-neutral-50 dark:text-neutral-900" />
}
```

Protip: It would be nice if the consumer of your components could pass a `className` prop and it would be added to the component. Consider joining the received `className` with the one you create.

```js
// src/components/Button.tsx
export default function Button(props) {
  // TODO: Add the className to the props only if it was passed to the component
  return (
    <button
      {...props}
      className={['rounded-md bg-blue-600 text-neutral-50 dark:text-neutral-900 ...', props.className].join(' ')}
    />
  )
}
```

## My markup is ugly, is there a different way?

Yes there is. You can create CSS components and apply the TailwindCSS classes to them.

```css
/* styles/components/Button.css */
.button--raised {
  @apply bg-blue-600 rounded-md;
  @apply text-neutral-50 dark:text-neutral-900;
  @apply px-4 py-2;
}
```

```jsx
export function GrandSchemeComponent() {
  return <div>
    ...
    <button className="button--raised">
    ...
  </div>
}
```

Don't forget to import the file in the root file of your project, or where you import component styles so it becomes available to your components.

## Bottom line

TailwindCSS is by far the path of least resistance for me. I can style components as I write their structure. And with all the utility classes it gives me, I can pretty much do anything I want.
Pseudo-classes like `hover`, `focus`, `active`, as well as classes for responsive breakpoints make TailwindCSS a great tool for any project.

What do you think? Do you think TailwindCSS would be a good fit for your project? If so, please let me know! I'd love to hear from you.

Send us a tweet [@delvingdev](https://twitter.com/delvingdev)

There are many ways to use TailwindCSS, but this is the most basic way to get started.

A crash course on TailwindCSS in React


Both Flexbox and CSS Grid are powerful tools that have transformed the way we create responsive, modern layouts for websites. Although they share some similarities, each has its unique set of features and ideal use cases. In this article, we'll dive into the main differences between Flexbox and Grid, and provide insights to help you determine which one to use for your layouts.

## What is Flexbox?

**Flexbox** (Flexible Box Layout) is a one-dimensional CSS layout model designed to make it easier for web developers to create flexible, space-efficient, and responsive layouts. Flexbox can manage the distribution of space and the alignment of items either horizontally or vertically within a container. 

```css
.container {
    display: flex;
    flex-direction: row; /* will change the main axis direction */
    justify-content: center; /* aligns items on the main axis */
    align-items: center; /* aligns items on the cross axis */
}
```

Flexbox is particularly useful for creating simple in-page navigations, organizing content for mobile responsiveness, and aligning items within larger layouts.

## What is CSS Grid?

**CSS Grid** is a two-dimensional CSS layout model that enables designers to design complex and responsive web layouts. With the Grid, you can create both horizontal and vertical layouts simultaneously, giving you the power to create intricate designs.

```css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
    grid-gap: 10px;
}
```

CSS Grid excels in constructing grid-based layouts and handling complex alignment tasks for multiple items, making it ideal for designing magazine-style sites or galleries.

## Key Differences Between Flexbox and Grid

### Dimensionality

The most significant difference between Flexbox and Grid lies in their dimensionality. Flexbox is designed for one-dimensional layouts, meaning it's limited to either rows or columns. On the other hand, CSS Grid is tailored for two-dimensional layouts, giving you the ability to control both rows and columns simultaneously.

### Use Cases

[Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) works best in situations where you need to distribute items in either a single row or column. It's great for constructing primary navigation menus or aligning specific blocks of content in horizontal or vertical directions. Moreover, using Flexbox, you can easily control sizing and space management of variable elements, such as dynamic content.

[Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) excels in creating complex, responsive grid structures for websites, such as those found in newspapers, agency portfolios, or online stores. When working with a large number of items or desiring intricate, two-dimensional placement, CSS Grid Layout is your go-to tool.

### Learning Curve

Flexbox offers a relatively low learning curve, making it easier for beginners to grasp the basics quickly. A more advanced, two-dimensional system like CSS Grid might require more time to understand and use efficiently.

However, both have a wealth of resources available online. For instance, check out [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) by CSS-Tricks for handy, comprehensive guides.

### Browser Compatibility

Flexbox and Grid both offer excellent browser compatibility with virtually all modern browsers. However, if you're working with older browsers like IE 10 or earlier, that's where Flexbox holds an advantage, as it provides support for such versions.

### Grid Gaps, Grid Gap Replacements, and Flex Gaps

Grid introduces an easy way to manage gaps between items using the `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties. However, these properties have been replaced with `gap`, `row-gap`, and `column-gap` in CSS Level 3 for better compatibility across layout methods.

For Flexbox layouts, `gap`, `row-gap`, and `column-gap` are available in modern browsers, allowing you to control the spacing between items just as you would in a Grid layout. Keep in mind, however, that older browsers may not support these properties, so incorporating alternatives such as margin or padding adjustments may be necessary.

### Flex Shorthand

One advantage Flexbox holds over Grid is the use of shorthand property `flex`. Utilizing this property, you can control the `flex-grow`, `flex-shrink`, and `flex-basis` of Flexbox items in a single line. While Grid has properties like `grid-template` and `grid-auto`, they do not provide the same level of shorthand flexibility as Flexbox.

```css
.item {
    flex: 1 0 auto; /* flex-grow, flex-shrink, flex-basis */
}
```

## Combining Flexbox and Grid

In many cases, it's not a matter of choosing one over the other, but rather using both Flexbox and Grid to make the most of their capabilities. By combining their powers, you can create complex layouts while maintaining specific alignments or space distributions.

For example, you can use Grid to define the overall structure of your layout and then use Flexbox within grid items to align and manage their content. This combination helps optimize CSS layout handling.

## Conclusion

Both Flexbox and CSS Grid are invaluable tools for web developers when designing modern, responsive layouts. While Flexbox is best suited for distributing items within a single row or column, CSS Grid shines when constructing intricate two-dimensional designs.

Remember that learning both and integrating them into your projects will help you achieve the best results possible. Ultimately, understanding the differences and use cases of Flexbox and Grid will enable you to make the right decision when choosing which to use for your web layouts.

This article compares Flexbox and CSS Grid, highlighting their differences, key features, and ideal use cases to help web developers optimize their CSS layouts and create stunning, responsive websites.

Delving Developer

CSS Archives

Posts found under the category "CSS"

Mastering CSS Counters: Effortlessly Number Your Elements

Master Responsive Typography with CSS: Best Practices and Techniques

Flex Your Web Design Muscles with CSS Flexbox: A Comprehensive Guide

A crash course on TailwindCSS in React

Flexbox vs. Grid: Key Differences to Optimize Your CSS Layouts