Page 1 of 2 Welcome to the first in a series of CSS Absolute Beginners articles and tutorials. My aim throughout this series will be to introduce the complete CSS novice to the exciting world of CSS. This will be achieved by starting with the very basics of the language and building from there. The goal will be to bring you to a good level of ability and provide the underlying knowledge to make well informed decisions as you begin to write your own style sheets. The series will begin by ensuring you have a good knowledge of the syntax of the CSS language, you will look at the different ways you can lay out your CSS rules and why you might prefer to write your rules one way rather than another.
A CSS rule is a statement that generally exists within a Cascading Style Sheet (CSS file), all CSS rules consist of three main sections, these sections are known as the:
The selector area of your CSS rule is the only section that sits outside the curly braces.
The property sits inside the curly braces and the end of the property declaration is shown by the colon :
Immediately after the colon follows the value, the value always finishes with a semi-colon ;
The CSS syntax says that the semi-colon is optional after the final value in any given rule. I would ensure it is always in place, not least for the sake of consistency.
The syntax of CSS is a flexible one, allowances are made for preferred writing style, as we can see from Listings 1 & 2.
selector {
property: value;
}
Listing 1: multi-line
selector {property: value;}
Listing 2: single line
The difference in the two rules can be plainly seen. Listing 1 has the various sections of the rule set on multiple lines, while Listing 2 has these sections written on the same line. The thing to bear in mind is that both methods are legitimate and how you write your CSS rules is very much down to personal preference. So, are there any advantages to writing your rules one way or the other? The answer to this is going to depend on how you find the rules easiest to read. For my own preferences I much prefer the multi-line method of writing rules, as I find this style far easier to read. Consider your CSS rules can, and often will, contain many properties and values, and that such information written on a single (and perhaps a wrapping line) can be much harder to read. Readability is an important factor when writing your CSS rules, a readable CSS file is an organised CSS file and the easier the file is to read then the easier it is to maintain should you have need to revisit the file at some point in the future. There are other ways you can enhance your CSS file to compliment the readability of your rules and we will look at such methods further down the line.
You now understand that your CSS rules consist of three sections, but how do these sections relate to the elements we want to style? Let's take another look at the three sections using different terminology.
(selector) element to style {
(property) section of the element to style: (value) how to style the element;
}
Listing 3: The relationship between the rule sections and the element to be styled
I'll break Listing 3 down a little further into plain English.
The selector refers to the element within the page that this rule will affect, the property declares the section of that element which will be affected and the value determines how that section of the element will look. Let's look at a simple rule that will style a paragraph.
p {
color: #ff0000;
}
Listing 4: A simple rule
The selector area in Listing 4 declares the element to be styled, in this instance the p element. Such a rule will affect all paragraphs in any page that is linked to the CSS file. There are several ways that you can declare a "link" between your CSS styles and your XHTML page and we will look at these methods in a later article. The property area of our rule in Listing 4 declares color. When we declare color we are referring to the color of the text. The value of the color is given as a hexadecimal value consisting of six digits. Such values always begin with the # sign followed by a combination of numbers and letters. In Listing 4 the #ff0000 equates to red.
By creating your p rule you have been able to change the appearance of all paragraph content on all pages in your web site that have a "link" back to your CSS file. CSS is a powerful tool and can globally control your web site's appearance.
There are several different ways in which you can "link" your CSS file to your web pages and we will look at the various methods you can use in the next article.
Keywords
Beginners, CSS, syntax, type, selector, property, value, rule, CSS properties, CSS values
