CSS Tutorial - Learn CSS

Introduction to Cascading Style Sheets (CSS)

It is recommended that you have a good working knowledge of HTML before continuing with these CSS tutorial pages. Here is a HTML Tutorial if you need it. Note that the CSS tutorial is designed for the beginner, not the experienced web designer.

What is a Cascading Style Sheet

In the early days each website was designed around a table with the colours, fonts and layout being described by a complex mass of in-line HTML code. This resulted in slow-loading websites and minimal scope for great web design. Cascading Style Sheets, or CSS, overcame all of that. The layout, background, font styles, colours, link settings etcetera for this website, for example, are laid out on just one cascading style sheet. Another great benefit of CSS is that the web designer only needs to make a single entry on the CSS and it will affect all the web pages. In the old days befroe CSS such changes were laborious and time consuming.

Getting Started

It is recommended that you use a text editor such as Notepad2 to write your CSS. This great little program is free to download and it can colour-code your CSS as you type. A great tip for for writing CSS is to use all small letters throughout (no Capitals) and that you save your work with .css at the end of the file name.

CSS syntax

You will remember from the HTML tutorial that we used an in-line style, like this:

<html>

<body>

<h1>My First Web Page</h1>

<p style="color: blue; font-family: verdana, garamond, arial; font-size:1.1em">I am going to build my first website using HTML.</p>

</body>

</html>

You can imagine writing the in-line style code for every HTML paragraph is a right kerfuffle. Instead we can pop it in a Cascading Style Sheet, like this:

p {

color: blue;

font-family: verdana, garamond, arial;

font-size: 1.1em;

}

Now is the time to study the syntax, or how CSS is written. The Element comes first followed by an open curly bracket ({). The attribute comes next ending in a colon (:) and then the style which must end with a semi-colon (;) The Element is then completed by using a closed curly bracket (}) All syntax is written in small letter (no Capitals) and this includes the saved name of all CSS and HTML documents.

Keep it Simple

Just like writing HTML, it is advised that you quickly develop an organised approach. CSS documents can be quite long, so it is recommended that you use a consistent approach to writing the syntax. The vertical method, shown above is clean and easy to follow.

Make notes

It is useful to make notes within you CSS to keep track of your work. To make notes, use the following syntax:

/* Make notes between the stars */

Divided by a Common Language

Beware! If you normally write in UK English you must be careful because CSS is written in US English! For example colour is spelled color, centre is spelled center, grey spelled gray, and so on. You will soon get used to the nuances. You are afterall learning a new language!

>> Next - Get Started >>