CSS Style Sheet Basics

CSS Basics – Part 2

CSS Course

Foreword: In this part, I talk about the main features of what is called the style sheet.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 2 of my series, CSS Basics. In this part, I talk about the main features of what is called the 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, 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, and still have the same effects, then you would 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 this 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 has the attribute, type. The value of this attribute is “text/css”. This means you are dealing with a cascaded style sheet of 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 brackets. In the curly brackets, you have what we had for the style attribute value of the body element (in the previous part of the series). 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 brackets. In the curly brackets, 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. The name of the HTML element in a rule is called a selector, because it selects the HTML element to which the rule applies.

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 an Internal Style Sheet.

Note: internal style sheet does not only have to be in the HTML head element. It can be in the HTML body element as well.

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. Each property/value pair in a rule is called a declaration. There can be more than one declaration in a rule, separated by semicolons.

Note: there can also be more than one value for a property, but this time separated by spaces or commas.

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 HTML 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
From what you have seen in this part and in the previous part of the series, there are three sources of style: the external style sheet, the internal style sheet and the HTML style attribute.

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.
HTML Style Attribute
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 (in quotes without the curly brackets). You should have seen this in the first part of the series. Here, the style deals only with one CSS rule and not many rules as the above style sheets do. Use HTML style attribute 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 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 rules 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 rules from the external style sheet will be above those of the Internal Style Sheet.

Now, if there is one rule from an external style sheet and another from an internal style sheet that address the same html element, then the rule between the two, that is lower in the code, will be implemented. It is like this: the higher rule will first be implemented, then as the code is being read by the browser, the lower rule will be implemented (overriding the higher).
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, but the spelling must be correct. 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; before and/or after a comma.

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 rules. 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 brackets 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 rules are executed as the page is rendered in the browser.

Well, we can stop here for this part of the series. We continue in the next part.

Chrys

Broad Network

Related Articles

CSS Style Sheet Basics

CSS Basics – Part 2

CSS Course

Introduction

Related Links

Comments