3 CSS Introduction
5 sections, 3 - 4 hours

4 CSS Display
5 sections, 3 - 4 hours

{ Common Rules. }

Objectives:

By the end of this chapter, you should be able to:

Use common typography rules to add styling

Include a custom Google font

CSS rules

Color

So far we have seen a few basic properties, such as background-color, which allows us to set the background color of an element. The value we assign to this property can either be a named color (blue, green, red etc.), a hex code (# followed by six values from 0 to F), an rgb value (red, green, blue), or an hsl value(hue, saturation, lightness) value. If you don't know what these are, you can mess around with them here. These same values can be assigned to the color property, which sets the font color on an element.

Typography

If we want to change the text on our page, we commonly use some of these rules:

font-size - select the size of your font (we will discuss other units of measurement in the next unit)

There are hundreds of CSS properties, much more than we can cover here. You'll pick up more properties as you start working on your projects. If you'd like to see an exhaustive reference of CSS properties and other keywords, MDN has got you covered.

Using a custom google font

You can head over to https://www.google.com/fonts and select some fonts, then click "Use" at the bottom. It will then give you a tag as well as the CSS necessary. Here is an example using Open Sans. Create an HTML file, and inside of the head add the following link: