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

## Structural and relational pseudo-class selectors
This lesson focuses on structural and relational pseudo-class selectors.

### Structural pseudo-class selectors

Structural pseudo-class selectors select additional information from the 
#concept=DOM#DOM#concept#, which can’t be targeted otherwise.

The `:root` selector selects the highest element in a document. This is almost guaranteed to be the `<html>` element, unless we’re using a different markup language, such as SVG or XML.

```css
:root {
 background-color: coral;
}
```
We’ve set the `background-color` to `coral` in our example. We could also use `html` as the selector to set our background. However, `:root` is more specific than an element selector, which could be helpful in some scenarios.

The `:first-child` selector selects the first element within its parent element. The first `li` element will have `red` text, as shown in the example below:

**HTML:**

```html
<ul>
 <li>This text will be red.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
</ul>
```

**CSS**:

```css
li:first-child {
 color: red;
}
```

The `:last-child` selector selects the last element within its parent element.The last `li` element will have `red` text, as shown in the example below:

**HTML**:

```html
<ul>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>This text will be red.</li>
</ul>
```

**CSS**:

```css
li:last-child {
 color: red;
}
```

The `:nth-child()` selector uses a simple formula to select elements depending on their order. All `:nth` pseudo-classes take an argument via a formula. The formula may be a single integer or structured as `an+b`, or it could use the keywords `odd` or `even`.

In the `an+b` formula:
- The `a` is a number.
- The `n` is a literal number and will represent a value assigned to the variable `n`.
- The `+` is an operator (it may also be set to the minus sign (`-`)).
- The `b` is an optional number (it’s only required if an operator is being used).

Let’s work with the list of elements below to see this in action!


**HTML**:

```html
<ol>
 <li>Pacific Ocean</li>
 <li>Atlantic Ocean</li>
 <li>Indian Ocean</li>
 <li>Southern Ocean</li>
 <li>Arctic Ocean</li>
 <li>Philippine Sea</li>
 <li>Coral Sea</li>
 <li>Arabian Sea</li>
 <li>South China Sea</li>
</ol>
```

**CSS**:

Select the second child, `“Atlantic Ocean”`, and set the `color` to `yellow`:

```css
ol :nth-child(2) {
 color: yellow;
}
```

Select every other child (beginning from the second). So, `“Atlantic Ocean”`, `“Southern Ocean”`, `“Philippine Sea”` and `“Arabian Sea”` will be `purple`:

```css
ol :nth-child(2n) {
 color: purple;
}
```

The code below selects all evenly-numbered children:

```css
ol :nth-child(even) {
 color: yellow;
}
```

The code below selects every other child, starting from the fifth (demonstrated by the `+5`). So, `“Arctic Ocean”`, `“Coral Sea”`, and `“South China Sea”` will be `purple`:

```css
ol :nth-child(2n+5) {
 color: purple;
}
```
> **Note:** 2$n$ designates any items whose position is a multiple of 2, while 5 is the offset from where it should start.

The `:nth-of-type()` selector is similar to the `:nth-child`. However, it’s used in places where different elements are at the same level. The selector matches each element of the nth-child of a particular type.

For example, suppose we have a `<div>` element containing several paragraphs and images. If we want to select the odd images, the `:nth-child` won’t work. We need to use `div` `img:nth-of-type(odd)` instead.


The `:first-of-type` selector selects the first element of its particular type within the parent element.

For example, the first `li` and first `span` element are given `red` text below:

**HTML**:

```html
<ul>
 <li>This text will be red.</li>
 <li>Lorem ipsum. This text will be red.</li>
 <li>Lorem ipsum.</li>
</ul>
```

**CSS**:

```css
ul :first-of-type {
 color: red;
}
```

The `:last-of-type` selector is the same as above, but selects the last element:

**HTML**:

```html
<ul>
 <li>Lorem ipsum. Lorem ipsum. This text will be red.</li>
 <li>Lorem ipsum.</li>
 <li>This text will be red.</li>
</ul>
```

**CSS**:

```css
ul :last-of-type {
 color: red;
}
```

The `:nth-last-of-type()` selector is similar to :nth-of-type, only it counts in reverse (from the bottom up).

The `:nth-last-child()` selector is similar to `:nth-child`, but it also counts in reverse.

The `:only-of-type` selector selects an the element only if it’s one-of-a-kind (within its parent).

#### Example

