Create Quality Articles
With CSS

Separating Content from Display

Creating your quality articles using Cascading Style Sheets(CSS) will insure that your articles will be both easy to read and aesthetically pleasing to the viewer.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and "liquid."

Removing the display attributes of your articles from the HTML code allows you to concentrate on using the HTML for organizing your document’s content.

The CSS Approach to Article Writing

When you use CSS, a new approach is possible to writing your articles for the Web:

Once you work through this process, you can reuse both the HTML document and the CSS file as templates for your future, quality articles.

This article will provide the tips, tricks, and sample code to give you a head start in creating your own quality articles and templates using CSS. If this all seems complex and intimidating at first, don’t despair—read on.

The Basic HTML Document

The HTML 4.01 code below shows the anatomy of a basic HTML document, or web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Your Title Goes Here


Your Content Goes Here



"Tags" are used to define HTML "element" boundaries. Element content lies between the tags.

Tags usually exist in pairs, a start tag and and end tag. The start tag is surrounded by "<" and ">" angle brackets. An end tag is bracketed with the same symbols and includes a "/" as the first character between the symbols. For example, code for a paragraph would include the <p> and </p> tags. The paragraph content would be placed between the tags.

In HTML 4.01, not all tags exist in pairs. The <!DOCTYPE> and <meta> tags do not use an end tag, for instance. Another commonly used tag that does not require an end tag in HTML 4.01 is the line-break tag, <br>.

In the basic document, the tag pairs are
<html> - </html>
These tags tell a browser that this is an HTML document and define the start and end of the document.
<head> - </head>
The head element can contain information about the document. Although the browser does not present the information to a viewer, the information can be "seen" and used by search engines.
<title> - </title>
The title tags define the title element that will be used by a browser for the document’s title.
<body> - </body>
The document's content is placed between the body tags.

Document Type Definition (DTD)

The first line of code in the basic document is the Document Type Definition (DTD). The <!DOCTYPE> tag tells the browser which HTML or XHTML specification the document uses. HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

For this article, I will use the "Transitional" document type definition.

<meta> Tags

The <meta> tag in the basic HTML document provides information about how the page-content characters are encoded so that a browser can interpret them correctly.

If you want your articles to be widely seen on the Internet, you need to be particularly interested in the two <meta> tags for keywords and description. These can be seen and used by search engines.


Use the "keyword" name and its related "content" in a <meta> tag to list your keywords or keyword phrases.

Keywords ought to be appropriate for the article content. They should also reflect what internet surfers actually type into a search engine’s query box when hunting for the information you are offering.

Keyword research is a study in itself. Good Keywords is freeware that can help you determine the best keywords to use in your article and keyword list. Keywords or keyword phrases within the meta tag need to be separated from each other with a comma.

I used the following to list the keywords for an article I wrote:

<meta name="keywords" content="profitable ads, ads that pull, profitable ads that pull">


Although not all search engines will utilize the description meta tag for their search results, you still need to include a good description for those that do.

If you had just a few characters to describe your article, or to entice a surfer to select yours from the results of a search, what would you write? What you would write is what should go into the description. I wrote this description for the article mentioned above:

<meta name="description" content="Profitable ads that convert visitors to customers are easy to write when you know how. Here are some basic guidelines for writing ads that pull.">

Cascading Style Sheets (CSS)

I have already suggested several reasons why today’s preferred method of creating web pages is to separate a page's content from it's display properties. It’s time for a demonstration of how this can be accomplished.

Headlines with HTML

In the past, HTML tags included attributes to define how the content was to be displayed by a browser. For example, for a blue, left aligned headline, the following code might have been used:

<h1 style="text-align:left; color:blue">Create Quality Articles<br>With CSS</h1>

Create Quality Articles
With CSS

Headlines with CSS

Before CSS can be used to format an HTML document, the name and location of the CSS file must be known to the browser. The browser gets this information through the <link> tag within the head tags:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Create Quality Articles<br>With CSS</title>

