Body Tags in CSS

Transcript

In the last lesson, you learned how to change the color of your text.  In this lesson, how to make your text even fancier, by changing its shape and size too. 

Lets go!

To change the shape of characters, also known as font, you use the font family property. Font family takes two values. serif or sans serif. A serif font family adds stylish little tails to the end of its characters, while sans serif doesn't. Sans is French for the word not. So it literally means not serif.

I want to put a font family and a color on my h1. But there's a bit of a problem. How do I put both styles in one style attribute? I'll start with a semi colon right after my first property and value followed by the next property and value.  Now my h1 has the white smoke color, and the sans serif font family. 

Just like an HTML, the whitespace between your CSS styles doesn't matter. You can leave no space at all between the semi colon and your second style, or you can put a whole tab. 

However, I like to put each style on a new line so that my code is easier to read. I also want to make my h1 a little bigger. It's the title of my page. So it should really stand out. I use the font size property to do so. Font Size takes an interesting value. px, short for pixel. A pixel is the size of a small dot on your screen. To give you a better idea. Browsers usually make paragraphs font size 16 pixels tall and rank one headings font size 32 pixels tall. But to really get a feel for how big your font size renders, you should try out different values. 

I'll give my h1 a font size of 40 pixels to make this heading really stand out there. 

There! My heading is complete.

Cool huh? Lets move on to the next lesson and learn how to position text on the page using CSS.

I will see you soon.