# Structural and relational pseudo-class selectors
This lesson focuses on structural and relational pseudo-class selectors.

## Structural pseudo-class selectors

Structural pseudo-class selectors select additional information from the 
#concept=DOM#DOM#concept#, which can’t be targeted otherwise.

The `:root` selector selects the highest element in a document. This is almost guaranteed to be the `<html>` element, unless we’re using a different markup language, such as SVG or XML.

```css
:root {
 background-color: coral;
}
```
We’ve set the `background-color` to `coral` in our example. We could also use `html` as the selector to set our background. However, `:root` is more specific than an element selector, which could be helpful in some scenarios.

The `:first-child` selector selects the first element within its parent element. The first `li` element will have `red` text, as shown in the example below:

**HTML:**

```html
<ul>
 <li>This text will be red.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
</ul>
```

**CSS**:

```css
li:first-child {
 color: red;
}
```

The `:last-child` selector selects the last element within its parent element.The last `li` element will have `red` text, as shown in the example below:

**HTML**:

```html
<ul>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>This text will be red.</li>
</ul>
```

**CSS**:

```css
li:last-child {
 color: red;
}
```

The `:nth-child()` selector uses a simple formula to select elements depending on their order. All `:nth` pseudo-classes take an argument via a formula. The formula may be a single integer or structured as `an+b`, or it could use the keywords `odd` or `even`.

In the `an+b` formula:
- The `a` is a number.
- The `n` is a literal number and will represent a value assigned to the variable `n`.
- The `+` is an operator (it may also be set to the minus sign (`-`)).
- The `b` is an optional number (it’s only required if an operator is being used).

Let’s work with the list of elements below to see this in action!


**HTML**:

```html
<ol>
 <li>Pacific Ocean</li>
 <li>Atlantic Ocean</li>
 <li>Indian Ocean</li>
 <li>Southern Ocean</li>
 <li>Arctic Ocean</li>
 <li>Philippine Sea</li>
 <li>Coral Sea</li>
 <li>Arabian Sea</li>
 <li>South China Sea</li>
</ol>
```

**CSS**:

Select the second child, `“Atlantic Ocean”`, and set the `color` to `yellow`:

```css
ol :nth-child(2) {
 color: yellow;
}
```

Select every other child (beginning from the second). So, `“Atlantic Ocean”`, `“Southern Ocean”`, `“Philippine Sea”` and `“Arabian Sea”` will be `purple`:

```css
ol :nth-child(2n) {
 color: purple;
}
```

The code below selects all evenly-numbered children:

```css
ol :nth-child(even) {
 color: yellow;
}
```

The code below selects every other child, starting from the fifth (demonstrated by the `+5`). So, `“Arctic Ocean”`, `“Coral Sea”`, and `“South China Sea”` will be `purple`:

```css
ol :nth-child(2n+5) {
 color: purple;
}
```
> **Note:** 2$n$ designates any items whose position is a multiple of 2, while 5 is the offset from where it should start.

The `:nth-of-type()` selector is similar to the `:nth-child`. However, it’s used in places where different elements are at the same level. The selector matches each element of the nth-child of a particular type.

For example, suppose we have a `<div>` element containing several paragraphs and images. If we want to select the odd images, the `:nth-child` won’t work. We need to use `div` `img:nth-of-type(odd)` instead.


The `:first-of-type` selector selects the first element of its particular type within the parent element.

For example, the first `li` and first `span` element are given `red` text below:

**HTML**:

```html
<ul>
 <li>This text will be red.</li>
 <li>Lorem ipsum. This text will be red.</li>
 <li>Lorem ipsum.</li>
</ul>
```

**CSS**:

```css
ul :first-of-type {
 color: red;
}
```

The `:last-of-type` selector is the same as above, but selects the last element:

**HTML**:

```html
<ul>
 <li>Lorem ipsum. Lorem ipsum. This text will be red.</li>
 <li>Lorem ipsum.</li>
 <li>This text will be red.</li>
</ul>
```

**CSS**:

```css
ul :last-of-type {
 color: red;
}
```

The `:nth-last-of-type()` selector is similar to :nth-of-type, only it counts in reverse (from the bottom up).

The `:nth-last-child()` selector is similar to `:nth-child`, but it also counts in reverse.

The `:only-of-type` selector selects an the element only if it’s one-of-a-kind (within its parent).

### Example

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Part 2: Pseudo-Classes

Structural and relational pseudo-class selectors

Structural pseudo-class selectors