Hide
Cascading Style Sheets (CSS) is a style sheet language. A style sheet is made of rules which tell your browser how to present your webpage. CSS can be used to define the colors, fonts, background images, layouts of a webpage. Let's take a look at what CSS can achieve:
CSS Zen Garden
Click on the different designs at the right of the page. Notice how the feel of the site changes – the text, the color, the graphics, and the layout. These changes can be brought about through the use of CSS.
It is recommended that you go through the HTML and XHTML tutorials of our site before embarking on CSS. CSS requires experience in HTML and XHTML, and is usually the last thing on a web designer's list.
Just one more thing before we get started, "Throw the tables out of your window!" Not literally of course. To know what we mean, continue reading this section.
TOP
Hide
First of all, you will need a CSS editor. Similar to html, any text editor would suffice. These include notepad, Microsoft Word etc. If you are using external style sheets: you need to save your style sheet with the file extension ".css".
You may also use Adobe Dreamweaver, which will enable to view the style changes you have made to your document easily.
Before you start to add styles, add this line to your HTML document after the meta tags:
<link rel="stylesheet" src="path" type="text/css" />
where path is the path to your CSS file on the directory.
Each style sheet is made up of a set of rules. As a web designer you define the rules. Each rule is made up of a selector, normally a html element, such as body, or paragraph. Numerous properties can be defined for the element. Style rules are presented in the form:
selector { property: value }
As mentioned above, numerous properties can be defined for an element. What if you want to change more than one property? Should that be the case, you simply add on to the original rule, separating the attributes by a semicolon.
selector { property1: value1; property2: value2; }
Read on. It is still quite abstract here.