Introduction to Cascading Style Sheet

The previous article covers the HTML language which is used to define the structure and content of a webpage. This article introduces another important technology in writing webpages, the Cascading Style Sheet (CSS). CSS is used to specify the presentation i.e. the look-and-feel of a webpage. It allows web developers to separate content and presentation logically and facilitates better web design.

Let’s start with an example CSS statement:

/* This is an example CSS statement */
p {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    color: blue;
}

The above statement states that the “p” HTML tag i.e. the paragraph tag would use the font Arial, 12 pixels in size, bold and italic and displays in blue. Then in the HTML file, it can refer to the CSS statement and apply the presentation styles to all “p” tags in the HTML file.

The HTML file can refer to CSS statements by 3 methods:

1. Inline: one can specify style in the “style” attribute in a HTML tag e.g. <p style=”font-family: Arial; font-size: 12px;”>Paragraph Text</p>

2. Embedded: one can embed CSS statements in style tag in a HTML file e.g. within the HTML file, the following lines are embedded to specify styles for the “p” tag:

<style type=”text/css”>
p {
    font-family: Arial;
    font-size: 12px;
}
</style>

3. External file: one can use a “link” tag in the HTML file to refer to an external CSS file which contains CSS statements for the HTML file e.g. below link tag refers to the “styles.css” file in the same folder of the HTML file.

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

The “p” tag in the above example is called a “selector” in the CSS statement. A selector in a CSS statement can be:

1. HTML tag: this applies specified styles to all identical HTML tags

2. ID: this applies specified styles to the HTML tag carrying the ID e.g.

<p id=”blue”>Paragraph Text”</p>

#blue {
    color: blue;
}

Above statements would make the text in the paragraph blue. The “#” sign indicates that the CSS selector is an ID.

3. Class: this applies specified styles to all HTML tags carrying the class e.g.

<p class=”blue”>Paragraph Text”</p>

.blue {
    color: blue;
}

Above statements would make the text in the paragraph blue. The “.” sign indicates that the CSS selector is a class.

The difference between an ID and a class is that a HTML with a certain ID is only in the HTML file once only while many HTML tags can carry the same class within the same HTML file.

The style specification within in the curly brackets { … } are called the properties. There are many properties in the CSS language. They provide a easy way to specify positioning, size, font styles, text styles, colours and other display styles.

The mainstream CSS version at the time of writing is CSS2. CSS3 is under active development at the moment and will provide more powerful means to apply styles. It is also possible to use browser-specific CSS extensions in style specifications e.g. Mozilla extensions for Firefox and Webkit for Google Chrome and Safari. These CSS extensions allow more styles to be specified e.g. gradient colour, round corners for the mentioned browsers.

In conclusion, to learn how to write a webpage, it is important to learn both HTML and CSS and understand the principle of separating content and presentation. It is recommended to learn XHTML and HTML 5 for future development. For CSS, it is key to master CSS2 first. Whether one decides to use the browser extensions is up to individual judgment.

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>