Learn core CSS principles, explore layout creation, and refine skills in typography and styling.

Web Page Styling—CSS

In this module, we’ll introduce you to the essentials of CSS. We’ll learn about core concepts such as the cascade and inheritance. We’ll cover various CSS units and dive into fundamental principles like the box model, margins, padding, and fonts. We’ll also teach you about flexible layouts using display properties and CSS positioning techniques. Additionally, you’ll explore backgrounds, colors, images, and practical examples to solidify your understanding. By the end of this module, you will be able to confidently create well-structured web pages.

Getting Started with CSS

Let me show you what a more practical font-family declaration would look like:

p {   
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

## What's that?

Here is what's going on.

The `font-family` property may be used to define a prioritized list of font family names and a generic font family name to be used.

In the declaration above, if the user has the font, `Verdana` installed on their system, great! The browser will use `Verdana`. 

If `Verdana` does not exist, then `Geneva` wil be used. And if that doesn't exist too, `Arial` will be used. Oh, so `Arial` isn't installed on the user's pc too? then Helvetica will be used. 

Finally, if none of the specified fonts are found installed on the user's device, then whatever font is of the family, `sans-serif` will be installed.

Remember that **sans-serif** is a generic font family.

## System Font Stack
If you want to use the native font of the operating system of the user, do this: 
```css

.system-font-stack {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

```

This may help you get close to a native app feel. You love that?


 

Keep going champ! You're doing great. 👍

# What's that?

Here is what's going on.

The `font-family` property may be used to define a prioritized list of font family names and a generic font family name to be used.

In the declaration above, if the user has the font, `Verdana` installed on their system, great! The browser will use `Verdana`. 

If `Verdana` does not exist, then `Geneva` wil be used. And if that doesn't exist too, `Arial` will be used. Oh, so `Arial` isn't installed on the user's pc too? then Helvetica will be used. 

Finally, if none of the specified fonts are found installed on the user's device, then whatever font is of the family, `sans-serif` will be installed.

Remember that **sans-serif** is a generic font family.

# System Font Stack
If you want to use the native font of the operating system of the user, do this: 
```css

.system-font-stack {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

```

This may help you get close to a native app feel. You love that?


 

Keep going champ! You're doing great. 👍

Getting Started with CSS

CSS Core Concepts

CSS Units

CSS Fundamentals

Unlocking Flexible Layouts with CSS Display

CSS Positioning

Typography in CSS

Backgrounds and Colors

Images and Floats in CSS

Conclusion

What’s that?

System Font Stack