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



# Overview of the box model

When rendering a document, the browser sees each element as a rectangular box; this is the box model. CSS determines the size of the box, and is based on the following properties:
- `content`
- `padding`
- `border`
-  `margin`

A good way to visualize this is to open our browser’s #key# DevTools: Check this out by right-clicking an element and selecting "Inspect," then see the layout panel in DevTools. #key#  and look at how it’s displayed:


Here, we can examine the box model of any element on a page. The area in light blue is the content box. Around it, we have the padding, the border, and the margin. This is our box model! These various sections are defined as follows:

The `content` property: This is where our content is displayed. It can be sized using the `width` and `height` properties. It’s typically where any text and images appear.

The `padding` property: The padding sits around the content, is transparent by default. Its size is set using the `padding` properties.

The `border` property: The border wraps around the padding—if there is any—and the content. Its size and style are determined using the `border` properties.

The `margin` property: The margin clears an area outside the border. It then wraps the content, padding, and border with white-space between the box and the other elements. Its size is set using the  `margin` properties.

Using the box model, we can also choose to add a `border` around our elements and define spaces between elements.

Typically, when we set the height or width of an element, those rules also apply to the content area. Any padding, border, or margins are added to the height and width to give the total size of the box.

# Calculating the box size

Let’s take a look at the following example to see how we calculate the size of our box:

```css
.box {
  width: 300px;
  height: 200px;
  margin: 10px;
  padding: 25px;
  border: 2px solid black;
}
```

In the CSS above, our box’s `width` is `354 px` (300 + 25 + 25 + 2 + 2), and its `height` is `254 px` (200 + 25 + 25 + 2 + 2). The padding and border are added in addition to the width used for the content area.

The margin isn’t counted when determining the box size, however. It does affect the space on the page, but only the space outside the box. The box’s area stops at the border and doesn’t continue into the margin area.


> **Note:** If the padding or borders are undeclared, they’re either zero (if you’ve used a CSS reset or framework) or the browser’s default value, which is probably not zero.

# CSS `box-sizing` property

We can use the CSS `box-sizing` property to include the padding and border in our box-size calculation, that is, the box’s total width and height.

## Without the `box-sizing` property

As we’ve seen, an element’s width and height can be calculated in the following way:

width + padding + border = actual element width

height + padding + border = actual element height

As a result, when we set an element’s width or height, it may often appear larger than expected. This is because the element’s border and padding are always added to the width and height.

In the example below, the two elements are different sizes. We can see this in `item2` where `padding` is specified:


```css
.item1 {
  width: 300px;
  height: 200px;
  border: 3px solid green;
}
.item2 {
  width: 300px;
  height: 200px;
  padding: 50px;
  border: 3px solid red;
}
```

## Using the `box-sizing` property

With the `box-sizing` property, an element’s total width and height include the `padding` and `border` values.

We can use `box-sizing:` `border-box;` on an element, as shown in the code below:

```css
.item1 {
  width: 300px;
  height: 200px;
  border: 3px solid green;
  box-sizing: border-box;
}

.item2 {
  width: 300px;
  height: 200px;
  padding: 50px;
  border: 3px solid red;
  box-sizing: border-box;
}
```

Now, it’ll make much more sense when we lay elements out, because they’re sized much more intuitively, with the `border` and `padding` values included in the total `height` and `width`.

Many developers want this to apply to all elements on their pages. A simple way to ensure this is to implement the following CSS rule:


```css
* {
  box-sizing: border-box;
}
```
In the code above, `border-box` represents the value for the `box-sizing` property. For this value, the `width` and `height` properties include the `content` itself, as well as its `padding` and `border`.

The `content-box` is the default value. The `width` and `height` properties (as well as the `min` and `max` properties) include only the `content`. The `border` and `padding` aren’t included.

# Summary
We’ve looked at the box model and how it’s defined, how to calculate the box size on our elements, and how to apply the `box-sizing` property to handle sizing more intuitively.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

The Box Model

Overview of the box model