Learn core CSS principles, master CSS layout techniques, explore CSS positioning, work with typography fonts, and refine your understanding of the CSS box model and responsive CSS design.

Become a Web Developer

This module takes you into the essentials of web design and using CSS to build dynamic, visually appealing websites. You’ll start by mastering the core principles of CSS, including selectors, properties, and browser whitespace. As you advance, you'll dive into CSS layouts, learning about document flow control, CSS units, and various CSS positioning techniques. In the final part, you’ll explore typography, background manipulation, and image styling to create polished, engaging web content. By the end, you will be equipped to design and develop responsive, professional web layouts.

Learn CSS

# Pixels

```css
.element {   
  width: 500px;  
}
```

**Pixels** are the most common measurement unit, which allow us to set a length in pixels. Interestingly, they don’t have anything to do with the literal pixels of your display device. Rather, it’s a standardization of measurement used across the web.As we’ll see, pixels lack flexibility in some scenarios, so there’s often a better option.

# Percentages

**Percentages** let us specify values as a percentage, relative to the same property in the element’s parent. See an example below:

```css
.parent {
  width: 600px;
}

.child {
  width: 50%;  /* 300px */
}
```

For example, if an parent element has a `width` of `600px`, and a child is created with a `width` of `50%`, it will render at `300px`.

# Example

Let's take a look at pixel and percentage units.

Getting Started with CSS

CSS Core Concepts

CSS Units

CSS Essentials

Unlocking Flexible Layouts with CSS Display

CSS Positioning

Typography in CSS

Backgrounds and Colors

Images and Floats in CSS

Conclusion

Pixels and Percentages

Pixels