Preparing to Blog – Use of Styles and Style Sheets

The twin issues of importing external HTML and the use of the Xinha WYSIWYG editor place a premium on creating "clean" HTML.  These issues are compounded by the fact that in the move to dynamic HTML and XML-compliant XHTML, there are also some code and changes to earlier conventional HTML (4.01) standards. Creating clean HTML requires a good understanding of styles and the use of cascading style sheets (CSS).

For example, in older HTML line breaks were standardly done with the <br>. However, in new code, <br> is not handled gracefully and often is replaced with <br />. Changes occur in other tags where closing brackets, such as for <a href="mysource.html">Link here</a>, is replaced by <a href="mysource.html" />Link here</a>. 

With respect to the <br> issue, it is probably good design to use the paragragh <p> tag. (Here, too, standards have changed, wherein paragraphs now are best formatted with a close tag </p>, whereas past practice had the close tag optional.) The real advantage of the paragraph element is that spacing between paragraphs can be precisely controlled in the style definition to achieve the presentation look you prefer.

In any event, all of these considerations suggest a need to better understand how all of this CSS stuff works. Unfortunately, for me, I really didn’t understand CSS well. What little knowledge I had came from a bunch of posted style sheets that largely acted only to confuse me further.

Realizing I finally needed to bite this bullet, I set off to discover whatever useful guides and guidance I could find online. Plus I sought the help of my longstanding colleague, Jerry Tardif, who has become our internal resident guru on all things CSS. I present the summary of those findings in this post.

Some Basics

Styles can be added to a Web site in one of three ways

1. Invoke an external style sheet (*.css) file, which is the best method;
2. Embed and then invoke the entire style definition within a given Web page; and/or
3. Embed style declarations within in-line HTML syntax (e.g., style="declaration").

For many reasons (see below), the first method is by far preferable, especially for a dynamic application such as WordPress.

Therefore, assuming the method used is external, we can now look at the style sheet’s building blocks. A style sheet (*.css) file is a plain text file that contains a series of syntax statements, or rules, to instruct how the HTML elements to which they refer should be displayed. Each statement has two parts; a selector and a declaration. The declaration is enclosed within curly brackets:

selector declaration
p { color: blue }

Each declaration has two sub-parts: a property (color:), and a value (blue). Depending on the number of attributes that can be declared for each specification type, there may be multiple declarations, each separated by a semi-colon, then concluded for that specification when all declarations are completed with a closing curly bracket.

The naming of the selector relates the rule to a particular element of the webpage (in this example, the paragraph tag and the declaration states how that element should be displayed – or blue color in this instance). The selector-delcaration has these syntax rules:

• Every listed property must be followed by a colon:
• Multiple declarations are allowed for a single selector, each has to be finished with a semi-colon;
• You can layout the style sheet to make it easier to read; as with HTML, extra spaces don’t
  matter, and comments can be introduced (see format below);
• There must be a space between each selector and its declaration (because of this, a selector name can not have any spaces in it);
• There must be a space between the property and its value, after its separating colon;
• Some selector names are "reserved" because they relate directly to HTML elements;
• There is "hierachy" to some selectors within the CSS; earlier selectors may govern or be inherited by later selectors. Inheritance driven by the CSS occurs within the block invoked in the Web page, unless subsquently overrriden within that block, based on the pecking order attributes in the CSS; and
• There is a sequential replacement of equal selectors by those encountered later in the CSS file.

There are three ways in which selectors can be named. The first is selectorname, with no prefix. The syntax allows this for any named selector to use this format, but this way is also treated specially for "reserved" HTML or style elements. As a result, I advise limiting this naming convention to reserved elements only. The second way is #selectorname, where the pound sign defines what is called an "id." And, the third way is .selectorname, where the period defines what is called a "class."

Some experts say a Class should be used to select recurring elements, while an ID should be used to select a unique element. Truthfully, for me, I have found these distinctions less than helpful and I have found no examples of where the distinction is useful.

Note: (Jerry Tardif’s observation is that the ID was an earlier form, with no differentiating functionality from a class, less functionality than the current class, with a use profile that could lead to possible confusion with an internal anchor link in a Web page. Moreover, Jerry notes that classes can be pseudoclassed, whereas IDs can not.)

As a result, when I need to class something, I use the class syntax and do not use ID selectors.

Getting Serious: More References

Everyone should begin with a basic introduction to CSS.  I found a very excellent one from the Lowtech Ltd organization in Sheffield, UK.  I’ve made a copy of it available here.

  [Click here to obtain a PDF copy of this short, 7 pp guide (55 KB).]

Another useful intro guide that is slightly longer at 19 pp. is from Patrick Griffin at htmldog.  While that site contains the document in parts, you can also obtain a PDF version from Stanford University.

Finally, the complete bible reference on all things CSS (version 2.+) is available in PDF form from the W3C organization.  This document is about 338 pages and a 1.6 MB download. While it is not useful as a starting learning guide or tutorial, if you are going to be serious about CSS this reference is indispensible.

In-line v. External Style Sheets

