Table of Contents

1. Style sheets
   1. Record listing
   2. Edit style definitions
   3. CSS selectors

Style sheets

As you might know, one of the basic principles of a content management system is separating content and design. Up to now, you have only learned how to create content. Now it is time to think about the design of your website which should be done using CSS if you want to create an accessible website. For this purpose, there is a style sheet module in the back end which helps you to manage different style sheets for different media. Open the example website and choose to edit style sheet basic.

Record listing

This module shows another way of listing records. Up to now, there were only simple lists where you could choose a record directly. More complex applications like the CSS generator require you to create a style sheet (parent element) first and add different style definitions (child elements) later. If you choose to edit a certain style sheet, you will get an overview like shown below from which you can either edit the style sheet itself (parent element) or its style definitions (child elements).

Edit style definitions

Now scroll down on the current page until you reach the style definition h1. Click the edit button to open the edit form. As you can see, the form is divided into different groups which you can open or close. The style definition uses groups margin, padding, alignment and font. If you want to use special CSS commands, you can enter them as individual code at the bottom of the form.

TYPOlight uses AJAX to open/close groups. Therefore, JavaScript should be enabled. Otherwise, you will have to save your changes to have the additional fields appear on the page. Click the "Save" button or use the hotkey [ALT] + S to do this. It is recommended to turn on JavaScript in your browser.

CSS selectors

A selector defines which HTML element or element group a style definition is assigned to. There are three ways to address a HTML element:

• via the element type (e.g. input)
• via the class attribute (e.g. .invisble)
• via the ID attribute (e.g. #header)

Additionally, selectors allow you to include or exclude certain browsers. Thus, you can e.g. create a style definition that is interpreted by Internet Explorer but ignored by Firefox and Netscape. You can even create definitions that will be interpreted by Internet Explorer 7 only and will be ignored by all other versions. Here is a short overview of three popular browser switches:

Selector	Applies to
*html	Internet Explorer up to version 6
*:first-child+html	Internet Explorer 7 only
html>body	Gecko based browsers and Internet Explorer 7

For example, if you want to style the header of your layout and need to assign different height values for each browser (Firefox, IE6 and IE7), you can accomplish it with a CSS browser switch. As you already know, the corresponding container has a class attribute called #header to reference it.

#header { height:72px; }                     /* all browsers */
* hml #header { height:80px; }               /* IE 5 and IE 6 */
*:first-child+html #header { height:74px }   /* IE 7 */