Cascading Stylesheets (CSS)

CSS was introduced in December 1996 by the web standards body (WC3) to improve web accessibility and to make HTML code semantic (to convey meaning) rather than being simply presentational.

The objective was to separate presentational elements out of the html code itself.

One of the most dramatic ways to demonstrate the visual effect of this is to look at a site called CSS Zen Garden. It is sometimes hard to believe that the html code is exactly the same for each of these site demonstrated here. The difference in presentation relies solely on css.

Explore this site for a few minutes and make a link to your favourite version.

The CSS that you see there is very sophisticated and we have only touched on it in this class. We have used the css styles panel to alter the attributes of text, links, colour, etc. When we did that, we chose to store the css code in the head section of the html file we were working on.

This page you are working on now is a little different in that the css you will use is stored in an external file (called twoColFixLtHdr.css) that you will "attach" to the html file in a minute. It is much better to store css in a separate css file, then all you have to do to get a consistent look and feel across several (or all) pages of a website is simply link the css file to the html file. This saves a huge amount of work because you only have to do the formatting once, and if you want to change (for example) a colour, you only need to change the css file and the change will propogate throughout the site.

CSS for controlling layout

CSS in now commonly used for page layout. In the early days of the web, developers often used tables to get some underlying structure to a page. This is now discouraged, and tables are used for their main purpose - ie. to display tabular data.

This page should have a css file attached to it that produces the layout: a header, a footer, a sidebar, and a main content area. It also controls the text formatting.

Too attach the css file go to the CSS Styles panel.

Click on the little link icon at the bottom of the panel (if you mouse over it you will see it says "Attach Style Sheet"). From the dialog box that pops up use the Browse button to find the CSS file called twoColFixLtHdr.css. Select the file and click OK.

Save your work, then press F12 to view your page in a web browser.

Type what you observe has happened (you should see a dramatic difference in the way the page looks).

Floating text around images

When we looked at the use of images on the web a couple of weeks ago we did not attempt to position the images on the page in relation to the text. This can be done using the css "float" property. Insert the image called sunset.jpg that we used in Week 3 by placing your cursor into the middle of this paragraph of text then inserting the image. What do you observe about the positioning of the image in relation to the text? Write your answer here.

To improve the layout by moving the image to the left and having the text flow around it, we can use the css "fltlft" property. In the CSS Styles panel, make sure that the little plus sign next to the CSS file name is clicked, so all the available styles are showing. You should see "fltlft" down towards the bottom of the list. Click on the image of the sunset to select it then right-click on the fltlft property, then click Apply. Your image should look much better now. Do the same thing with the image of the dice from Week 3. Insert the image into this paragraph, but this time use the "fltrt" property.

Save your work, then press F12 to view your page in a web browser.

Learning to create and use CSS is very complex - we have looked at only a couple of simple examples of how to use it in the lab.

If you have time, experiment with changing the colour and font of the H1 and H2 tags (this will be good practice for the Lab Assignment next week).

As you did last week, type your username into this url (both here and in the Link box), save the page, and test it for yourself!

http://www.discovery.mala.bc.ca/web/username/mgmt230/week5.html

There is no need to send me the url, because if you have stored this file in the correct place (and haven't renamed it), then I can just check your url for myself.

Once you have done that (and know that it works), you have finished this lab.