CSS From Scratch. 5:1 The Cascade « Cybertramp Web Design

CSS From Scratch. 5:1 The Cascade

The Cascade

In the previous lesson we learned how to link a CSS file to an HTML document and how to use the Star Selector or Wildcard to put a border around every element on the page. You should have a file named stlye.css saved in the same folder as index.html. If you do not, please consult the notes for Lesson Four.

CSS Syntax

CSS stands for Cascading Style Sheets. It is a different language to HTML, and is used to tell the browser how your page should be displayed. Remember that it is good practice to use only semantic HTML, which breaks your page into meaningful blocks (elements) such as paragraphs, headings, lists and links.

Although HTML has a number of attributes which can be used to eg change the colour or font of elements, it is best to use CSS for anything like this.

We use HTML for semantics and CSS for presentation.

This makes it much easier to alter the look of your website later, as the same CSS file can be used for every page on your website. For example, changing the colour of all of the text would mean just changing one colour in the CSS file. If you tried to do this with HTML, you would have to make changes in many places.

CSS uses a different syntax (grammar) to HTML. Here is an example which changes the colour of text in paragraphs:

p { color: red;}

The element p has been selected here. Any element on your page could be used (h1, li, div, a ….). This is known as the selector. The selector is followed by a pair of curly braces, inside which are written declarations. These declarations are similar to attribute-value pairs in HTML, but in CSS they are called properties and values. Here the property “color” determines the colour of text for all paragraphs (p). Its value is given as “red”.

Notice that the property is followed by a colon. In HTML we used an equals sign. The whole declaration is followed by a semi-colon.

You can list as many declarations as you like inside the curly braces. The semi-colon tells the browser where each declaration finishes.

It can make CSS easier to read if you put the declarations on separate lines.

h1 {
color: blue;
background-color: green;
border: 1px solid black;
}

Here the main heading (h1) has been given blue text, a green background, and a black border.

The Cascade

In your CSS file you can repeat this process for as many elements as you like.

The browser reads the CSS file in order from the top to the bottom. It then reads any CSS in the HTML file itself.

Rules which are “nearer” to the HTML to which they apply will over-ride earlier rules.
Rules which are more specific also over-ride less specific rules.

The browser uses a formula to work out any conflicts, but in general simply be aware that putting something at the end of a CSS file gives it more weight than putting the same rule at the beginning.

Many properties are also “inherited” by “children” of elements.

For example, the following CSS changes the text colour of all of the elements on the page to red because everything on the page is betweenand. However, the next declaration changes the colour of all text inside paragraphs to blue instead.

body {color: red;}
p {color: blue;}

This process is known as the Cascade, as this word brings to mind a waterfall with water flowing from the top to the bottom. As the water moves downwards, its flow can be changed by rocks. This image may help you to understand how the order of CSS declarations is important in working out the final appearance of your page.

Usually people put the largest and most general elements first in their CSS files. If a CSS declaration doesn’t seem to work, check that a rule lower down the page isn’t over-riding it!

You can also include CSS in your HTML file. This can be useful if you are having trouble getting a declaration to work, as the nearer to the HTML element the declaration is made the more weight it carries. You can do this is 2 ways. The first is to include a style declaration inside theandtags of the html like this:

<head>
<style type=”text/css”>
div {color: green;}
</style>
</head>

The second is to include CSS inside an HTML element, using the style attribute and giving the CSS declarations as its value like this:

Notice that the curly braces are not needed, but the colons and semi-colons are. This is known as an inline style. Inline styles will over-ride any previous styles.

Tags: attributes, cascading style sheets, css file, css syntax, curly braces, declarations, div, element, elements, grammar, headings, html document, paragraphs, semantics, semi colon, value pairs, wildcard

This entry was posted on Saturday, August 6th, 2011 at 8:31 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.