Just slightly different from the text properties are the font properties. The font-size property is useful for setting text to be just the size you want. You can use values like small, medium, and large for this property, or you can use more specific values. A value like 14px will set your text to be 14 pixels tall. Here, of course, the unit px indicates pixels. Using a different unit, em will give us a proprtional value of the default font size. So, a value of 1.1em gives 110% of the default font size.
An important thing to remember here is that this CSS property, like many others, is inherited. So, if you set a font size of 14px for your HTML body element, that will be the default font size for all elements contained inside the body. Here's an example use of the font-size property. It's hard to get an example picture to convey this idea, so trying this property in some of your own HTML code is probably the best way to understand it.
One of the biggest things you can do to make your webpage stand out is actually quite subtle: change the default font family. This is done with the font-family attribute, naturally. If you don't change this then the web browser will put all of your text in its default font family (usually some version of Times). In the example below note that different fonts are used for different HTML elements. In general, serif fonts like Times look nice for large text, but sans-serif fonts like Arial are a better choice for smaller text. The difference is that a serif font puts extra details around the tips of letters.
<html> <head> <title> Title of my webpage </title> <style type="text/css">h1 { font-family: times, serif; } p { font-family: arial, geneva, sans-serif; }</style> </head> <body> <h1>My Fancy Title</h1> <p> All of my lovely content. <p> </body> </html>
Once you've selected your favorite font just be careful of one thing: not every computer may have that font! Fonts must be represented by the user's comptuer and if that computer doesn't recognize your font choice, it's back to the default. The example above uses a list of preferred fonts as values. If the computer doesn't have the first font on the list, it will go to the next. Finally, at the end of the list a generic serif or sans-serif is given as a request for any font in that category.
With plain HTML code you've probably used the <i>
and <b>
tags to create italic or bold text. While this doesn't prefectly mesh with the goal of separating content (HTML) from presentation (CSS) it is a quick means of styling text you know you'll never change. For a CSS way to handle things, the font-style property will allow you to set text as italic or normal. To set how boldly a text is presented, use the font-weight property. Values of bold or normal will work, or you can be more specific by giving a value of 100, 200, 300, 400, 500, 600, 700, 800, or 900. Here larger values mean bolder text.