• Home
• World Wide Web
• Introducing HTML
• Introducing CSS
• Dreamweaver Interface
• Top Tips
• Putting it all together!
• Design Principles
• Accessibility
• Useful Links
• Glossary

If you see this symbol in the text it is a Link to Glossary with more detailed information

• Activity 9
• Activity 10
• Activity 11
• Activity 12
• Activity 13

• Activity 14
• Activity 15
• Activity 16

Introducing Cascading Style Sheets - CSS

Introduction

Well as you can see coding a page like the one you made in the last section using simple tags, adding links and images was fairly straightforward, but it doesn't look very pretty does it? Most web pages we view on the Internet have some design and formatting, good or bad, instead of the default you see in your 'Notepad' page.

Web pages used to be made look more attractive or formatted by adding attributes into tags like:

	<p align="center">
	<font size="16pt" 
	face="Georgia,"Times New Roman", Times, serif" 
	color="#FF0000" ><i><b>
	Text Here!</b></i></font></p>

The code above will make centred red text in Georgia font which is bold and italic, like the text below.

Text Here!

What a lot of code for two words!

But the text has actually been styled with CCS or Cascading Style Sheets

	<p class="textstyle">Text Here!</p>

Now that is better.

This is the how most web sites are now constructed by separating content and style, which was one of Tim Berners-Lee original goals, HTML was designed primarily as a markup language for content rather than style. Although it doesn't seem a very important distinction, it is crucial to the continuing development of the www and the growth of alternative viewing devices such as mobile phones and PDA'S.

HTML code using attributes in the page does not comply to the latest W3C web standards and the tags have now been deprecated although they are still widely in use. Have a quick look at this web site which explains it more fully www.codehelp.co.uk

Advantages & Disadvantages of CSS

Advantages of CSS

• Separating content and style gives the designer much more control over their website and gives alternatives for a better viewing experience, including people with accessibility problems.
• Another good reason is to imagine you have designed a 100 page website and the boss decides he/she doesn't like the font in the website and then having to go into every page and changing the fonts! With an external style sheet you can change a website by altering one file, a lot easier and quicker!
• You can create a consistent design and style to your website.
• Other advantages are that because there is a separate style sheet, without all the attributes tacked on the pages have a smaller file size and so are much quicker to load in a Browser.

Disadvantages of CSS

• Browser support has been a bit patchy but with the release of later Browsers this is becoming less of a problem.

As you can see it gives the designer much more scope for the their websites, making them more usable and accessible to all.

Another change in web design is the use of styles for the layout of pages, for years many pages have been designed using tables and it was considered the only way to style complicated designs. Again this made for bigger file sizes, tables were introduced for tabular data not for design. Many pages are still constructed this way.

We will not be going into CSS Layout as again it would need a course on its own and they can get complicated while very frustrating to get them just right, as I know from experience. With this sort of level of CSS it is vital to test the websites in other Browsers, if you use IE6 it is quite forgiving and when you look at it in another browser it can be all over the place, again this is from experience! This website, THS Intranet, The Science College and some of the DASP websites have been constructed using CSS layout techniques.

CSS structure - A quick guide

How are styles used?

There are three ways in which styles are added to web pages:

1. Inline styles which are embedded into the page

		<p style="color:#FF0000">Inline style</p>

This paragraph tag will have red coloured text. Inline styles are not really encouraged in good web practices.

2. Document level styles in the head of the document.

	<head>

    	<meta http-equiv="Content-Type" content="text/html;
	 charset=iso-8859-1" />

    	<title>Document Level style</title>
         
			<style type="text/css">

    		<!--

    		p {

    			color: #CC0000;

    			}

    		-->
         </style>
			
  </head>

All the paragraph tags will have red text in them.

3. External style sheets, you can have more than one in a website.

	 p {

		color: #CC0000;

		}

This will be saved as a separate document as file_name.css and the link is put in the head of any web page where you require this style in a website. Using this link:

		<link href="file_name.css" rel="stylesheet"
		 type="text/css" />

All the paragraph tags in any page that has this CSS file attached to them will have red text in them. This is the preferred way of attaching styles as it separates style from content.

Questions & Answers on CSS

What is cascade in CSS?