I find it generally cleaner to maintain all styles in an external style sheet (style.css).  Embedded styles (in-line) work fine but require each file to be edited if changes are necessary. It is also often difficult to find the style code. And, where there are browser differences, as there are, it is easier to handle exceptions for cross-browser compatibility in an external style sheet(s). By keeping everything in an external style sheet, everything is central and changes are easy.

To further make styles easier to find, I make extensive use of comments, separate my style sheet into sections, and provide a table of contents of sorts in the header. I also try to use very logical names for each style, such that they are easily remembered and logically apply to the styling task at hand.

Here is the header for this site’s style.css, also showing comments and nested brackets:

DIV v. SPAN

When you want to assign styles to longer blocks of text within your Web pages or templates use either the div or the span tags. There are considerations to the use of each:

• The span open and close tags are useful when a block of text within a paragraph should be assigned its own style. The insertion of span does not introduce a carriage return
• The div open and close tags can embrace whole subsections or the entire page within the body tags. The div tag, when used, causes a carriage return after the close tag. The div tag is very useful for sites such as this one where php calls or execution loops can be nested within the div element. I use div tags aggressively.

I personally do not use span, preferring to have actual named styles with open and close brackets if I need to make style changes within a paragraph. I therefore use div almost exclusively, and because of the way it works, I most often set a class style definition within div as well.

Reserved Selectors

When defining selectors, there are standard HTML elements that should not be confused with custom ones. Generally, you can define a reserved element to have any applicable attribute for that element in your style sheet. You do NOT preface a reserved selector with either the id (#) or class (.) conventions. A useful guide for reserved HTML elements is the HTML 4.01 Quick List from W3Schools. Here are some of the reserved elements that should be considered to avoid in your custom selector naming, and given great attention in your baseline CSS definitions:

This is the ‘Body’ reserved element.

<body>
Visible text goes here
</body>

There are up to six ‘Heading’ elements:

<h1>Largest Heading (by convention, but it is not absolutely required)</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading (by convention, but it is not absolutely required)</h6>

Here are other important ‘Text’ and ‘Link’ elements :

<p>This is a paragraph</p>
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
<code>This is some computer code</code>
<a href="http://www.w3schools.com/"><img src="URL"
alt="Alternate Text"></a>

There are many different ‘List’ elements, starting first with unordered (bullet) lists:

<ul>
<li>First bulletitem</li>
<li>Next bullet</li>
</ul>

… and ordered (numeric or lettered) lists:

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

… and less frequently used definition lists:,/p>

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

There are many elements reserved related to ‘Tables’:

<table border="1">
<tr>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
</tr>
</table>

Also, ‘Frames’ (though it is unlikely you would ever use this in a CSS):

<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

Though not frequent, it is also possible to set standard appearance conditions for ‘Forms’ (mostly for the input types and textarea):

<form action="http://www.somewhere.com/somepage.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked>
<input type="radio" checked>
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>

Finally, there are a few ‘Other Elements’:

<blockquote>
Text quoted from some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

Margins and Related

In his style sheets, Jerry Tardif explicitly enters the four margin types (or whatever subset of margins are applicable), rather than use the four sequence convention, a practice I’ve now adopted. For example, it is possible to label a margin such as:

Margin: 10px,10px,10px,10px

But what does the ordering of these things mean? Actually, by convention, this shorthand ordering of presentation is T,R,B,L (top, right, bottom, left). However, since I can never remember TRBL (isn’t that TeRriBLe!), I agree with Jerry’s recommendation to be explicit:

margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10 px

It takes more lines of code, but that is a minor price for clarity. This approach applies to other descriptors such as padding, etc. Generally, however, only the relevent TRBL aspect need be specified.

Custom Elements

If you avoid the reserved names above, you may create and name as many custom elements as you wish. As the discussion above noted, I tend to only use class definitions, but that is likely because I’m not sophiscated enough to know the difference and keeping things simpler in my styles sheets is important.

Use logical names with generality and inheritance in your custom elements. By general, I mean named "classes" such as ‘Panels’ or ‘BlockText’ or ‘Inventory’. By inheritance, I mean nested names from the general such as ‘LeftPanel’ and ‘RightPanel’ related to ‘Panel’. While tempting, try to avoid names that have too much style specificity such as ‘RedText’. If you later decide red is not for you and you prefer green, you will have confusing style references in your HTML.

Validate Your CSS

Finally, when all CSS changes are updated and finalized, validate your CSS syntax. The W3 organization offers an easy online CSS validator. You may need to make final editing changes based on the validation findings.

Author’s Note:  I actually decided to commit to a blog on April 27, 2005, and began recording soon thereafter my steps in doing so.  Because of work demands and other delays, the actual site was not released until July 18, 2005.  To give my ‘Prepare to Blog …’ postings a more contemporaneous feel, I arbitrarily changed posting dates on this series one month forward, which means some aspects of the actual blog were better developed than some of these earlier posts indicate.  However, the sequence and the content remain unchanged.  A re-factored complete guide will be posted at the conclusion of the ‘Prepare to Blog …’ series, targeted for release about August 18, 2005.  mkb