This module introduces to CSS, tailoring web styles using the document hierarchy model, CSS fundamentals, layout techniques, and animation functions.

Zero to Hero in Front-end Web Development

This module is a comprehensive introduction to both writing and implementing CSS.  We’ll learn how to tailor web styles to specific areas using the document hierarchy model. We’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to our web page. After we’ve defined these elements, we’ll use CSS to define layouts around pictures and text flow to completely control the web page’s look. We’ll wrap up by exploring the essential animation functions of CSS.

Web Designing with CSS

**Feature queries** are used in CSS for precise feature detection and are now supported by all modern browsers!

We use the `@supports` keyword for feature queries, as shown in the example below:

```css
@supports (height: 100vh) {
  .container {
    height: 100vh;
  }
}
```

Here, we check if the `vh` unit is supported. If so, the `height` value is set accordingly.

Feature queries are structured much like media queries.

Let’s expand upon this example:

```css
.element {
  height: 100%;
}

@supports (height: 100vh) {
  .element {
    height: 100vh;
  }
}
```

We’ve provided a fallback by default, giving the element a `height` of `100%`. If the browser supports `vh`, then `100vh` applies instead.

The `@supports` keyword can be used for any available property in CSS.The logical operators, `and`, `or` and `not`, can also be used in feature queries. Let’s use `and` to check if CSS Grid and Flexbox are supported by the user’s browser:

```css
@supports (display: grid) and (display: flex) {
  /* ... */
}
```

The example given below checks if CSS Grid is supported:

```css
.element {
  float: left;
  ...
}

@supports (display: grid) {
  .element {
    float: none;
    display: grid;
    ...
   }
}
```

Stylizing Content using CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Feature Queries