Develop cascading style sheets
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.
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:
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.
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)
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?
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
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
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
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
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: Developing your online portfolio, 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