Develop cascading style sheets

Web Design → Develop cascading style sheets This page is part of the Web Design project.

From the official document:

"This unit defines the competency required to develop cascading style sheets (CSS) that are attached to a mark-up language document in order to externally define and control styles to enhance and achieve commonality between web documents."

That means you'll be able to add some style to your web pages without putting your style directly into your HTML document. Why is that important? Take a few minutes to browse some of the designs at the css Zen Garden.

	Activity: What's so special about the css Zen Garden?
	As you browse the different pages on the css Zen Garden, can you identify what is similar and what is different about each page? Try explaining to someone why is this important.

Imagine putting together a 100+ page website, then the boss comes down and says, "Actually, I think I'd like a blue background better." and walks off. If you've coded your styles the right way, then you'll only need to change one file to affect all 100+ web pages with the new blue background!

You can read more about this unit on the National Training Information Systems Official document for ICAB4171A.

This unit forms part of the following qualifications:

• Cert IV Websites Qualification in Australia

How this unit will help you

After learning and applying the skills required by this unit you'll be able to demonstrate your skills in:

• identifying the presentational aspects of your web page that can be controlled with CSS (e.g. fonts, colours, the position of blocks of text and images)
• removing any old HTML that has been used to control the presentation of the web page.
• writing the CSS to control the presentation of your web page
• including that CSS in your web page in a variety of ways (in-line, internal and external)
• editing your CSS to change the way it affects the HTML
• validating the CSS and checking that it works in a range of browsers

Ideas for learning the required skills

Work through the Tizag tutorial then look back through a web page you've created already (or pick up a page from the web), replacing HTML attributes with CSS wherever possible.

Taking on the CSS challenges to flex your CSS skills!

Have a look at Creating a CSS layout from scratch to see how CSS is used to position images and blocks of text on a page, then try it with a page of your own.

Build a Photographic Gallery Using CSS using pictures of your own or some creative commons images from flickr

Follow the tutorials at Web_Design/CSS.

Ideas for demonstrating this unit

Create some web pages that use CSS to define the look and feel of the pages, as well as the placement of page elements. Include this CSS in different ways (in-line, internal and external), and show how you can over-ride external CSS with internal and/or in-line CSS. Upload and validate your CSS using the W3C CSS Validation Service. Show your pages in a variety of browsers (perhaps browsercam, netrenderer or browsershots could help here)

Grading

If you are demonstrating this unit as part of a formal course, you might find that the unit is graded (meaning you can not only demonstrate your competence, but can also gain a credit or distinction). Your facilitator may already have set criteria that your college uses. If not, here are some ideas for possible credit/distinction activities that you can discuss with your facilitator:

• Complete layout with CSS positioning.
• use CSS with lists to create navigation 'buttons' on a page
• understand and discuss the difference between CSS level 1 and 2
• create both fixed-width and floating layout pages using CSS
• Demonstrate min-width/max-width in a design (and degrade gracefully in IE6)
• create css for print, mobile and screen media types
• discuss the difference between @include and <link for external CSS files
• investigate and experiment with CSS level 3
• use CSS for image manipulation (rounded corners, rollovers, popups, drop shadows)

Notes and discrepancies

• To my mind inheritance, classes, IDs and pseudo classes don't get enough emphasis in this module.
• what happened to CSS media types - don't people care about these any more?