Cascading Style Sheets (CSS)

Learning Objectives To develop an understanding of how CSS can enhance the design of a webpage To create and apply CSS styling to a webpage Consider audience and purpose when developing CSS styles

CSS A web design term, short for 'Cascading Style Sheet'. At set of rules used to define the way a web page is formatted. CSS rules are applied to elements on the page (text, images, hyperlinks) to change their properties such as colour, font type, font size or border colour for example.

Heading/Title Paragraph /Body Text Image Hyperlink

H1 P img a

Tells the web browser that this is a webpage The main body of an webpage where all of the content is placed. Welcome to RetroGames.com All paragraph text within the page. Classic Game Image Hyperlink

Dreamweaver Demonstration

CSS Challenge Create an ‘American’ CSS theme by combining several rules together for the different elements on the page. Copy css_example.html from Topics > ICT-RW to your own user area and open it with Dreamweaver CS4. (Start > All Programs > Adobe Design Premium CS4).

CSS Challenge 2 Copy the same file to your user area again but name it css_example2.html. The audience for this webpage is now children. Create a new set of CSS rules to reflect this.

Plenary Go to andhttp:// share 1 thing you have learned about CSS during this lesson by adding a sticky note to the wall. Be concise, you only have 160 characters! Don’t forget to add your name.