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.

An example of a fixed-layout design

| 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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

* 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?

* v
* t
* e

Introduction to web design

HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets, CSS3 Animations
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
JavaScript: An Introduction to Programming with JavaScript, JavaScript Challenges, Getting to know JavaScript events, Getting to know the Document Object Model with JavaScript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design, HTML, AJAX, CSS, JavaScript, PHP, XML, Information Architecture, Algorithms
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions, Generating resource identifier strings.
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Website Qualifications in Australia, Australian Qualifications, Web design qualifications
Professional development: Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web Design, About the web design learning project, New Structure, Sample Timetable
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template