Unit10: CSS


Courses Introduction Criteria Assignments Notes Links


ITQ Presentations

ITQ Art & Images

FD Unit4

ND Unit3

ND Unit10

ND Unit15

ND Unit21

ND Unit24


Students will have opportunities to demonstrate their practical skills and application and understanding of theory in order to meet the criteria of this unit through completion of a range of assignments. The sections below indicate the nature of the 5 assignments, which criteria they can be used to meet and a brief guide to what you'll be doing.

1 Describe the three main ways to implement CSS P1P3 M1M2

The first assignment asks you to look at the three main ways to incorporate CSS in a web page and describe the way each is done with some illustrations. There is also an opportunity to get a higher grade by developing this assignment, possibly at a later stage, and adding a comparison of methods, your views as to why one may be preferable to another and to discuss the problems that come with trying to make pages look the same in different browsers.

A client provides you with some page content and asks that you remove font formatting, background colour and link colours and effects from this, replacing these with CSS coding. Demonstrate three different methods of achieving this and show a preview of the new pages.

Print sections of the code for each page to illustrate the different methods of incorporating CSS code.

Describe the advantages and disadvantages of each method and explain how you might most effectively apply similar revisions to a site comprising many similar pages.


2 Describe the CSS 'Box Model' and how selectors work P2

[Word version]

CSS code uses a range of terms for positioning elements. Describe, using an illustration of the 'Box Model', the difference between margins, padding, borders and illustrate the effect of applying different values to each to make this clear.

List some of the main selectors used in CSS code and illustrate how they can be used in designing page content effectively.


3 Design a web site featuring CSS and interactive script features P4 M3 D1 D2 D3

This is the main assignment for the unit where you'll be given a brief and have to design, create and test a web site which utilises CSS. This task will also provide an opportunity to provide evidence for some merit and distinction grades if you can apply different stylesheets and change the site effectively, develop some other scripting and provide commentary on its effectiveness.

A client requires a web site comprising four main pages. The first is a high impact home page featuring a message detailing information specific to the user (eg a welcome line that refers to his or her local time, browser or location). The others contain a user poll or gather opinion in a similar way on a topic, an image gallery displaying thumbnails of 6 pictures linked to larger versions and a page featuring an RSS feed supplying content from an external source.

The site should have a consistent design theme (varied only for the front page) with common links, font style, headings and link formats given effect by a stylesheet.

On completion of the site, make a critical review of the pages and indicate which features are particularly effective and which you would consider replacing with an alternative method or code source for display.


4 Change layout, develop interactivity and evaluate methods D1-3

Your client has asked that you incorporate a alternative high contrast version of pages for those users who prefer such settings. Include this as either a different stylesheet or other method if preferred, provided that access to the alternative view is via a simple link on each page.

Test your site against W3C standards. Perform the HTML and CSS tests and note the results. Make adjustments as necessary to make the site compliant.

Review the completed site and evaluate the methods you have utilised to create it, noting any changes you would make if you had an opportunity to do it again.

Web design test



Page updated 8 March, 2010 Content and design © Andrew Hill