<link title="Article Style Sheet" rel="stylesheet" href="article.css" type="text/css">


Once the CSS file is "linked," the browser will check the file for <h1> formatting. Here is the CSS formatting information in the article.css file:


Now, when the browser sees the following code, it will create a maroon headline centered in the page:

<h1>Create Quality Articles<br>With CSS</h1>

Create Quality Articles
With CSS

In this demonstration, simple HTML code specifies what content is to be displayed. The CSS code in the "linked" articles.css file defines how the content is to be displayed.

Class and ID Attributes

Before CSS formatting can be applied to an HTML document, the content to be formatted must be identified. An easy way to do this is to place a "class" or "id" attribute within a start tag.

Once content is identified, the class or id name can be referred to in the CSS file and the formatting parameters defined.

The same class name can be used many times on a web page; each id name should be used just once per page. Two examples will show how this is done.

Class Attribute

In the first example, I'll demonstrate how to create an ad headline using a class attribute.

The headline is, "Thinking About New Windows or Siding for Your Home?" I will use the <div> and </div> tag pair to demarcate the text and add a class attribute to the start tag. I will use a class name of "headline." The HTML code looks like this:

<div class="headline">Thinking About New Windows<br>or Siding for Your Home?</div>

Note that I included a <br> line-break tag within the headline.

After I determined the class name, I added it to the CSS file. Class names in a CSS file are preceded with a period. Here is the CSS code for the headline:

font-size: 24px;
color: red;

In the CSS file, I have included the font-size, color, font-weight, and text-align attributes. Use a semicolon to separate attributes in the list. The HTML and CSS code combine to produce the following headline:

Thinking About New Windows
or Siding for Your Home?

It should be noted that there are some tags that are their own class names and do not require a preceding period in the CSS file. These include <p>, <h1>, <body>, <li>, and others. That being said, these tags can be modified by appending a class name to them. For example, if you wanted to make only the next paragraph blue, you could assign a class name to its tag and use it in the CSS file. The following code makes this clear:


<p class="blue">
This is a blue paragraph.



This is a blue paragraph.

ID Attribute

In the second example, I'll demonstrate the use of the ID attribute. The CSS syntax for an ID is a little different from that used for a class. In the CSS file, ID names are proceeded with a pound sign (#). The example below "floats" my 288px by 59px logo image to the left of the text: the text flows around the image.


<div id="logo">
<a href="" target="_blank">
<img src="images/logo.gif" alt="Elizabeth Adams Direct">


#logo { float:left; }


In the HTML code above, comments are created by using "<!--" and "-->" to bracket the comment. Two non-breaking-space characters (&nbsp) were used to provide a little space between the logo and the text.

Formatting with <span> - </span>

If you want to format just a bit of the content between existing tags, you can use the span tags: <span> — </span>.

In the article.css file, I have defined a background-color attribute for a "highlight" class that will put a yellow background behind selected text. Here's how it works using the <span> tags:


Be sure to <span class="highlight">separate attributes</span> with a semicolon!




Be sure to separate attributes with a semicolon!

Looks and Layout

A careful selection of the "global" characteristics used for the body element of your web page will insure that your articles will be both easy to read and aesthetically pleasing to the viewer. These characteristics include font, font color, page background color, and page margins.

I use the "body" code in the CSS file to define the default body display attributes. Here is the CSS body code from the article.css file:

CSS Body Code

font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
background: #fffef2;
color: black;
line-height: normal;
margin: 3% 25% 3% 25%;


In the CSS body code, I specify the font family I want to use. The first font listed, Verdana, will be used by a browser it it exists on a viewer’s PC. If Verdana is not available, the other fonts will be checked, in order. If none of the specific fonts are available, the browser will default to any available sans-serif font.

If you use a commonly available font/font-family for your articles, the chances are good that a reader will see the article as expected. Otherwise, your article might not look the way it should.

