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

# Pseudo-classes
**Pseudo-class selectors** are predefined keywords that define the state of an element or target a child element. They occur pretty frequently, and we can see them in action when a colon follows an element. An example of this is the `:hover` selector:

```css
a:hover {   
   /* Hover is a pseudo-class! */ 
}
```

>**Note:** The `:hover` selector selects elements when you mouse over them.

# Common pseudo-class selectors

Listed below are some of the most common pseudo-classes grouped into the following categories: state, validation, structural, and relational.

Let’s take a look at them!


## State pseudo class selectors

A **state pseudo-class selector** is used when the user is expected to complete particular actions, such as clicking or hovering over a link.

The `:link` selector represents a link that hasn’t been visited yet. It matches all unvisited `a` links, as long as they have an `href` attribute.

```css
a:link {
  color: blue;
}
```

Styles defined by the `:link` pseudo-class selector are overridden by any subsequent state pseudo-class selector (`:active`, `:hover`, or `:visited`). So, it’s always best to put the `:link` rule before the rest.

The `:visited` selector selects all links that have been visited in the current browser session.

```css
a:visited {
    color: red;
}
```

The `:hover` selector is used whenever the user’s cursor hovers over a link without clicking it. We can apply styles to this state with the `:hover` pseudo-class.
In the example below, `a` elements change to `orange` when hovered over:

```css
a:hover {
    color: orange;
    cursor: pointer;
}
```

The `:active` selector selects a link when it’s being activated. This could be when it’s clicked, tapped (on a touchscreen), or even when tabbed to (as in a navigation item) on a keyboard.

```css
a:active {
    color: pink;
}
```

### Example

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Part 1: Pseudo-Classes

Pseudo-classes

Common pseudo-class selectors