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-elements

A **pseudo-element** styles specific parts of an element. For example, we could use it to style the first letter (`::first-letter`) or line (`::first-line`) of a given element. Alternatively, we could use it to add content before (`::before`) or after (`::after`) an element.

For example:

```css
p::first-letter {
  color: red;
  text-transform: uppercase;
}
```
In the example above, every `<p>` first letter is selected using the `::first-letter` pseudo-element. The color is set to `red` and the text is set to `uppercase`.

We can identify a pseudo-element when they begin with a double colon (`::`). A single colon can also be used, but the standard convention is to use a double colon to clarify that these are different from pseudo-classes.

Some common pseudo-elements include the following:

- The `::first-letter` pseudo-element is used to style the first letter of a text.
- The `::first-line` pseudo-element is used to style the first line of a text.
- The `::before` pseudo-element lets us add rules before an element.
- The `::after` pseudo-element lets us add rules after an element.
- The `::selection` pseudo-element selects text targeted by the user.

There are more, but they’re considered experimental. In this lesson, our main focus is on the pseudo-elements listed above.


# The `::first-letter` pseudo-element

As we saw earlier, the `::first-letter` pseudo-element adds styles to the first letter of the text.

Let’s see this in action by changing the first letter of the text in our `<p>` element to a larger font size. The example uses a %, but you could use any valid CSS unit, such as px, rem, em, and so on:

```css
p::first-letter {
  font-size: 150%;
}
```

>**Note:** The `::first-letter` can only be applied to block-level elements. A block-level element is any element that starts on a new line, such as `<div>`, `<h1>` to `<h6>`, `<p>`,  and so on. It can’t be applied to inline elements such as <span> or `<code>`.

A neat trick is to combine pseudo-element selectors with classes:

```css
p.summary::first-letter {
  color: red;
}
```

Here, we can set the style for the first letter of every paragraph with the `summary` class.

# `::first-line`

The `::first-line` pseudo-element styles the first line of a text block.

To give the first line of any `<p>` elements a bolder font, we could use the following code:
```css
p::first-line {
  font-weight: 600;
}
```

Only some of the available CSS properties can be used to style a `::first-line`. This is typically only the font, text, and background-related CSS properties.

# The `::before` and `::after` pseudo-elements

These are probably the most commonly used pseudo-elements. Let’s review the following CSS code:

```css
div::before {   
   content: "before"; 
} 
div::after {   
   content: "after"; 
}
```

>**Note:** The `content` property is required, because it specifies the content to be added.

This translates into the following HTML:

```html
<div>   
   before   
      
   after 
</div>
```

## The `::before` pseudo-element

The `::before` pseudo-element can be used to insert new content before the content of an existing element.

A common use case would be if we wanted to add an icon before the content of an `<h1>` element:

```css
h1::before {
  content: url(icon.png);
}
```

We can use the `content` property to insert whatever content we like:

```css
p::before {
  content: "Check this out: ");
  color: green;
  font-weight: bold;
}
.company::before {
   content: url("images/logo.png");
}
```

## The `::after` pseudo-element

The `::after` pseudo element inserts new content after the content of an element that’s already there.


Here, we insert an icon after each `<h1>` element, like so:

```css
h1::after {
  content: url(icon.png);
}
```

Alternatively, we could add an arrow symbol (`"→"`) after any links, as shown below:

```css
a::after {
  content: "→";
}
```

# `::selection`

The `::selection` pseudo-element is another extremely useful property. It selects the portion of an element that the user selects.

We can use this to style text as highlighted. Here, we set it as `green` with a `gray` background:


```css
::selection {
  color: green;
  background: gray;
}
```

The properties which can be used with `::selection` include `color`, `background`, `cursor`, and `outline`.

A full example of the concepts presented in this lesson is given below:

# Example

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Pseudo-Elements

Pseudo-elements