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

# RGB colors
We can use the `rgb()` functional notation to calculate the `color` from its RGB notation as an alternative to hex colors.

We use a list of three numeric values ranging from `0` to `255`. The first is our `red` value, the next is our `green` value, and the last is our `blue` value.


For example:

```css
color: rgb(255, 255, 255);  /* white */
color: rgb(0, 0, 0);        /* black */
color: rgb(255, 0, 0);      /* red */
color: rgb(34, 139, 34);    /* forest green*/
```

We can use the `rgba()` **functional notation** to adjust the opacity. With RGBA, we add a fourth value. The value is a number ranging from `0` (completely transparent) to `1` (completely opaque).

For example:

```css
p {
  color: rgba(0, 255, 255, .5);
}
```
# Example


Stylizing Content using CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

RGB/RGBA

RGB colors