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

# Box model properties
The values held by the `margin`, `padding`, and `border` properties directly affect the size of an element’s box.
We’ll see how these properties relate to the box model, beginning with the `margin` property.

# The `margin` property

The `margin` property defines the outer portion of the box model. It creates space around an element outside ofany borders. In other words, it’s an invisible space around the box that pushes other elements away from it.

We can specify our element’s margins on each side, like so:

```css
margin-top: 10px:
margin-right: 20px;
margin-bottom: 10px
margin-left: 20px;
```

## The `margin` shorthand 

We can also use the `margin` property in shorthand form, which allows us to specify multiple margins simultaneously.

We apply a single value to all margins—top, right, bottom, and left:


```css
margin: 10px;
```
If we use two values, the first value sets the top and bottom margins and the second value sets the left and right margins:

```css
margin: 10px 20px;
```
With three values, the first value sets the top margin, the second value sets the left and right margins, and the third value sets the bottom margin:

```css
margin: 10px 20px 30px;
```

With four values, the first values sets the top margin, the second value sets the right margin, the third value sets the bottom margin, and the fourth value sets the left margin:

```css
margin: 10px 20px 30px 0px;
```

The order to remember is top -> right -> bottom -> left.

The `margin` property accepts values in `em`, `rem`, or any other CSS length unit. It also accepts percentage values and the keyword `auto`, which we’ll look at in the next section.

## Centering with `auto`

We use the keyword `auto` to tell the browser to define a margin automatically.

It’s often used for horizontal centering, as shown in the code snippet below:


```css
.element {
  width: 500px;
  margin: 0 auto;
}
```

In the code above, our element is centered horizontally within the available space. This works because we’ve specified the element’s width and the left and right margins are set to `auto`.

The values for `auto` don’t work without a specified `width` because the available space from the parent element can’t be determined.

The more modern approach is to use the Flexible Box Layout (Flexbox) for centering, using `justify-content: center;`. However, because `margin: 0` auto has been used so frequently over the past few years, it’s still a good tool to know, especially when working with legacy code.

> **Note:** You can use `auto` for horizontal centering, but it unfortunately doesn’t work for vertical centering.

Let’s practice with the following code snippet:


Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Margins

Box model properties