This page looks best in a style-aware browser.

[Home] [Style] [Tutorial 1] [Tutorial 2] [Tutorial 3] [Tutorial 4] [Tutorial 5] [Tutorial 6] [Tutorial 7]

Tutorial 6: CSS in light of Word styles

A abbreviated look at CSS in light of your previous knowledge of Word styles. This tutorial presumes some familiarity with HTML basics.

CONTENTS

• A quick review of HTML
• CSS Styles
• Example 6A:
• Classes
• Applying CSS styles directly to HTML elements
• CSS formatting
• Exercises
• CSS formatted HTML in non CSS-aware browsers
• Another way to create CSS

A quick review of HTML

We’ll now take a very quick look HTML. This short walk through the land of HTML is intended for those who may need a refresher or a quick overview of the language. It won’t suddenly turn you into an HTML wizard. But you should get a sense of what the subject is about and how HTML actually looks. If you already are knowledgeable about the subject, you might want to skip this section and go directly to the discussion of CSS.

HTML or Hypertext Markup Language, is a way of “marking up” (or annotating) a plain (or ASCII) text file to indicate formatting. This markup is effected by way of tags that enclose text. So, for instance to indicate a Level 2 Heading, you enclose text in the H2 start and end tags like this:

  <H2>This Is Some Heading 2 Text</H2>

This text will be formatted by a program called a browser that decides exactly how it wants to show a level 2 heading.

Although recent versions of HTML include many markup tags for physical formatting, the original intentions of HTML’s designers were to convey not physical formatting (such things as font, paragraph alignment, etc) but rather logical formatting — “structural information” about a document — such things as Headings, Lists, Paragraphs.

Typically, HTML looks like this:

<H1>This Is The Title To Our Document</H1>
<P>Here is some blathery text: blather, blather, blather, blather, blather, blather, blather.</p>
<H2>Subtitle One goes here</H2>
<P>Here is some more unimaginative text: blather, blather, blather, blather, blather, blather, blather.</P>

<H2>Subtitle Two goes here</H2>
<P>Here is some more unimaginative text: blather, blather, blather, blather, blather, blather, blather.</P>

This basically says that the first line is a Level One Heading (shown as <H1>); the block of text is a Paragraph (<P>); and the third line is a Level Two Heading (<H2>). That’s basically HTML in a small nutshell. It’s not very difficult really, However it has grown into a very detailed language with all sorts of twists and turns due mainly to additions of such things as scripting and the like.

Here are some salient technical points about HTML:

Elements

Technically speaking, HTML is comprised of “elements”: a paragraph is an element; so are each of the six levels of Headings; so are Lists, Images, etc.

Tags

Elements are conceptual things (as for instance the “idea” of a chair existing in a Platonic realm of ideas is a concept). Elements come into “real” existence by way of tags (much as a real chair comes into real exists through wood and nails) Tags are the codes that mark off portions of text.

In the above example of markup language, the text “Subtitle One goes here” is a Heading 2 Element; the <H2> and </H2> markings are respectively the start tag and end tag. The tags “contain” the text that is to be formatted as Heading 2 by surrounding it. [1]

Here are some of the most common HTML elements and tags:

Folks that are used to WordPerfect’s Reveal Codes should find HTML tags quite easy to understand and use.

All of the above are container type elements: that is, they have both start and end tags that “contain” some text. Some elements are not container types, and consist of a single tag, such as:

Single tag type elements are sometimes called empty elements.

Some markup tags don’t bring new elements into being so much as modify sub parts of them. These include what might be called character formatting elements such as

As mentioned above, recent HTML has let more physical formatting creep into the language. HTML 3 allows you to specify font name, font size, font color, etc., in addition to such things as italicizing and bold. The following are some of the most popular physical markup tags:

Attributes

Attributes are ways to finesse the behavior of particular HTML elements. Some elements require attributes or they’re meaningless, such as Anchors and Images. Other elements take optional attributes. So, for instance, we can further specify that our Heading 2 (from the example above) be centered by including the align attribute:

  <H2 align=�center�>This Some Heading 2 Text</H2>

The attribute part of the above is

  align=�center�

Here are some other attribute examples:

If an attributes occurs in a container type element, it’s always placed in the start tag (note the H2 example above).

CSS Styles

Cascading Style Sheets (CSS) are a generalized system that accommodates styles within the existing framework of HTML. The discussion here should by no means taken to be a definitive discussion of CSS. Rather, this tutorial should serve to introduce the notion of CSS to computer users who are transitioning from Word into HTML.

CSS is in part a way to remedy the increasing creep of physical markup into HTML’s system of logical/structural markup. CSS separates physical formatting from logical markup. Instead of the browser having dictatorial control over formatting, with CSS the web page creator states specific details of how elements are to be formatting.

