According to the geeks at the World Wide Web Consortium (W3C) "CSS is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance."
In simple terms CSS is a way to divide the content from the presentation on web pages. The advantages of using CSS to determine the look and feel of your pages are numerous, the biggest advantage is in the maintenance of your site. By defining your CSS styles in an external file, you could change the layout, colors, fonts etc. of every single page on your website by just changing that one external file.
A number of ways to specify CSS styles exist, namely Inline styles, embedded style sheets and external style sheets. Inline styles refer to CSS styles which are specified at the tag level this however defeats the purpose of using CSS to enable easy updating. Embedded styles are style definitions which are specified in the <head></head> tags of your HTML/PHP/ASP pages, again using embedded styles is not quite ideal as updating an embedded style sheet will only reflect the one page.
The real power of CSS however comes from the use of external style sheets, external style sheets are standalone .css files which are simply referenced to by well, as many documents as you want, thus when you change the reference .css file you in turn change all the documents which link to that .css file. We will therefore be using external style sheets as a basis for this tutorial, the actual CSS for all 3 (inline, embedded and external) methods for defining styles is usually the same though.
Linking to an external style sheet
In order to use CSS styles in an external stylesheet you must first link to it or reference it from the <head> section of all pages which you want to use it. The code for this is very simple and is given below:
<HTML> |
The href ref tag will point to wherever your external stylesheet is, in this case it's in the same directory and called stylesheet.css. Now all styles defined in stylesheet.css can be used in the current document.
Overall CSS syntax
CSS styles are made up of declarations which in turn have three different parts called a selector, a property and a value. A selector is basically the name you give to a CSS style. Three types of selectors exist and are called HTML selectors, class selectors and ID selectors. A property is the actual thing you want to set such as border width, colour or font face and then the value is of course the value which you want to give a property, for example '2px', '#000000' or 'Trebuchet MS'. Examples of how to define the different selectors are given below:
| h2 {font-family: "sans serif"}
.headertable {font-family: "sans serif"} #endparagraph {font-family: "sans serif"} |
The first line is a h2 HTML tag selector which sets the font of all h2 elements in any webpages which the style sheet is embedded without having to edit the webpages themselves. Any HTML element can be styled using CSS in the same manner as the h2 tag element above.
The second line is a class selector called headertable and as can be seen has to be declared using the . character before its name to signify it as a class selector. It will set the font only for items which specifically reference it from within webpages. For example:
| <table class="headertable"><tr><td>..... |
This will set the font for all the data in the table above to 'sans serif', if any styles where referenced from within <tr> or <td> tags they would overwrite the overall headertable class.
The third and final line is an id selector, which works exactly the same way as a class selector except for the fact that id selectors are designed to be referenced only once from a webpage whereas class selectors can be referenced and used an unlimited amount of times. As can be seen from above the hash (#) character is used in front of an id selector name to signify it as an id selector in the CSS stylesheet. An example of how id selector styles can be referenced from a webpage is given below:
| <p id="endparagraph">..... |
Above you have seen some basic ways to define HTML tag, class and id selector styles, there are more complex ways to define these types of styles which can often make use of hierarchies and subclasses, however for this introductory article we will not be discussing these. A more detailed coverage of CSS selectors can be found on the World Wide Web Consortium's (W3C) CSS selectors page located at http://www.w3.org/TR/REC-CSS2/selector.html.
CSS properties and values
Now that you have a good idea of the overall structure of css styles, we will look briefly at some of the properties and values which you can define for these styles. As mentioned near the start of this tutorial CSS offers much more detailed attributes than plain HTML for defining the look and feel of different webpage elements. Given below is some of the more common properties as well as examples of their use.
| Property | Value(s) | Example |
| color | #RRGGBB | { color: #FFFFFF } |
| background-color | #RRGGBB | { background-color: #FFFFFF } |
| font-size | xx-small |
x-small |
small |
medium |
large x-large | xx-large | smaller | larger | length (px, ems, pts) | % |
{ font-size: 10px } |
| font-style | normal | italic | oblique | { font-style: oblique } |
| font-family | arial | verdana | sans serif etc. | { font-family: Trebuchet MS } |
| margin | margin-top | margin-right | margin-bottom | margin-left | { margin: 10px 20px 10px 20px } |
| border | border-width | border-style | border-color | { border: 5px solid #000000 } |
For a full listing of all available CSS properties please refer again to the World Wide Web Consortium's (W3C) website. The specific page is 'Appendix F. Property index' which is located at http://www.w3.org/TR/REC-CSS2/propidx.html.
Learn CSS easier with Editplus
Most people who start off using CSS will make use of some simple text editor such as Notepad, Textpad or Editplus. Editplus however has one particular advantage over other editors, in that it includes easily accessible CSS cliptext. The CSS cliptext is basically a listing of all the available CSS properties which a user can click on and have inserted into their CSS stylesheet at the location of the cursor. This should enable people learning CSS to become familiar with all the CSS properties quicker and easier than they otherwise could have done. Editplus is available from http://www.editplus.com/.
In conclusion
Well that's it. This tutorial has provided the introduction to CSS which it promised, but no more. While what we have covered above might have seemed easy enough to understand it is important to understand that there's so much more for you to learn before being ready to use it on any decent scale. CSS can become quite complex indeed as we ourselves discovered during the recent redesign of this site so prepare yourself for a lot of ups and downs while you attempt to master it. Useful websites which we often use when troubleshooting CSS include:
X| http://www.w3.org
X| http://www.w3schools.com/css/
X| http://forums.devshed.com/css-help-116/