Start modifying how your pages look and feel in this introductory exploration of CSS.

Web Essentials

If you’re looking to style your front-end, this module is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is not required.

In this module, you will start with a short tour of CSS. You’ll get to experiment with it through examples that explain its role and behavior. From there, you will then dive deep into each technology, exploring concepts like CSS patterns to make your web pages look good.

By the end of this module, you will be able to beautify your own web applications.

Cascading Style Sheets (CSS)

### 1. Custom properties are ordinary properties, so they can be declared on any element.

Declare them on a paragraph element, section, aside, root, or even pseudo-elements. They’ll work as expected. 

 

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5737014913662976)

### 2. CSS variables are resolved with the normal inheritance and cascade rules

Consider the block of code below: 

```
div {
 --color: red;
}
 
div.test {
 color: var(--color)
}
 
div.ew {
 color: var(--color)
}

```

As with normal variables, the `--color` value will be inherited by the divs

 


![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5653795627335680)

 

### 3. CSS variables can be made conditional with `@media` and other conditional rules

As with other properties, you can change the value of a css variable within a `@media` block or other conditional rules.

For example, the following code changes the value of the variable, gutter on larger devices.


```

:root {
 --gutter: 10px 
}

@media screen and (min-width: 768px) {
 --gutter: 30px
 }

```
 

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5686969954729984)
 

### 4. CSS variables can be used in HTML’s style attribute. 
You can choose to set the value of your variables inline, and they’ll still work as expected. 

```


<html style="--color: red">


body { 
	color: var(--color)
}

```

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5753627847163904)

 

CSS variables are case sensitive. Be careful with this one. I save myself the stress and write variables in the lower case. Your mileage may vary.

```
/*these are two different variables*/
:root {
 --color: blue;
 --COLOR: red;
}

```

# 1. Custom properties are ordinary properties, so they can be declared on any element.

Declare them on a paragraph element, section, aside, root, or even pseudo-elements. They’ll work as expected. 

 

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5737014913662976)

# 2. CSS variables are resolved with the normal inheritance and cascade rules

Consider the block of code below: 

```
div {
 --color: red;
}
 
div.test {
 color: var(--color)
}
 
div.ew {
 color: var(--color)
}

```

As with normal variables, the `--color` value will be inherited by the divs

 


![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5653795627335680)

 

# 3. CSS variables can be made conditional with `@media` and other conditional rules

As with other properties, you can change the value of a css variable within a `@media` block or other conditional rules.

For example, the following code changes the value of the variable, gutter on larger devices.


```

:root {
 --gutter: 10px 
}

@media screen and (min-width: 768px) {
 --gutter: 30px
 }

```
 

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5686969954729984)
 

# 4. CSS variables can be used in HTML’s style attribute. 
You can choose to set the value of your variables inline, and they’ll still work as expected. 

```


<html style="--color: red">


body { 
	color: var(--color)
}

```

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5753627847163904)

 

CSS variables are case sensitive. Be careful with this one. I save myself the stress and write variables in the lower case. Your mileage may vary.

```
/*these are two different variables*/
:root {
 --color: blue;
 --COLOR: red;
}

```

# 1. Custom properties are ordinary properties, so they can be declared on any element.

Declare them on a paragraph element, section, aside, root, or even pseudo-elements. They’ll work as expected. 

 

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5737014913662976)

# 2. CSS variables are resolved with the normal inheritance and cascade rules

Consider the block of code below: 

```
div {
 --color: red;
}
 
div.test {
 color: var(--color)
}
 
div.ew {
 color: var(--color)
}

```

As with normal variables, the `--color` value will be inherited by the divs

 


![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5653795627335680)

 

# 3. CSS variables can be made conditional with `@media` and other conditional rules

As with other properties, you can change the value of a css variable within a `@media` block or other conditional rules.

For example, the following code changes the value of the variable, gutter on larger devices.


```

:root {
 --gutter: 10px 
}

@media screen and (min-width: 768px) {
 --gutter: 30px
 }

```
 

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5686969954729984)
 

# 4. CSS variables can be used in HTML’s style attribute. 
You can choose to set the value of your variables inline, and they’ll still work as expected. 

```


<html>


body { 
	color: var(--color)
}

```

![](/api/collection/5191711974227968/5641332169113600/page/5112623305588736/image/5753627847163904)

 

CSS variables are case sensitive. Be careful with this one. I save myself the stress and write variables in the lower case. Your mileage may vary.

```
/*these are two different variables*/
:root {
 --color: blue;
 --COLOR: red;
}

```

Here are some behaviors that are worth mentioning. 

Properties Worthy of Mention

Here are some behaviors that are worth mentioning.

Before We Begin

Getting started with CSS

Oh My Selectors!

CSS Fundamentals Everyone Should Know

Colors, colors, colors!

We all Need Units

Typography in CSS

The Box Model

Challenge: Practice with Texts, Margin, Padding and Borders

Getting creative with Backgrounds

Project: Build a Movie Order Page

Making Sense of CSS Gradients

Hands-on Practice with Gradients

Project: Build a Sign Up Page for a Startup

{New} Teach Me Positioning Like I'm Five

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties

{New} CSS Variables Real World Applications

{New} Long Live the CSS Grid

Final Words

Conclusion

Properties Worthy of Mention

1. Custom properties are ordinary properties, so they can be declared on any element.

2. CSS variables are resolved with the normal inheritance and cascade rules