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

# What is a viewport?
The viewport is the visible area of a web page. It changes depending on the user’s device. It’s usually much smaller on mobile devices.

Before smartphones and tablets, web pages were only designed for computer screens, and it was common for them to have a fixed size.

Now, we often use smartphones and tablets to browse the internet, so fixed-size web pages are far too large to fit on these smaller screens. Flexible layouts are the solution to this!

CSS viewport units are a great way to get started with flexible layouts, which we’ll look at in detail in this lesson.


# Viewport units
## The `vw` unit
The viewport width (`vw`) unit represents a percentage of the user’s viewport width:

```css
.element {
  width: 20vw;
}
```

So, `20vw` is equal to 20% of the viewport’s width.

It’s similar to percentage, but the value remains consistent regardless of the value held by the parent elements. This is similar to how `rem` units remain relative to the root.

These `vw` units are often used for sizing responsive types, which is the type that adjusts its size based on the user’s screen size.

## The `vh` unit

The viewport height unit represents a percentage of the user’s viewport `height`. So, `20vh` equals 20% of the height of the viewport:

```css
.element {
  width: 20vh;
}
```
This is the same as `vw`, but it’s based on height instead.


## The `vmin` unit

The viewport minimum (`vmin`) unit is the minimum value between the height or width as a percentage. This value is whichever is currently smaller, `vw` or `vh`. So, `10vmin` is 10% of the current width or height, depending on which one is smaller.

```css
.element {
  width: 10vmin;
}
```


## The `vmax` unit



The viewport maximum (`vmax`) unit is the maximum value between the height or width, and it’s given as a percentage. It’s the opposite of `vmin`, and is whichever value is currently larger, `vw` or `vh`. So, `20vmax` is 20$\%$ of the set width or height (whichever is larger):

```css
.element {
  width: 20vmax;
}
```

# Which unit should you use?#
You can determine the most appropriate CSS unit by answering the following questions:

- Do you want this element to scale when the viewport size changes?
- If yes, what do you want it to scale relative to?

When you’ve answered these questions, determining the most appropriate unit is much simpler!


# Example

Learn about the CSS units related to the viewport.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Viewport Units

What is a viewport?