CSS media and alternative style sheets tutorial

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Learning goals

• Understand CSS float
• Be able to create simple layouts using floats

Prerequisite

• CSS text styling tutorial
• CSS color and background tutorial
• CSS box model tutorial

Concurrent

• CSS tutorial (summary)
• CSS float tutorial

Moving on

• CSS positioning tutorial
• CSS for XML tutorial
• DHTML
• CSS compatibility

Level and target population

• Beginners

Teaching materials (Examples)

• http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html
• This page (some CSS demos included)

Remarks

• This tutorial is intended for students in a field that is technology intensive (e.g. computer applications or educational technology). For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).
• There are some inline examples. However, they had to be created in a away that makes them fit into a wiki page. I.e. we use inline style (something we usually don't advocate) and we also had to add extra styling properties.

Introduction

CSS allows to to create

• Stylesheets for different media types (e.g. your screen, a printer or a hand-held device)
• Stylesheets for different people (e.g. allow people with poor eyesight to enjoy larger letter)