Basic CSS Tutorial

Introduction to CSS

Cascading Style Sheets (CSS) are a very good way to style your content. The style sheet is in a separate file which makes updating the look and feel of your website much easier.

Example

To show an example of CSS, I need to show you two parts. The content definition (XHTML) and the cascading style sheet (CSS). The content defines what is going to display to the web page and the style sheet tells what that content is going to look like.

Content

Html:

<p>
I am XHTML<br />
I am shiny!!<br />
</p>

Cascading Style Sheet (CSS)

Css:

p {
color: #eee;
background-color: #333;
font-size: 80%;
font-weight: bold;
}

This CSS applies a style the paragraph tag. In the paragraph it will make the font color light grey (#eee), the background color dark grey (#333), the font size a little smaller and then bold the text. Colors need to be translated into HTML color values (that is the #000). There are many ways to do this, but a simple way is to visit this color picker site and it will give you the html value for the color you choose.

CSS Starter Kit by Marc Grabanski

This starter kit page is styled by CSS. Download the starter kit to view the CSS. Advanced users type 'style.css' as the URL when you are viewing the page.

View the CSS starter kit example pages

Download CSS Starter Kit