As you can see styles can be specified in a number of ways inline, document level or external. This could cause conflict within a document using these different methods of using styles. So the cascade refers to the way the styles have precedence over one another. The style nearest the element to be styled takes precedence over any other styles.

1. Inline style
2. Document level style
3. External style sheet
4. Browser default

So in the list above the inline style will take precedence and cascade down to the browser default if there are no styles

What is the rule structure of CSS?

We will not be going too much into the hand coding of style sheets as they can be handled in Dreamweaver, but it is useful as with HTML to know what goes on behind your own pages by using Notepad editor! Also we will not be using inline or page styles only external style sheets although they can be useful if you want to have a particular style just on one page in your website.

What selectors are there?

Here are the selectors we will be using in our activities, there are others but we will not be looking at them in this Workshop. We will be doing an activity shortly where we will use these selectors.

tag selectors - Will apply a style to any HTML element that matches the selector. For example if you want all Heading 6 tags in your site to be red in colour, italic text, text size 80% and centered you would write a CSS rule as follows:

		h6{
			color:#FF0000;
			style: italic;
			font-size: 80%;
			text-align: center;
			}

Heading 6

class selectors can be used to select any HTML element that has a class attribute.

	.highlight {
		background: #FFFF66
		}

This word is highlighted

<p>This word is <span class="highlight">highlighted</span> </p>

This whole paragraph is highlighted

<p class="highlight">This whole paragraph is highlighted </p>

You have to add class selectors rather than them being automatically applied as above. To define a class you need to have a period at the beginning of the name as in .highlight it is best to name it something relevant to the style so it will be easy to find if you want to apply the style again.

id selectors are similar to class selectors but can only be applied to one element on a page. They are useful for CSS layout where you would only require for example on left column or one right column. To define an id you use the # hash symbol in front of the name.

pseudo-classes are used to apply special effects to some selectors such as hyperlinks. The link styles must be written in the following order to get the effect you require.

		a 	{
			color:#000099;
			}
	     
	        a:link 		{
	        color:#000099;
	        }

	        a:visited 	{
	        color:#3366CC;
	        }

	        a:hover 	{
	        color:#990000;
	        }

	        a:active 	{
	        color: #000099;
	        } 

What media types does CSS styles support ?

Media types allow you to specify how your documents look in different media. You looked at print media type in Activity 10.

• all - Used for all media type devices
• aural - Used for speech and sound synthesizers
• braille - Used for braille tactile feedback devices
• embossed - Used for paged braille printers
• handheld - Used for small or handheld devices
• print - Used for printers
• projection - Used for projected presentations, like slides
• screen - Used for computer
• tty screens - Used for media using a fixed-pitch character grid, like teletypes and terminals
• tv - Used for television-type device

Some of the media types are not well supported in Browsers, but will be in the future.

Making some simple changes to a style sheet.

Attaching an external Style sheet

Before we can make some changes to a style sheet we need to attach it to a page where we can view any changes we have made.

Working with a style sheet

Font styles

Of course you can change the font styles on paragraphs indeed any text and even single words if you wish but don't use too many different fonts. Why? Go to the Tops Tips page

Colours

Optional Activities

Link Styles & List styles

You can see by the left hand navigation of this page that you can do a lot with lists. You can just style the bullet on a list with an image or just change from disc to square bullet etc. But where they are very useful and can be styled in lots of different ways is with hyperlinks. The Science College website navigation is just made up of a list of links with styles applied. The Prince of Wales navigation is also a list and links. You can use CSS to make rollover navigation where we used to use Flash or Javascript. They are much more simple code and you can be confident that people can see them as you intended. They can be a simple or a complex as you wish to make them.

In the next Activity we will change the look of some link styles.

Links

Lists

    <ul>

    <li><a href="#">Information</a></li>

    <li><a href="#">Contact Us</a></li>

    <li><a href="#">News</a></li>

   <li><a href="#">Links</a></li>

   </ul>

    <ul class="arrow"> 

Background images

This is a quick introduction, and hopefully it has given you an insight of what goes on behind a webpage with a style sheet. If you would like some more information on CSS I have put some useful links on the links page on this site.

We will now take a look at the Dreamweaver interface before we put it all together and work on a small website project, adding and updating and doing those jobs that you will do on your own websites.

Next section the  Dreamweaver interface >>