CSS media and alternative style sheets tutorial

Draft

Introduction

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 for print tutorial
• 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/media
• 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.

You can define alternate stylesheets to meet various user preferences. Often, designers define different stylesheets for different media types.

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)

Media types

The CSS 2.1 specification distinguishes the following media types

1. all - suitable for all devices.
2. braille - for braille tactile feedback devices.
3. embossed - for paged braille printers.
4. handheld - for handheld devices (typically small screen, limited bandwidth).
5. print - for paged material and for documents viewed on screen in print preview mode.
6. projection - for projected presentations, for example projectors.
7. screen - primarily for color computer screens.
8. speech - for speech synthesizers. Note: CSS2 had a similar media type called 'aural' # for this purpose.
9. tty - for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
10. tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Important notice: "Handheld" is happily ignored by most phone browsers (smart phones in particular) and you will have to resort to more complicated approaches.

Media Rules

There are additional rules that can be combined in media queries using the @media rule in alternate stylesheets or within the same stylesheet can be used and combined to target specific screen sizes and devices.

• color : manage colour
• height : window height
• width : window width
• device-height : height of device
• device-width : width of device
• orientation : orientation device (portrait or landscape)

The prefixes min- or max- can be added to most of these rules to set minimum or maximum values for width and heights Rules can be further combined with the following:

• only
• and
• not

Linking several style sheets

Firstly, you should remember that you can load several stylesheets in a row. E.g

 <link rel="stylesheet" type="text/css" href="default.css" />
 <link rel="stylesheet" type="text/css" href="articles.css" />

There exist three methods for defining alternative styles

• Use link and "alternative stylesheet" to load alternative style sheets
• Use the CSS @import rule to load alternative style sheets
• Use the @media rule within a single stylesheet

Alternative stylesheets with the link HTML element

(1) You may define alternative stylesheets, e.g. one that uses a bigger font for people with bad eyesight. Most browsers allow users to select from alternative stylesheets. E.g. in Firefox through the View->Page Style menu.

Now, these stylesheets have to be linked in a special way unless they are media specific. In the example below we define two stylesheets for the screen medium. The 2nd and 3rd are alternate stylesheets that the user can choose.

 <link rel="stylesheet" type="text/css" media="screen"
        title="Default style" href="default.css" />

 <link rel="alternate stylesheet" type="text/css" media="screen"
        title="Friendly fonts" href="friendly.css" />

 <link rel="alternate stylesheet" type="text/css" media="screen"
        title="bigtype" href="big.css" />

Additional stylesheet for print media:

 <link rel="stylesheet" href="for-print.css" type="text/css" media="print">

In addition, you should provide JavaScript code that will allow the user to switch style (a typical user may not know how to do this manually). A older very popular and free example is available from AlistAPart. A simpler, more elegant more sophisticated 2004 version also exists. The print stylesheet is automatically selected when you "preview print" or print a page.

Alternative stylesheets with the CSS @import rule

The @import at-rule allows to specify a media type, i.e. you may use this strategy to load various CSS variants from a single CSS file.

 @import url(print-style.css) print;

Also, you often will find the @import CSS at-rule as replacement of the HTML link tag. E.g. the two following expressions are identical:

(a) Import a style-sheet with @import

<style type="text/css">
 @import url(css-intro.css)
</style>

(b) Import the normal way

 <link rel="stylesheet" href="css-intro.css" type="text/css">

Alternative styles with the CSS @media rule

Media-specific alternatives also can be defined within a single style sheet using the @media at-rule.

/* for maximum screen width of 1280px */
@media screen and (max-width: 1280px) {
  body {
    padding: 3em;
  }

/* for all screens between 1024px and 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px) {
  body {
    padding: 2em;
  }
  
/* For a landscape view on a device that is using a landscape view */
@media screen and (device-width:480) and (orientation: landscape) {
  body {
    padding: 1em;
  }
}

Dealing with phone makers who think they have big phones

Since most phone browser makers will ignore the "handheld" style, you can use something like this:

<link rel="stylesheet" type="text/css" href="handheld-style.css"
   media="screen and (max-device-width: 480px)">

Step-by-step example

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")

Source file: dynamic.html CSS file: dynamic.css

Creating default style

Create your default layout with an attached style sheet or use the sample files provided above.

NOTE: Before modifying your styles, it is a good idea to place groups of elements you wish to appear together inside

tags and give them unique id attributes. This will allow you to target specific blocks of elements through CSS properties defined in your @media rules.

In the linked style sheet (dynamic.css) the @media rule is added at the start, for all screens with a width above 1024px. This includes most laptops and monitors. All our elements will be defined here and modified later in @media rules that will follow.

@media screen and (min-width: 1024px) {
/* monitors and laptops */
@media screen and (min-width: 1024px) {
/* defined styles */
}

NOTE: If only this @media rule is applied, when viewing your page through a browser, if you resize the window to less than 1024px, the applied styles will default to No Style (browser defaults).

Modifying styles for different screen sizes

Now we have created an @media rule for large screen sizes. Next we have created a rule for tablets with a horizontal orientation and changed the margins for the body tag as well as the top and bottom padding for the header (h1 tag) so that they do not take up too much space.

/* iPads (landscape) ----------- */
@media screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
body {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1em;
	color: #333333;
	margin-top: 0px;
	margin-right: 10%;
	margin-bottom: 5%;
	margin-left: 10 %;
		
	}
h1 {
	padding-top: 80px;
	pad

Testing

....

Style sheet switching

(to be written)

In the meantime, read Alternative Style: Working With Alternate Style Sheets

Links

Device screen sizes

• Device Screen Sizes for Media Queries using HTML5 and CSS3 with associated @media rules

Mobiles

• Smartphone Browser Landscape by Peter-Paul

Koch

Style switcher tutorials and code

• Alternative Style: Working With Alternate Style Sheets
• Style Sheet Switcher (v1.1) Author: Dynamic Drive

Google either "CSS Stylesheet Switcher" or "Alternate stylesheet switcher".