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

# CSS Variables


**Custom properties** (commonly known as **CSS Variables**) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript or Python, you’ll know that variables are extremely useful.

A **variable** is a name that refers to a value. By using variables in CSS, we greatly reduce code repetition and create style sheets that are much easier to maintain.


# Defining a CSS variable

We define a variable by using a name that begins with a double hyphen followed by a colon and any valid CSS value. For example, we have the `--primary-color:` variable set to `green` in the code below:

```css
:root {
  --primary-color: green;
}
```

The `:root` pseudo-class is a special selector that globally applies the HTML document's style. More on this later!

The variable can be accessed like so:

```css
p {
  color: var(--primary-color)
}
```

# Defining variables in elements

We can define CSS Variables inside of an element, as demonstrated in the code snippet below:

```css
:root {
  --default-padding: 30px 30px 20px 20px;
}

body {
  --primary-bg-color: brown;
}

p {
  --primary-color: yellow;
}

a:hover {
  --primary-color: red;
}
```

# Variable scope

Each variable is only available to child elements of the selector defined in — this is the “scope.”

Let’s examine this in the context of our previous example using the `:root` selector:

```css
:root {
  --primary-color: green;
}
```

The `:root` selector is a special setting that refers to the document root.

In an HTML document, :root refers to the HTML element. It has a higher specificity than HTML, so it always takes priority.

So, when a variable is applied to `:root`, it’s considered to have **global scope** and is available to all elements.

If we add a variable to a `main` element, it will only be available to children of the `main` element:

```css
main {
  --primary-color: yellow;
}
```

If we attempt to use it outside of this element, it won’t work.

Here are our two variables:


```css
:root {
  --primary-color: green;
}

main {
  --primary-color: yellow;
}
```

Our `--primary-color` will be `green` in our document, except for `main` and any of its child elements—they’ll be `yellow`.

# Bonus tips

## Case sensitivity

Case sensitivity applies to variables!

```css
:root {
 --color: green;
 --COLOR: yellow;
}
```

So, `--color` and `--COLOR` are two separate variables.

## Using variables in HTML

Variables can be used directly in HTML, as demonstrated in the code below:

```html

<html style="--size: 600px">
```
```css
body {
  max-width: var(--size)
}
```

## Using variables within variables

A variable can be used within another variable, as follows:

```css
--base-red-color: #f00;
--background-gradient: linear-gradient(to bottom, var(--base-red-color), #333);
```

## Using math

The `calc()` function can be used within variables to perform calculations:


```css
--input-width: 500px;
max-width: calc(var(--input-width) / 2);
```

## Using variables with media queries

We can make CSS variables only apply in certain situations in media queries.

For example, let’s set the `padding` to `5px` on devices with a `width` that’s less than `500px`:


```css
:root {
	--padding: 15px 
}

@media screen and (max-width: 500px) {
	--padding: 5px
}
```

## Setting a fallback value for the `var()` function

The `var()` function also lets us set a parameter that can be used in case a custom property isn’t found:

```css
width: var(--custom-width, 33%);
```

# A note on variables

CSS variables produce much cleaner and more concise code. They also make it much easier to manage your code across larger codebases. Also, if you define your variables in a separate CSS file (best practice), you won’t need to search through your entire code every time you need to change your variables!

# CSS Variables


**Custom properties** (commonly known as **CSS Variables**) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript or Python, you’ll know that variables are extremely useful.

A **variable** is a name that refers to a value. By using variables in CSS, we greatly reduce code repetition and create style sheets that are much easier to maintain.


# Defining a CSS variable

We define a variable by using a name that begins with a double hyphen followed by a colon and any valid CSS value. For example, we have the `--primary-color:` variable set to `green` in the code below:

```css
:root {
  --primary-color: green;
}
```

The `:root` pseudo-class is a special selector that globally applies the HTML document's style. More on this later!

The variable can be accessed like so:

```css
p {
  color: var(--primary-color)
}
```

# Defining variables in elements

We can define CSS Variables inside of an element, as demonstrated in the code snippet below:

```css
:root {
  --default-padding: 30px 30px 20px 20px;
}

body {
  --primary-bg-color: brown;
}

p {
  --primary-color: yellow;
}

a:hover {
  --primary-color: red;
}
```

# Variable scope

Each variable is only available to child elements of the selector defined in — this is the “scope.”

Let’s examine this in the context of our previous example using the `:root` selector:

```css
:root {
  --primary-color: green;
}
```

The `:root` selector is a special setting that refers to the document root.

In an HTML document, :root refers to the HTML element. It has a higher specificity than HTML, so it always takes priority.

So, when a variable is applied to `:root`, it’s considered to have **global scope** and is available to all elements.

If we add a variable to a `main` element, it will only be available to children of the `main` element:

```css
main {
  --primary-color: yellow;
}
```

If we attempt to use it outside of this element, it won’t work.

Here are our two variables:


```css
:root {
  --primary-color: green;
}

main {
  --primary-color: yellow;
}
```

Our `--primary-color` will be `green` in our document, except for `main` and any of its child elements—they’ll be `yellow`.

# Bonus tips

## Case sensitivity

Case sensitivity applies to variables!

```css
:root {
 --color: green;
 --COLOR: yellow;
}
```

So, `--color` and `--COLOR` are two separate variables.

## Using variables in HTML

Variables can be used directly in HTML, as demonstrated in the code below:

```html

<html>
```
```css
body {
  max-width: var(--size)
}
```

## Using variables within variables

A variable can be used within another variable, as follows:

```css
--base-red-color: #f00;
--background-gradient: linear-gradient(to bottom, var(--base-red-color), #333);
```

## Using math

The `calc()` function can be used within variables to perform calculations:


```css
--input-width: 500px;
max-width: calc(var(--input-width) / 2);
```

## Using variables with media queries

We can make CSS variables only apply in certain situations in media queries.

For example, let’s set the `padding` to `5px` on devices with a `width` that’s less than `500px`:


```css
:root {
	--padding: 15px 
}

@media screen and (max-width: 500px) {
	--padding: 5px
}
```

## Setting a fallback value for the `var()` function

The `var()` function also lets us set a parameter that can be used in case a custom property isn’t found:

```css
width: var(--custom-width, 33%);
```

# A note on variables

CSS variables produce much cleaner and more concise code. They also make it much easier to manage your code across larger codebases. Also, if you define your variables in a separate CSS file (best practice), you won’t need to search through your entire code every time you need to change your variables!

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Custom Properties (Variables)

CSS Variables