Using CSS, style information can be “linked to” or “tagged to” HTML elements. This isn’t the only way to apply styles in CSS but is a way that parallels the way Word styles are applied to paragraphs.

Recall our working definition of styles introduced in Tutorial 1:

CSS descriptions parallel Word style descriptions in many ways. Word users should have an easy time transferring their knowledge of styles into CSS. However, the particulars of CSS are different enough that they take some getting used to.

As with HTML, CSS is stored in plain (ASCII) text files. CSS descriptions can be included within an HTML file or can be in a separate file that is referenced from the HTML.

Instead of laying out the many possibilities that CSS provides, we’ll go directly to looking at an example:

Example 6A:

We’ll use an HTML version of the same text used in Exercise A of Tutorial 4, although the treatment of styles is somewhat different:

Figure A: Simple HTML used in Example 6A

<HTML>
<HEAD>
</HEAD>
<BODY>
   <P>Polonius: Do you know me, my lord?</P>

   <P>Hamlet: Excellent well, you are a fishmonger.</P>
   <P>Polonius: Not I, my lord.</P>
   <P>Hamlet: Then I would you were so honest a man.</P>
</BODY>

</HTML>

Following is this same HTML text with addition of some simple CSS definitions. (If you have a CSS-aware browser the added CSS codes appear in red; see Figure C):

Figure B: HTML with addition of CSS styles

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.Polonius {
  color: red;
  font-weight: bold;
  }
.Hamlet {
  color: green;
  font-style: italic;
  }
</STYLE>
</HEAD>
<BODY>
<P CLASS="Polonius">Polonius: Do you know me, my lord?</P>

<P CLASS="Hamlet">Hamlet: Excellent well, you are a fishmonger.</P>
<P CLASS="Polonius">Polonius: Not I, my lord.</P>
<P CLASS="Hamlet">Hamlet: Then I would you were so honest a man.</P>

</BODY>
</HTML>

Things to notice about our example:

• In the <HEAD> area you should notice an element that’s new to HTML 4, the <STYLE> tag and it’s close, </STYLE>. Between these two tags are a series of style definitions that directly parallel the styles we created in Word. In this example there are two CSS definitions creating styles “Polonius” and “Hamlet”.
• Within the HTML <BODY> note that the paragraphs (<P> elements) contain an attribute called “CLASS”. The CLASS attribute is new to HTML 4 and facilitates the tagging of a CSS style onto an HTML element.

CSS offers you a variety of ways to create style definitions and a variety of ways to apply them onto HTML. In this example, we use a method that parallels Word’s paragraph styles: creating classes and linking them to HTML using the CLASS attribute.

Classes

The text between tags <STYLE> and </STYLE> above, contains definitions for two CSS classes. The names of the two classes defined are Polonius and Hamlet. Let’s look closely at the definition of style Polonius:

.Polonius {
  color: red;
  font-weight: bold;
  }

The Class definition

Note the dot, or period character (“.”) in front of the word “Polonius”. The dot signifies that a class name is to be defined. Then the name for the class is given. Following the name are a series of formatting specifications enclosed between curly brackets (“{” and “}”). The specifications are separated from one another by semicolons (“;”) ( a character familiar to C and Java programmers as a statement separator).

In CSS, white space (extra blanks, tabs, carriage returns, etc) is ignored if it doesn’t serve as a delimiter. For instance, the definition for class Polonius could just as easily have been written:

.Polonius{color:red;font-weight:bold}

Tagging a class to HTML

Using the new attribute CLASS, we’ve tagged style Polonius to two different paragraphs in the document;

<P CLASS="Polonius">Polonius: Do you know me, my lord?</P>

  :
  :
<P CLASS="Polonius">Polonius: Not I, my lord.</P>

CSS tagging using the CLASS attribute creates the same sort of link as created in tagging styles to paragraphs in Word.

Key in (or copy) the whole of the HTML above that contains CSS definitions and view it in a CSS-aware browser. It should appear something like Figure C:

Figure C: HTML with CSS styles viewed in a CSS-aware browser

Compare the class definition of Polonius (repeated below) with the actual formatting shown in Figure C.

.Polonius {
  color: red;
  font-weight: bold;
  }
.Hamlet {
  color: green;
  font-style: italic;  }

With just a little reflection, you should see that the wording of class definition Polonius states in plain English what you’re seeing in the browser — red colored text, font-weight bold.

Similarly, the wording of class Hamlet directly describes what appears in the browser. In fact, learning how to use CSS styles involves mostly applying oneself to learning the various keywords (such as color and font-weight) and the permissible values you can specify for each.

Applying CSS styles directly to HTML elements

Another way to apply CSS styles is via the HTML elements themselves. Instead of tagging each instance of each element using the “style” attribute, we can define the look of a particular element. For instance, to state that all H2 elements are to appear as centered, 20pt Red, Italic, font Comic Sans MS you’d include the following statement in the STYLE area

