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 font properties
The `font` property is known as a shorthand property and can combine several subproperties into a single line of code.

For example:

```css
font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;
```

The code above is equivalent to the following:

```css
font-stretch: normal;
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 16px; 
line-height: 120%; 
font-family: "Helvetica", sans-serif;
```

It’s not necessary to declare each property. However, because it’s a shorthand property, they need to be in the correct order. Let’s review each of these properties in more detail.



## The `font-family` property

The `font-family` property defines the element's default font family.

The selected font isn’t a singular font face but is instead an entire group  of sub-fonts, such as sans-serif, Helvetica, Arial, and so on. This group of sub-fonts makes up a “family.”

```css
body {
    font-family: Helvetica;
}
```

The `font-family` used should match a font that has either been embedded on the page or is already available on the user’s system. We can also choose multiple fonts, as shown below:

```css
body {
    font-family: Helvetica, Arial, sans-serif;
}
```

The browser chooses the next font in the list if the first can’t be used. This may happen if it isn’t found on the user’s local machine or if the font’s server is down.

Font types are typically classified as Serif, Sans-Serif, or Monospace. Some of the most popular fonts include the following:


- **Serif:** Times New Roman and Georgia.
- **Sans-Serif:** Arial, Verdana, and Helvetica.
- **Monospace:** Courier and Lucida Console.

Let’s return to our example. The browser first looks for Helvetica, then Arial. If neither one is found, the browser selects the default Sans-Serif font.

If you want to guarantee that the user’s browser chooses the correct font, you can embed the font in your CSS in the following way:

```css
/* definition */
@font-face {
  font-family: MyCustomFont;
  src: url('fonts/MyCustomFont.eot');
  src: url('fonts/MyCustomFont.eot?') format('☺'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* use */
body {
    font-family: MyCustomFont, Tahoma, serif;
}
```
> **Note:** In the code above, `eot`, `woff`, and `ttf` are the font files for `MyCustomFont`. They need to be copied to the `.../fonts` folder. You can generate these files from any font usingg [Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator). 

## The `line-height` property

The `line-height` property defines the amount of space above and below an element. It can be written as follows:

```css
p {
    line-height: 1.5;
}
```

In the code above, we set a `line-height` that’s 1.5 times the default. We can also use the `normal` and `none` keyword values. We can also use a number, length (any valid CSS unit), or percentage (the element’s font size multiplied by the percentage).

## The `font-weight` property

The `font-weight` property sets the width (or thickness) of each character in a font. We can use values such as: 


- `normal`
- `bold`
- `bolder`
- `lighter`

The values `bolder` and `lighter` are relative to the element’s parent. Both set the `font-weight` to one relative unit bolder or lighter.

The numeric values `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, and `900` can also be used, with `100` being the lightest and `900` being the boldest. A value of `400` is equivalent to `normal` and a value of `700` is equivalent to `bold`.



## The `font-stretch` property

With the `font-stretch` property, we can choose a narrow or wide face for the font, assuming the font being used contains the corresponding font faces.

Possible values include:


- `ultra-condensed`
- `extra-condensed`
- `condensed`
- `semi-condensed`
- `normal`
- `semi-expanded`
- `expanded`
- `extra-expanded`
- `ultra-expanded`
- `font-style`

## The `font-style` property
The `font-style`  property accepts three values: `normal`, `italic`, and `oblique`.

For example, we can set our font to `italic` very easily:

```css
p {
  font-style: italic;
}
```

There’s very little difference between `italic` and `oblique—both` apply a sloping effect to the text.

## The `font-size` property
The `font-size` property is used to set the font size. For example we can set the font size to the following:

```css
p {
  font-size: 20px;
}
```

We can use either a valid length value (such as px, rem, em, or a percentage) or a value keyword, such as:

- `xx-small`
- `x-small`
- `small`
- `medium`
- `large`
- `x-large`
- `xx-large`
- `smaller`
- `larger`

Both `smaller` and `larger` are relative to the parent element’s set size, roughly by the ratio used to determine sizes `xx-small` to `xx-large`. This is based on the user’s default (`medium`) font size.

Keep in mind that `font-size` is a mandatory value. When using the `font` shorthand, the size must be set or it will be invalid.

## The `font-variant` property

The `font-variant` property is an older property of CSS. It was originally used to set text to small caps and had three values: `normal`, `inherit`, and `small-caps`. The `normal` value is the default. The `inherit` value defaults to `yes`. The `small-caps` value sets the text to small caps, as in the example below.

## Example
Try experimenting with the values using the code sample below:

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Fonts

CSS font properties

The `font-family` property

Fonts

CSS font properties

The font-family property

The `font-family` property