Many of my training clients find it frustrating when they find out they have to learn yet another language. However when it comes to bang-for-your-buck, no language approaches the power of CSS — Cascading Style Sheet language. If you know a little HTML, this tutorial will show you the power and utility of CSS.
What is CSS?
Cascading Style Sheet language is a powerful and easy-to-learn markup language that allows you to control the design, look, and style of a Web page. It is important to note that design is not the purview of HTML — HTML’s design purpose was only to structure the elements on a page, not define how they appear. The “default style sheet” that lives in the browser is what defines the appearance of elements within a Web document without any CSS code. When you use CSS you override the default stylesheet and style elements as you like.
What you need
You can complete this tutorial with any text editor. Komodo Edit, a free text editor, is an excellent choice. I also recommend that you obtain a copy of the Firefox browser with the latest Firebug plug-in. You can find the code examples from this article in a paste-and-cut-able text version here.
Getting started
First we need some content to style. Open your text editor and let’s enter the following HTML basic document structure and content:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Styling a poem</title> </head> <body> <p>With rue my heart is laden<br/> For golden friends I had, <br/> For many a rose-lipt maiden<br/> And many a lightfoot lad.</p> <p>By brooks too broad for leaping<br/> The lightfoot boys are laid; <br/> The rose-lipt girls are sleeping<br/> In fields where roses fade.</p> <p>A.E. Housman (1859-1936)</p> </body> </html>
Save your poem as an .html file and let’s display it in the browser. Every browser has a feature that lets you open an .html file directly off of the hard drive. You will see the poem appear styled by the default style sheet. (See Figure 1.) The default style sheet varies little from browser to browser.
Figure 1. The poem HTML-styled by the default style sheet in Firefox.
Where to add CSS code
There are three ways to add CSS code to a document:
- You may add CSS code in-line using the style attribute within an element. This is not the recommended practice, as it integrates the style with the CSS code and you should keep the two separate. Note that in-line CSS may be necessary for certain applications such as HTML e-mails.
- You may place CSS in the "head" section of the document using "style" tags. I’ll demonstrate this method in the tutorial.
- Finally, you may place CSS in a separate file by placing the "link" tag in the "head" section of the document. Many would argue that this is the most beneficial method, as you can attach many pages to the same CSS document, giving the site a consistent appearance. I’ll demonstrate this method as well.
Initially, we’ll place our code in the “head” section of the document, using the “style” tag. Right below your title tag, insert the “style” element and appropriate attributes:
<head> <title>Styling a poem</title> <style type="text/css"> </style> </head>
The new code appears in bold. (See Figure 2.)
Figure 2. Text editor with "style" element added to the document "head"
Selectors
You use selectors to select which HTML elements you will be styling. While selectors can get somewhat complex, there are three basic ways you can select tags for styling. The first and easiest way is to select by tag name. If you select by tag name, you simply use the tag name in the CSS followed by the rule. Inside the style element add the following code:
<style type="text/css">
p
{
font-family: arial;
}
</style>
In this case the selector is ‘p’ and it is selecting paragraph “p” elements within the code. If you view this within the browser window now, you will notice all of the text (which is all contained in p elements) is now rendered using the Arial font
We can add a second rule to the p selector in the CSS to turn the text red like this:
<style type="text/css">
p
{
font-family: arial;
color: red;
}
</style>
Now if you load the page in the browser you will notice that the text is rendered in both Arial and red. (Figure 3)
Figure 3. The default style sheet was superseded by the style sheet rules written for the paragraph element.
Let’s add some additional code to the body section of the document so we can demonstrate the use of ID’s and classes as selectors. Add the bolded code to the “body” section of the document:
<body> <div id="poem"> <p><span class="bold">With rue my heart is laden</span><br/> For golden friends I had,<br/> For many a rose-lipt maiden<br/> And many a lightfoot lad.</p> <p>By brooks too broad for leaping<br/> The lightfoot boys are laid;<br/> The rose-lipt girls are sleeping<br/> In fields where roses fade.</p> <p>A.E. Housman (1859-1936)</p> </div> </body>
With this additional HTML, we have defined a logical division around the poem with an id of “poem” and created a span around the first line with a class of “bold”.
In the CSS section we can create selectors to address both id’s and classes within our code. Id’s are prepended with a ‘#’ symbol and classes are prepended with the ‘.’ symbol. Once we add the appropriate code to the style element, it will look like this:
<style type="text/css">
p
{
font-family: arial;
color: red;
}
#poem
{
border: 1px solid black;
}
.bold
{
font-weight: bold;
}
</style>
If you view the result in the browser, you will note a one-pixel-wide solid black line around the entire poem and the first line, which was marked with the “span” tag and bold class, is now bold.
Figure 4. The poem is now styled using three different types of selectors.
Rules
As you have probably noticed, the style rules follow the selector and determine how the elements will actually look. There are dozens and dozens of style rules that you can use that can control just about every possible variable in an element’s appearance. So far in this tutorial we’ve demonstrated selecting a font, a color, creating bold letters and putting a border around an element. This is just the beginning.
The good news is if you’ve used one rule — you’ll use the rest in a similar fashion. W3schools.com provides an excellent listing of some of the most commonly used CSS rules at: http://www.w3schools.com/cssref/default.asp.
Remember: each rule has a name and a value separated by a colon. So if you are, for example, trying to set the font size of an element, you would use the font-size rule inside the selector and then provide it with a value. For example:
p
{
font-family: arial;
color: red;
font-size: .8em;
}
With the addition of this rule, you reduce the font size to 80% of the size in the default style sheet. (1em is 100% of the size of the default style sheet). The best way to learn the many types of rules and styles that are possible with CSS is to experiment.
As you learn more about CSS, keep in mind that this technology will only become more critical for learning applications. Not only are Web-based applications using CSS, but also learning applications that use Flash Builder and Flex, and many mobile learning applications will continue to use this technology.
On the video
On the video, Mark demonstrates completing this tutorial, adding additional information and commentary.