Verdana was designed for easy readability on computer monitors and, for this reason, is my font of choice. Since Verdana is commonly available on PCs, using this as the default font will also increase the likelihood that my article text will be displayed as I intended.

Page Background

I set the background color to a light, creamy color, the font color to black, and the line height, or spacing between lines, to normal. The background color I like to use (#fffef2) shows colored text and graphics to good advantage.


I like to adjust the article on my page to show content in roughly the middle half of the page. I think it is easier for the eye to process than content that goes edge to edge. I use the CSS margin attribute to adjust this. The margin attribute defines the top, right, bottom, and left margins respectively (margin: top right bottom left).

In the CSS code above, I set the left and right margins to 25% of the available display width. Using 25% places about 60 characters per line of text on my 1024x768 pixel full-screen display. I also set a small 3% margin above and below the content.


If you use a list in your article, you can use the CSS file to customize the way your list looks. Two important considerations of list design are the list bullet and the spacing between list elements. The example below shows how to change the bullet graphic and element spacing of an unordered list:


<ul class="benefits">
<li> &nbsp;Lower Energy Costs </li>
<li> &nbsp;Higher Home Value </li>
<li> &nbsp;Free Project Estimate </li>

In the HTML code, I used the &nbsp; to provide an extra space between the bullet and the text. I did this especially for IE6. Not all browsers treat code in the same way. Sometimes, "tweaks" have to be made for proper display in a particular browser.



list-style-position: inside;
list-style-image: list-style-image: url('../../miscpics/small_blob.gif');
list-style-type: none;
margin-bottom: 1em

I added two list attributes to customize the list:
Used to specify the URL to a bullet image.
Used to provide some extra space between list items.


For a complete description of possible list attributes--as well as great tutorials on using HTML and CSS--you can visit

Entity Names

Some characters have special meaning in HTML documents. When you want to use these characters in your text, you can use their "entity names" to prevent browsers from misinterpreting them. For example, the lesser-than and greater-than signs (<, >) are used to form tags in HTML code. Using the entity names &lt; and &gt; instead of < and > prevents browsers from interpreting the characters as tag brackets. I used entity names extensively in this article to display the code samples in text—and not HTML.

Most commonly, I use entity names in my HTML code for quote marks. By doing this, I get the look and feel I want in my text when I use quotes.

For example, a standard double quote mark looks like this: ". For my ad headlines, I sometimes use distinctive left and right quote marks with the text. I do this by using the entity names for a left quote, “, and right quote, ”. These are &ldquo; and &rdquo; respectively.

Which of these headlines do you like best:

"Buy Now!" or “Buy Now!”

The second headline uses separate entity names for the left and right quote marks.

Careful attention to the entity names you use can add “that extra touch of class” to your articles.

For HTML 4.01, there are entity names for both ASCII and extended characters and symbols. I use &copy; to insert a copyright symbol, ©, at the bottom of my articles.

I use Dreamweaver 8 for my HTML and CSS editing. With Dreamweaver, I can validate my code as I write it. I have optioned the validator to warn me when entity name substitution might be appropriate.

You can find a complete list of characters and symbols and their replacement names at

Validating Your HTML and CSS Code

I like to write valid HTML code for the <!DOCTYPE> version I use. If you click on the w3 validation icon at the bottom of this page, you will see that the HTML code for this article is valid and error free.

You can validate both the HTML and CSS code used to create your article at

If you use Firefox for your browser, you can download a wonderful tool bar that makes working with HTML much easier, including HTML and CSS validation. You can get it at


When you separate your article’s content from the code browsers use to display your article, you can focus on using simple, basic HTML code to organize your content. A Cascading Style Sheets(CSS) can accomplish the separation.
A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and "liquid."

You can look at one of my recently published articles to see the results of using the techniques outlined in this article. The article is “Profitable Ads: How to Write Ads that Pull.”

Elizabeth Adams
Sincerely Yours,

Elizabeth Adams

Valid HTML 4.01 Transitional