Articles & Contributions
Creating a web site using CSS part 1
Choices Choices Choices
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. The use of frames has been around for years and if the most popular search engines in use today fully supported frames, they surely would have done so by now.
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. The industry has been trying to reduce its support of tables in favour of..................
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 layout 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.
CSS, too good to be true?
One problem with CSS is cross browser compatibility. Microsoft as usual deciding not to follow industry standards with their browsers, but are getting better. Internet Explorer 7 for instance, is a huge improvement over IE6. There are still some issues, but workarounds are readily available. The fact is, the standards laid out by the industry are here to stay, and Microsoft seem to be coming to terms with accepting this fact. Mozilla Firefox is much more CSS friendly but also has a few quirks!
As mentioned, if you do run into a problem with compatibility, there are usually 'workarounds'. When using CSS it is important to know how different browsers display a page. Example; Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!. I ran into this problem, I couldn't understand why Firefox 'butted' my web page at the very top but IE didn't, setting margin to 0 cured this problem.
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="root-to-css /style.css" rel="style sheet"> into the head section of your web pages.Change root-to-css to the location of your file (more info Learning HTML)
Take a look at my heading above 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 yes or no, plus much more.
So the two rules above are classes created by me ( .title and .head1), we can also define how an 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)