CSS gets a lot of attention these days…in the web design arena. And, rightly so. CSS makes it easier to maintain or update a site. CSS is efficient and effective.
Efficient in that it with one small change inside CSS, I can change all my headings on the site to a different size or a different color. Or, I can shift the right hand column of the page layout to the left side. (OK, that might a bit more than just one ‘small’ change.)
Effective in that I can now control the placement of elements and not be limited to kludgy HTML.
In this post I want to focus on formatting text with CSS. Before we get started, let’s discuss where we place our CSS code. I recommend placing it in an external style sheet. Create a new file, add your CSS styles (as defined below), and save it with a .css file extension. Then, in your html page, between the opening and closing tags, add a tag to refer to the file you just saved. For example:
Without going into a lot of detail, the format of CSS is:
element { property: value; property: value; }
You can have as many property:value’s as you want, using the appropriate CSS property for that type of element.
Since we’re focusing on formatting text, we will only ‘re-define’ the ‘text’ tags in html.
First off, let’s say I want all the text on my site to use Georgia, Times New Roman, TImes, serif.
The CSS would be
body {font-family: Georgia, “Times New Roman”, Times, serif; }
If I want all my headings to be red, I use CSS as follows:
h1, h2, h3, h4, h5, h6 {color:red;}
If I want h1 to be 24px and bold I add:
h1 { font-size: 24px; font-weight: bold; }
For the second level heading, I might have:
h2 { font-size: 20px; }
The second level heading will also use the font Georgia and will be in red. It will pick up these attributes from the previous declarations.
If I wanted my paragraphs to have a certain line height, I add this to my CSS:
p { line-height: 20px; }
Or, I could add the same property:value to the body tag.
This is just a start on how to format text using CSS. We’ve only redefined how the HTML tags will look. We haven’t touched classes or IDs yet.
A site I highly recommend in learning CSS is w3schools.com. It has an interactive area where you type in the CSS and you immediately see your results.