Creating a web site using Cascading StyleSheets (CSS)part 1

 

Choosing the *best method for laying out your web site is an important aspect to focus on when we start to think about our layout.

Lets take a look at the 3 main choices we have:

Frames
Although frames and inline frames offer great flexibility when designing a site, they have never been popular with search engines. Search engines find navigation around a framed web site difficult. If search engines like Google cannot index your site then no one is going to find it. (see w3c 'frames')

Tables
Where would we be without tables? Tables are the most popular tool when it comes to designing a web site. Tables are used to position text, images, navigation menus. In fact, most sites have a table which encompasses their whole page, and tables within tables are used to position objects within that page. (see w3c 'tables')

Cascading Style Sheets (CSS)
The most favourable method in web site layout and design. Biggest advantage over tables and frames? All your layout, fonts, colours, etc are created on one CSS page, you add a link to this CSS page on all your web pages. If you ever wanted to change anything on your site (lets say change colour of text from red to blue), all you have to do is change the colour attribute on the css page. Your whole site will read the css page and change the colour instantly. If you don't have a css page, you would have to alter every page on your web site separately. No big deal if you only have small number of pages, but imagine having 50, 100, 150!

I have web sites that are only a few pages, but I always use a style sheet because you never know how big your site will grow, and if you are like me, I like to 'tinker' with the colours, fonts, etc, ever so often.

I would like to make it clear, I don't see anything wrong in using any of the design methods mentioned here, all have there place and all offer design techniques that may suit a certain project. A couple of years back I only used CSS and tried to eliminate all use of tables from my layouts. I still favour using pure CSS but see nothing wrong in incorporating tables within my designs as well. This page uses only CSS but other pages in this web site use tables. (see w3c css)

 

Lets have a look at a CSS text rule:

First of all create a new page, call it style.css

On your web pages you need to link to this style sheet. You do this by inserting:
<link href="style.css" rel="style sheet"> into the head section of your web pages.

Take a look at this text CSS, too good to be true? Here is the rule we type into the newly created style.css

.head1 {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#006666;
}

.head1 This is just a name I gave this rule. I could have called it anything. The full stop before head means it is a rule created by me and is NOT a specific html tag. Instead of a full stop I could have used a hash (#head), either or. The font size is 18 pixels, bold, Arial and has the colour light blue.
As for the colour, dependant on what html editor you use, choosing the colour is simple, Dreamweaver for instance gives you a colour chart and you simply click on your chosen colour. Dreamweaver also gives you a list of what options you can use, font size, font weight, font face, etc. Also worth noting, CSS rules must be written in US not English, hence the 'color instead of colour'
Also note the opening and closing curly brackets.

Calling the css rule above
Well lets take a look at my heading once again, but in code view:

<p class="head1">CSS, too good to be true?</p> Notice the class="rule" Using class= calls the rule .head1.

Lets look at this one : Cascading Style Sheets (CSS)

.title1 {
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#0000CC;
}

Calling the CSS rule on our web page would be <p class="title">Cascading Style Sheets (CSS) </p>

So far our style sheet look like this:

.title1 {
font-size:16px;
font-weight:bold;
color:#0000CC;
}
.head1 {
font-size:18px;
font-weight:bold;
color:#006666;
}

We could use our style sheet above as is. You can see the benefit of just using this simple style sheet, If we had a large web site and wanted to change our head1 to a different colour, all we would have to do is change is on the style.css and re upload that page. Of course we would include all our text styles not just these 2. If we were laying out our pages with CSS we would include those rules also. It is worth pointing out though that you could still create a web site using tables, and use the style sheet just for text.
CSS is also great for images. You will notice that using HTML for background images offers very few options, CSS allows you to position, repeat, plus much more.

So the two rules above are classes created by me ( .title and .head1), we can also define how a specific HTML tag will behave. <p> <body> <table>, etc.
Lets create a HTML paragraph rule:

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

Because this is a HTML tag, we don't need to use the <p class=....> as above, notice there is no full stop or hash before this rule, this is because it is an HTML tag. Now everytime you start a new paragraph on your web page, the font will be Arial and a size of 12 px.

The rule above is an example. In reality, if you wanted every paragraph to follow the rule above, you would be better creating this rule using the body tag. Your CSS should start with the body rule, lets copy the code above but change it to body

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

Now your web pages will follow this rule IF no other rule is set. So for text that doesn't have any formatting rules, will default to : Arial, 12 pixels, because we don't want to be creating rules for every bit of text, we use the body to set all plain text on our pages.

Reference

W3schools CSS Tutorials
W3C Validator

Written by jr (2007)