Time to Style Your Document with CSS

  • Posted on: 16 May 2011
  • By: admin

CSS stands for “Cascading Style Sheets.” It is the system used on the web to control the appearance and layout of web pages. In the early days of the web, coders would change the visual look of their content by embedding attributes in the HTML code. For instance, if a web designer wanted all of his or her text to use the Times New Roman typeface, she would place font tags around each and every bit of text using a tag like:

<font face="Times New Roman, Georgia, serif" size="2">Hello World</font>

This font face tag was all about appearance. A major shift in HTML coding was to move all appearance information out of the HTML tags and into cascading style sheets. Using CSS, a modern designer can change the look of all of the text in all of her pages by editing a single style rule.

Separating the styling of a web page’s content from the page’s HTML tags that structure that content result in more compact pages that are easier to revise and that can be easily adapted for delivery to a variety of devices from large screen desktop comptuers to smart phones. Using CSS rules, you’ll be able to change all kinds of visual characteristics of your web writing, such as modifying the font color or size and adding margins and borders around parts of your page.

To understand how truly powerful CSS can be, visit CSS Zen Garden, an extensive portfolio of design themes, each created by a different professional web designer. Using the links through the side navigation menu, view the different designs. In each instance, if you view the Page Source to see the underlying HTML code, that code will be exactly the same. Only the CSS rules have changed.

While you can embed CSS directly in an HTML document, we recommend that you avoid doing so and instead keep your CSS rules in a separate file, much as the CSS Zen Garden designers have done. Having a separate CSS file is much more efficient once you move beyond having only one web page in a web site. Imagine that you have a website that has a dozen or more pages. Now, imagine that on all of these pages you have added a particular background image and italicized text in certain places that you want to change—you want to give your pages a new background image and turn all your italicized words into bold print.

In the early days of web design, you would have to wade through the code of each and every one of those pages, changing the various in-line attributes associated with the background image and every occurrence of the italics attribute of your font face tags. With CSS you have to edit only a few lines in a single document: your stylesheet. Plus, if you ever have to go back and edit the content (the writing) that is marked up by the HTML, it’s much easier to read and add to the content when that content is not littered with formatting attributes.

So let’s get started with a little CSS coding exercise.

In the article, Creating a Basic Web Page Is Easy, you learned how to code a simple web page. Use your text editor to open the webpage.html file you created. Still have it? (If not, you can copy the example HTML text from that section and create a new file.)

View the file in Firefox, Chrome, or Safari again (rememeber not to use Internet Explorer). As you do, resize your browser window. See how your paragraph always expands or contracts to fill the width of the window?

A picture of your My First Web Page in the browser

A picture of My First Web Page with the browser window extended horizontally.

Figure 24. An example web page as viewed in a narrow and a wide window. Notice that the length of the text expands to fit the width of the window.

Suppose you wanted all of the paragraphs in your web page to be the same width regardless of the size of the browser window? Easy to do with CSS:

1. Open your text editor to a new, blank file.

2. Save the new file as style.css. (Note: if you are using Windows Notepad, you will need to change the “save as” file type to “All Files.”) Important! Be sure that you are saving the style.css file in the same folder on your computer as webpage.html.

3. Type the following in your style.css file:

p {width: 300px;


The “p” is known as the selector. It is the object (in this case a paragraph tag) that you want to apply a style to. Inside the curly brackets are properties. Your rule can consist of one or many properties. (We’ll see an example later on.) Each property should end with a semicolon.

The width of the text inside the paragraph tag is specified in pixels (px). Since screens have resolutions that are measured in pixels, the pixel is the common unit for describing size on the web.

Now, back to styling your text. Save your style.css file once you have added in the rule for paragraph styling.

There is one more important step. The browser needs to know where to find your style.css file so it can apply your style rules to your HTML page. In Creating a Basic Web Page Is Easy, we talked about how the <head> section of your HTML file contained metadata, that is information about the page that the browser processes. The location of your style.css file is another example of metadata.

Add the following in between the <head> . . . </head> tags on the line after the <title> in your webpage.html file:

<link rel="stylesheet" type="text/css" href="style.css" />

This code will tell your browser that there is a CSS file called style.css in the same folder as your webpage.html file. Your browser will then use the rules in your .css file to style the content of your HTML page.

Once you are done, the top part of the HTML in your webpage.html file should look like this:

<!Doctype html>



<title>My First Web Page</title>

<link rel="stylesheet" type="text/css" href="style.css" />


Now, view your web page in your browser. It should look something like this Figure 25.

The text in the browser window stays the same width even though the browser window is widened.

Figure 25. By using CSS, the paragraph width stays the same regardless of the browser window width.

If your page does not look like Figure 25, check your CSS and HTML file for typos. CSS rules are very unforgiving. Make sure each rule is surrounded by curly brackets ({ . . . }), and each style property ends in a semicolon. Also make certain that your webpage.html and style.css files are in the same folder. Proofreading issues and misplaced CSS files are the two most common problems that students have when first learning to use CSS to style their web pages.

Suppose we want to get a little fancier? Black text on a white background is boring. Let’s reverse it. We can do that by specifying properties for the entire <body> of the web page. Since the body tag controls everything that appears in the browser window, it’s a good place for global style rules.

In your CSS file, leave the previous code you entered for paragraphs, and add the following:

body {background-color: #000000;

color: #ffffff;


The first property sets the background color for the entire page. There is also an attribute, “background-image” that you can use to specify a visual as the background instead of or in addition to a color. If you examine the CSS code used in the CSS Zen Garden designs, you will find many background images.

The second property, “color,” always refers to text color (even though it doesn’t say font or text). With both the background-color and color properties, the color is designated using a six digit hexadecimal number. Using W3School’s HTML Color Picker or Color Scheme Designer, you’ll find a wide variety of colors are available for your background color as well as their corresponding hex number.

Save your CSS file and refresh your webpage.html in the web browser. It should look something like this:

Now, the background is black and the font color is white.

Figure 26. Using a little CSS, we have changed the background color to black and the font color to white.

From here, you can go on to learn CSS rules that set margins, add borders, adjust line height or font size, change the placement of items on the page, etc.—the creative control available through CSS is quite extensive. Start with HTML Dog’s CSS Beginner Tutorial or W3Schools’s CSS Introduction, and you’ll soon be on your way to coding like a pro.