×
By the end of this chapter, you should be able to:
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.
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)text-align
- align the position of the textfont-family
- choose what kind of font you want to useletter-spacing
- add positive or negative (less) space between characterstext-transform
- capitalize/uppercase/lowercase your textline-height
- choose the amount of height between linesfont-variant
- useful for displaying a small-caps fonttext-shadow
- add a shadow to your textcolor
- select the color of the textHere's an example of how you could set values for each of these properties:
.some_text { color: #BDBFEF; font-size: 12px; text-align: center; font-family: helvetica, sans-serif; letter-spacing: -1px; text-transform: lowercase; text-shadow: 0 2px 0 black; /* first value is horizontal/x offset */ /* second value is vertical/y offset */ /* third value is how much blur */ /* fourth value is the color */ /* you can even have multiple shadows separated by a comma! */ line-height: 1.4; font-variant: small-caps; }
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.
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
:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then, inside of your style sheet, add the following rule:
body { font-family: 'Open Sans', sans-serif; }
If you put some text content in your HTML, you should see that the font has changed to Open Sans!
When you're ready, move on to Box Model