Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

# The  `em` unit 

```css
.element {
  width: 30em; 
}
```

The  `em` unit is the value assigned to the element’s `font-size`,  and its exact value changes between elements. The measurement itself is the width of the letter “m.”

The length changes only if we change the `font-size`. It doesn’t change if the `font-family` is adjusted.
By default, `1em` is equal to `16px`.

If any CSS changes the font size, `1em` becomes the equivalent of whatever the new `font-size` is.

To return to our example, `30em` means 30 times the current font size.

# The `rem` unit 

```css
.element {
  width: 30rem; 
}
```

The `rem` unit is similar to `em`, only instead of changing based on the font size of the current element, it changes based on the root (`:root {}`) element font size.

We can set the `font-size` once, and the `rem` measurement will remain consistent throughout all pages!

## Which unit should you use?
It's a matter of personal preference. Some like to use `rem` units for consistency, while others like to add in `em` units when it makes sense in relation to adjacent parent elements.

# The `ex` unit

```css
.element {
  width: 40ex;
}
```

The `ex` unit is similar to `em`. However, it’s based on the height of the letter “x.”

Unlike `em` units, this value can change depending on the `font-family` used & the `font-size`.

# The `ch` unit 

```css
.element {
  width: 40ch;
}
```

The `ch` unit is like the `ex` unit, except instead of measuring the height of “x,” it measures the width of the number zero.


It also changes as the `font-family` changes.

# Example

Let's take a look at CSS units relative to font, such as em, rem, ex, and ch.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Font-Relative Units

The `em` unit

Font-Relative Units

The em unit

The `em` unit