Cascading Style Sheets

Cascading Style Sheets, also popularly known as CSS, is the technology that will help you control the layout and presentation of your web site and web pages. With CSS, you can now control how your pages look like, control the fonts that will be used and even control where they appear on each page!

I have been using it now for quite some time and CSS certainly ranks right up there together with PHP and Adobe PhotoShop as the next coolest thing you can learn after building your first web page.

Sample CSS Code

Here's an example of CSS and what it usually looks like:

code:
<style type="text/css">
<!--
body {
  background-color: blue;
}
h1 {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  background-color: #FFFFFF;
}
-->
</style>

Sample CSS code - explanation

What the sample code above does is set the background colour of a web page to blue and make the Level 1 Heading i.e '<h1>A Heading</h1>', of that web page use:

  1. Font - Verdana OR Arial OR Helvetica OR sans-serif in the order of preference.
  2. Font size - 18px.
  3. Spacing between each letter - 2px wide.
  4. Background colour of the heading - #FFFFFF or white.

CSS and XHTML

HTML formatting elements and attributes such as <font>, <i>, <b> and align (attribute) are deprecated since XHTML 1.0. To control your web page formatting and presentation, you definitely need to use CSS in your web pages!

Seriously, what is CSS?

In case my explanation didn't help you figure out the difference between XHTML (or HTML) and CSS yet, let's assume for a moment that we had to somehow design a human face and we want to do it using both, XHTML and CSS.

First, we will 'design' the face to have a head, some hair, some skin, a pair of eyes, ears, a nose and the mouth - this is the job of XHTML (or HTML).

The job of CSS then is to make the head either larger or smaller, colour the eyes blue, enlarge the nose if we wanted to, darken the skin, make the ears pointy and colour the hair green even!

Seriously... :)

TOP

Do you find it easy to navigate through this site?

 Yes

 No

 Where am I?