CSS3 Style Sheet

CSS3 Basics - Part 2

Forward: In this part, we look at the main characteristics of what is called a style sheet.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 3 of my series, CSS3 Basics. In this part, we look at the main characteristics of what is called a style sheet. If you have not read the first part of the series, read it, as this is the continuation.

Rule Set
A Rule Set or simply Rule, or statement is what gives presentation to an HTML element. In the previous part of the series, we have the following start tags for three HTML elements:

<body style="background-color:black">
    <h1 style="color:yellow">
    <p style="background-color:blue;color:red;">

The three elements involved are the BODY element, the H1 element and the Paragraph element. Each of them has a style attribute. If you want to omit the style attributes for these elements, then you would have to type the following in the html head element of the web page.

<head>
    <style type="text/css">
        body {background-color:black}
        h1 {color:yellow}
        p {background-color:blue;color:red}
    </style>
</head>

In the above code you see the head element. In the head element you have what is called the html style element. The style element is an HTML element, not a CSS element. CSS does not really have elements. The start tag of the style element above has the attribute, type. The value of this attribute is “text/css”. This means you are dealing with a cascaded style sheet of a text nature. The word “text” comes first before “css” in the value. The style element has a start tag and an end tag. The style element cannot be seen at the browser, but it will be present. It can only hold presentational (css) code. What you have between the style start tag and the style end tag is called a style sheet.

Remember, for the situation here, we do not want any style attribute for the html body, h1 and p elements. So the presentational feature for the body element is now in the style sheet and it is:

        body {background-color:black}

You have the word, body, then a space and then a pair of curly braces. In the curly braces, you have what we had for the style attribute value of the body element. The next line in the style sheet is:

        h1 {color:yellow}

This is for the h1 element. You have the word, h1, then a space and then a pair of curly braces. In the curly braces, you have what we had for the style attribute value of the h1 element. The next line after the h1 element in the style sheet is:

        p {background-color:blue;color:red}

This is for the p element. You have the word, p, then a space and then a pair of curly braces. In the curly braces, you have what we had for the style attribute value of the paragraph element.

There are three lines in the style sheet. There can be many lines in the style sheet. Each of such lines is called a rule set or simply, rule or statement.

Internal Style Sheet
So the web page code we saw in part 1 can now be re-written as:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        body {background-color:black}
        h1 {color:yellow}
        p {background-color:blue;color:red}
    </style>
</head>
<body>
    <h1>The Heading of Page</h1>
    <p>
        text, text, text, text, text, text, text, text, text
    </p>
</body>
</html>

The property/value pairs are no longer the values of the elements’ style attributes. Each property/value pair is now in a rule of the style sheet in the HEAD element. A style sheet in the HEAD element as in this case is called an Internal Style Sheet.

Selectors and Declaration block
Each of the above rules begins with the name of an HTML element. After that you have a block delimited by curly braces. For each rule the HTML element is called a Selector and the block is called a Declaration Block.

External Style Sheet
You can decide to put the style sheet content in a file in some web server. The above style sheet content is:

        body {background-color:black}
        h1 {color:yellow}
        p {background-color:blue;color:red}

You can put this in a file using a text editor (without the start and end style tags). When you save and name the file, its extension has to be .css. Assume that you saved the above file with the name mystyle.css in the same directory as the corresponding HTML file, then you would have the following LINK element in the HEAD element of the HTML file:

    <link rel="stylesheet" type="text/css" href="mystyle.css" />

This is an html link element; a single tag element. Here, there are 3 attributes: the rel, type and the href attribute. The value of the rel attribute here gives the nature of the file in general terms. The value of the type attribute gives the nature of the file in more specific terms. The value of the href attribute gives the URL of the file; here the name of the style sheet file and the corresponding HTML file are in the same directory in one server, so no domain name and path precedes the file name. So the above corresponding HTML file becomes:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
    <h1>The Heading of Page</h1>
    <p>
        text, text, text, text, text, text, text, text, text
    </p>
</body>
</html>

Note: The HTML LINK element is not seen at the browser, but it is there. Try the above two related code samples, after saving both files in the same directory. Remember to give the HTML file, the extension, .htm or .html and the CSS file the extension, .css (and name, mystyle.css).

Three Sources of Style Sheet
From what we have seen, there are three sources of style sheet. The External Style Sheet, the Internal Style Sheet and the Inline Style Sheet.
External Style Sheet
The External Style Sheet is one where the style sheet is in a separate file and the html link element has to download and integrate it with the html file. Use the external style sheet when the style sheet is applicable to all or many pages of your website. In this way, you do not type the same thing in many pages.
Internal Style Sheet
Internal style sheet is the one coded as content to the html style element of the head element of the web page. Use Internal Style Sheet when the style sheet is applicable to just one page.
Inline Style Sheet
This is the case where the presentation is applicable only to one html element in a page. Here the value of the style attribute of the element has the declaration block of a rule. We saw this in the first part of the series. Here, the style sheet deals only with one CSS rule and not many rules as the above style sheets do. Use Inline Style Sheet when you want to affect the presentation of only one element.

Effect of having the three Sources
You might have one or two or all the three sources of style sheets that address the same html element. The question is, “the property that will affect the element will come from which source?” The style attribute of the html element will always take priority. That is, the value of the style attribute will be displayed and the declaration from the other sources will be ignored.

Now, when the html link element downloads the external style sheet, it fits the style sheet in the position in which it is in the html document. So if your link element is below the Internal Style Sheet in the code, the statements from the external style sheet will be below those of the Internal Style Sheet. If your link element is above the Internal Style Sheet in the code, the statements from the external style sheet will be above those of the Internal Style Sheet.

Now, if there is one statement from an external style sheet and another from an internal style sheet that address the same html element, then the statement of the two that is lower in the code will be implemented. It is like this: the higher statement will first be implemented, then as the code is being read by the browser, the lower statement will be implemented.

Case Sensitivity
CSS coding is case insensitive. This means that in the above code, H1 and h1 mean the same thing. Also, color or COLOR or Color mean the same thing. So in CSS it does not matter whether you code in lower or upper case.

Space
You can have space (typing the spacebar key) between the selector and the declaration block. Inside the declaration block, you can have space before and/or after a property name; before and/or after a property value; before and/or after a colon; before and/or after a semicolon.

Comments
You can use comments to explain your code. You will never be able to remember why you type many things in your code. You can use comments that will help you remember why you typed what you typed at a later date. A CSS comment begins with /* and ends with */, such as in,

            /* This is a comment */

For the above style sheet you can inset comments as follows:

        /* First line about what the style sheet is doing
            Second line about what the style sheet is doing.*/
        body {background-color:black}
        h1 {color:yellow}
        /* Something on the following paragraph element.*/
        p {background-color:blue;color:red}

Making Code more Readable
To make your code more readable, add blank lines in the code between groups of statements. You can also write one property/value pair per line in a rule as the following example shows:

        p {
                background-color:blue;
                color:red;
                width:50%
         }

There are actually three property/value pairs in this declaration block. The property/value pairs are separated by semicolons. You do not need a semicolon after the last property/value pair. I prefer to type a rule set as follows:

    p
        {
            background-color:blue;
            color:red;
            width:50%
        }

The name of the html element is on one line, then the curly braces are below. The property/value pairs are in between, each in a line.

Interpreted Language
Cascaded Style Sheet (CSS) is an interpreted language, not a compiled one. This means that the statements are executed as the page is rendered in the browser.

Let us stop here and continue in the next part of the series.

Chrys

Broad Network

CSS3 Style Sheet

CSS3 Basics - Part 2

Introduction

Related Links

Comments