<STYLE>
H2 {text-align: center;
    font-size: 20pt;
    font-style: italic;  
    color: red;
    font-family: Comic Sans MS;}

</STYLE>

This simply states that H2 elements should be formatted as per the statements within the curly braces.

Lets revisit the text from a previous example (used in Tutorial 1), now translated to HTML and formatted with CSS styles.

The HTML is shown below (#include “include-beforeIMG.txt”Figure D

). The appearance of the document in a CSS-aware browser is shown in Figure E.

Figure D: CSS that uses HTML elements as selectors

<HTML><HEAD>

<STYLE>
H1 {font-size: 22pt;
    font-weight: bold;  
    color: black;
    font-family: Arial;}
H2 {text-align: center;
    font-size: 20pt;
    font-style: italic;  
    color: red;
    font-family: Comic Sans MS;}
P  {font-family: serif;
    color: teal;
    font-size: 16pt;}
</STYLE></HEAD>
<BODY>
  <H1>This Is The Title To Our Document</H1>
  <P>Here is some blathery text: blather, blather, blather, blather, 
     blather, blather, blather.</p>

  <H2>Subtitle One goes here</H2>
  <P>Here is some more unimaginative text: blather, blather, blather, 
     blather, blather, blather, blather.</P>
  <H2>Subtitle Two goes here</H2>
  <P>Here is some more unimaginative text: blather, blather, blather, 
     blather, blather, blather, blather.</P>

</BODY></HTML>

Figure E: Above HTML as presented in a CSS-aware browser

Using this method (applying styles via the element type, H1, H2, P, etc) has been developed into a set of ready-made stylesheets referred to as the W3C Core Styles [2] .

Both methods shown above, tagging classes using attributes and directly defining the formatting of specific HTML elements, utilize what CSS call “selectors”. CSS support four Selector Schemes. All of these schemes can be used together, mixed and matched if you will, or can be used singly.

We’ve shown examples of the first two. For a complete and lucid explanation of Selectors, see Håkon and Lie (see sources).

CSS formatting

The following table gives you some idea of what some of the various CSS properties are and how their specification appears in detail.

font-size: 20pt;

font-size: 5%

font-family: Georgia;

font-family: Verdana, Arial, sans-serif;

font-weight: bold;

font-style: italic;

font-variant: small-caps;

color: green

text-align: right

margin-left: 2em

margin-right: 5%

margin-top: -10pt

margin-bottom: 15px

padding-left: 2in

padding-right: 5%

padding-top: -10cm

padding-bottom: 15mm

border-top:.5em  dotted  fuchsia

border-bottom: 2px  ridge #F5CA09

border-left:..5in  inset rgb(10%, 60%, 5%)

border-right: 2px  groove purple

This discussion by no means exhausts the many possibilities available via CSS. Nor does it pretend to convey the whole scope of CSS. You are referred to sources and urged to continue study on your own.

Exercises

Try keying in or copying the full text for the above examples. Place the text for each in a text file and save with the proper extension (“htm” or “html”). Open in a CSS browser. Use these files as starting points from which to create variations.

CSS formatted HTML in non CSS-aware browsers

The examples shown up to now have assumed that you’re viewing HTML in a CSS-aware browser. But what about the view from older, non CSS aware browsers? Will the added CSS codes cause a crash or do they somehow screw up the browser’s presentation of the material?

Most decently implemented browsers shouldn’t crash when reading source text that is either incorrect or incomprehensible. CSS is now part of Version 4 HTML. Older browsers (such as Netscape 3) don’t know about styles, so they simply ignore style information. [3].

Figure F shows how the HTML of #include “include-beforeIMG.txt”Figure D

D appears in a non-CSS aware browser. Notice that we still get some sort of formatting — <H1> and <H2> are clearly distinguished. The difference is that the browser decides how to format these elements.

Figure F: HTML presented in a non-CSS-aware browser

A major point regarding all this is that CSS is not a substitute for properly marking up logical structure using standard HTML. CSS in fact should encourage a return to a more logical use of HTML.

Another way to create CSS

Many folks have been dealing with the problem of creating HTML by translating it from other programs or generating it via WYSIWYG editors.

The W2CSS HTML translator creates HTML from a source Word document. The next tutorial introduces this program.

NOTES

[1] In fact, there’s an eerie similarity between HTML heading elements and Word’s Heading styles.

[2] The W3C Core Styles are found at http://www.w3.org/StyleSheets/Core/.

[3] The inclusion of comments around the styles area is a standard way to protect older browsers from mishandling styles.

[Return to Home] [Next Tutorial]

This page created directly from an original MS Word document using the W2CSS HTML Translator.