A Tutorial Series CSS for Beginners: Cascading Style Sheets - An Introduction

This is a good place to begin your understanding of styling information contained in web pages. Because we assume that you are beginning working with HTML, implementing styling of pages is a skill you will soon need to develop to create eye catching web pages. Being new to HTML as well you might want to follow my tutorials on that and work in tandem with these tutorials. The anchor for that series is "A Web Tutorial Series: Creating Your Own Presence on the World Wide Web - Introducing HTML 5".

CSS is the acronym for Cascading Style Sheets, a product added on with the introduction of HTML 4.0 to solve the problem related to styling which of web pages. The problem can be simply stated that in the early days of the world wide web, the "solution" was to style web pages through the use of elements and attributes added to the HTML coded, HTML formatting.

In the simple examples presented in this tutorial it should become apparent in that other than for insignificant changes to the "look" of a web page, which HTML formatting can provide, the inclusion of styling elements in an HTML is not the answer. Formatting in HTML can become:

• cumbersome and repetitious, and
• distracting from the objective of providing "best content". The true objective of HTML, providing the "best" content.

The next screen shows the result (distilled into one HTML file) of a hypothetical situation in which a group of developers were assigned the task of developing a web site. The intention of the Web architect was that the web design would have the same look and feel throughout the web site. Headings would be the cast in the same size, font and color. The developers were told that all heading one (h1) tags would be green.

Each of the developers had their own concept of green and came up with the resulting three colors. Also, if you look at the code, they each found a different way of implementing that style element: one just styled to the color green, another used a rgb (red,green, blue) designation, while the third used a hexadecimal coding for the color. There would have to be rework there! Look also at the second bookmark, the content is dwarfed by the need to eliminate the underline.

Also, and this is a simple example, look at how much of the "screen real estate" was dedicated to setting the color. Now, if font information was also needed to be specified, more space would be taken up by the coding of style. The "meat" of the web implementation, the content, seems to get lost. If instead the developers concentrated on the page structure and content rather than styling, they could just concentrate on the fact that their page would start with an heading tag. Styling decisions would not take their focus away from the content. Styling could be centralized and handled by an expert in typography. Any changes to these styling elements could take place later across the whole development project almost effortlessly.

This is the real purpose of CSS. It goes hand and hand with HTML to enhance the look of the content. From here on out you should begin to think:

HTML = content

CSS = styling

The syntax of CSS is relatively simple. It begins with:

• a selector - which is generally the name of the element we with to style
• s declaration (or group of declarations) enclosed within curly brackets which state:
• a property which is the style attribute which you wish to modify
• the value of the property
• a delimiter of a semi-colon for each declaration (property-value pair)

In our example of the <h1> tag. The equivalent CSS code would be:

h1 { color: green;}

Tip: Even if there is only one declaration terminating it with a ; is a good coding practice.

Comments in CSS are delineated by the pair: /* and */.

Example:

/* We used #e3e3e3 which is a nice grey color */

Our original example above, it was indicated that needing to specify styling in each occurrence of the <h1> tags which occurred within a web page or site was not desirable. This formed the rationale for having CSS centralize the formatting of the element by creating a CSS statement such as:

#h1 { color:green;}

was probably what the web designer would want. However, suppose the intention was to apply styling for that tag and alternative styling for the other <h1> tags in the site.

CSS provides for two mechanisms to accomplish this: the id and class selectors.

The id selector is used when there is a requirement to style one unique element within the document or site. The relationship between the element and the CSS specification is performed as follows:

when creating the CSS styling definition prepend a # (pound sign) to a identifying name and complete the definition. The id name where the id name is the value of the HTML id attribute.

For example to apply the color style "blue" to a paragraph one might do the following:

#blueparagraph { color:blue;}

and the paragraph would appear as follows:

<p id="blueparagraph">

............text of the paragraph..........

</p>

Remember, you want to use this for a single, unique element.

Suppose you wanted to alternate colors of paragraphs on a web page you would use the class selector. An example might be alternating red and blue paragraphs. Using the class selector could accomplish this.

The class selector is specified by a . (period) followed by a class name which is then associated with the HTML elements by specifying the HTML class attribute. The paragraph example would be as follows:

The CSS declarations might be:

.blueparagraph {color: blue;}

.redparagraph {color: red;}

While the paragraphs would be coded as follows:

<p class="blueparagraph">

........paragraph text..........

</p>

<p class="redparagraph">

.......paragraph text..........

</p>

<p class="blueparagraph">

........paragraph text ......

</p>

etc.

In this tutorial we explained the rationale for CSS. When features for styling were added to HTML 3.2 for styling (color, font, etc.) the content of the document was dwarfed by the styling.

We have covered most of the syntax for using the HTML attributes for id and class. There are several other considerations for their use which we will cover at the beginning of the next tutorial.

The next tutourial when then embark on looking at other aspect of formatting with CSS: specifically we will look at fonts and text formatting as well as the formatting of links.

We will also be moving our CSS definitions to their own file and demonstrate how that is done.