Getting Started with CSS2

Preamble
Cascaded Style Sheet abbreviated CSS is the next language you learn after HTML or XHTML. While HTML (XHTML) deals with the functionality of the web page, CSS deals with the presentation of the web page. Functionality means whether or not the web page operates. Presentation means the esthetic (beauty) of the page, size of HTML elements and positions of HTML elements.

To achieve this presentation, CSS has a very large set of properties and values in different categories. You apply a number of these properties and corresponding values to an HTML element to give the element a particular presentation. An HTML page has the BODY element that covers the whole page. The BODY element can have a number of properties and values to give the overall page a special presentation.

This is the first part of a series of tutorials on Cascaded Style Sheet 2. In the whole series, there are code samples that you can try.

Versions
There is CSS1 and there is CSS2 officially. CSS2 does all what CSS1 does and more.

Prerequisite
In programming, the most important prerequisite is mathematics. If you succeeded in your elementary school mathematics, then that is enough for you to learn CSS (CSS2). However, if you are learning CSS then I believe your aim is to become a web site designer. After learning HTML (XHTML) and CSS the next thing you have to learn is a web page script language, such as JavaScript. To master JavaScript you need middle school mathematics (British O' Level mathematics).

If you did not pass in your middle school mathematics, know that you can still do the course. You do not have to go back to school. There is a web site with URL, http://cool-mathematics.biz . It teaches middle school mathematics in a very convenient manner. You can complete the math course in as short as 3 months. While doing CSS2, you can start the math course. By the time you are finishing with the CSS2 course you might have finished the math course or finish a good part of it.

You do not need middle school mathematics in order to study CSS2, however, you need it in order to master JavaScript.

Introduction
In this part of the series, I will let you get a feel of CSS before we actually dive into its principles (in the rest of the series). In this part, you will have an overall understanding of CSS. As such, the rest of the chapter will be easy to understand.

You need basic knowledge in XHTML or HTML in order to understand this series. I have just finished publishing a course on XHTML Basics. If your knowledge of HTML or XHTML is low, then do that course first before you do this one. To arrive at the course, just type, "XHTML Basics by Chrys" in the search box of this page and click Search; you can use the Google Search Box of this page if there is one.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

HTML Style Attribute
Almost all HTML elements have the style attribute. The value of this style attribute is CSS code. Since CSS is now at CSS2 the value should be CSS2 code.

Foreground and Background Color
With the exception of HTML elements like the image element, each viewable HTML element has a foreground color and a background color. The paragraph element for example, has a foreground color and a background color. The foreground color for these viewable elements is the color of the text. So the foreground color for the Paragraph element is the color of the text in the paragraph. The background color for any element is the color of all the area of the element behind the text. So, if the foreground color of the paragraph element is red and the background color is blue, then the text in the paragraph will appear red and all the area behind the text will appear blue.

Value of the Style Attribute
Each HTML element has a default presentation (default size, default color, etc). The value of the style attribute is for you to change one or more of these default presentational features (characteristics). Let us look at an example. Consider the following code:

text, text, text, text, text, text, text, text, text

It is a paragraph element. It has a style attribute. The value of the style attribute is "background-color:blue;color:red". There are two parts to the value of the attribute. The first part is, background-color:blue and the second part is, color:red. In the attribute, these two parts are separated by a semi-colon.

Each part of the value of the style attribute defines a presentational feature (characteristic) of the element concerned. In the above example the element concerned is the Paragraph element. Each part of the attribute is made up of two parts. So, in this example there are two main parts in the value of the attribute and two parts in each of the main parts. In a main part, the first part (half) is the name of the presentational feature, while the second part (half) is the actual presentational feature.

In the above case, one presentational feature (characteristic) is background-color and its actual presentational feature (characteristic) is blue. The second presentational feature is color (foreground color) and its actual presentational feature is red. Now the characteristic (name of presentational feature) is called a Property of the style, and the actual characteristic is called the Value of the property. So, we talk about two values in an HTML tag: an attribute value as a whole and the value of a property in the style attribute. From now henceforth we shall be using the word, property, when we mean the name of the presentational feature and the phrase "property value" (or its variation or simply, value) when we mean the actual presentational feature.

A property and its value (property value) are called a property/value pair. Each property must be separated from its value by a colon. In the example above, background-color is a property and its value is blue; these two are separated by a colon. The value of the HTML style attribute is therefore made up of one or more property/value pairs. If there is more than one property/value pair then these pairs must be separated from one another, by a semi colon. After the last pair, you do not need a semicolon. If there is only one property/value pair as the style attribute, then you do not need a semicolon after the pair. The set of style/value pairs (including any semicolon) must be in quotes (double or single).

Note: you can have a space (typing spacebar key) before and/or after a colon. You can also have a space, before and/or after a semicolon.

The following code is a simple web page example. Copy the code into a text editor and save it as an HTML file (.htm or .html extension). Open (double click) the file in your browser. The explanation of the code is given below.

The Heading of Page

text, text, text, text, text, text, text, text, text

There is a BODY element with a background color, black. Inside the BODY element, you have the H1 element and a P (paragraph) element. The BODY element has a style attribute with background color, black. So the whole web page is black.

Now, the property name for background color is background-color. The property name for foreground color is simply, color. The H1 element has no background color. It has only the foreground color, which is yellow. So the background of the H1 element is the same background that the BODY element has, with color black. The Paragraph element has both a background color and a foreground color; blue and red respectively.

Transparency
Elements such as the H1 or P elements in the BODY element are considered to be in front of the BODY element at the browser. Any viewable element has a background. By default this background is transparent. That is why, the user can see through the H1 element above to see the background of the BODY element (black color).

Spellings in the Style Attribute
The spelling of the property or property value must be what is official. So you must have "background-color" and not "backgroundcolor" without the hyphen. You cannot have "background_color" either; that is you cannot replace the hyphen with an underscore. For the foreground color, you must spell color as "color" and not as the British "colour".

That is it for now. Take a break and continue in the next part of the series, and continue fast (assuming you have understood this part).

Chrys