CSS
Cascading Style Sheets is a way to add layout to XHTML pages. The cascading part comes from potentially having more than one style sheet for a single page - and if the same thing is defined more than once, there's a priority deciding which one the browser should choose. Here's an example of a small style sheet.
body { font-family: Arial, Helvetica, sans-serif; background-color: #808080 }This example concerns itself with two things, CSS often have: fonts and colors. I say, that within the body of my document the font Arial will be used (and if it's not on the computer, then Helvetica, and if...), and the background color should be 808080. Also note the use of parenthesis, colon and semicolon - it is conscious, that the last line don't have a semicolon at the end.
Typical things to define also include: font-weight, font-size and color (see examples below).
In the example above I define something for body. If I had defined something for p, it would go for all my paragraphs. But I can be more detailed. I can add an attribute to my p, either class or id. An example:
p.large { font-weight: bold; font-size: 24pt } p#overview { font-size: 10pt }I define a class of p's, called large. Because this is a class, I can have more p's with the same class. I also define a p, with the ID overview. Because it's an ID, I can only have one P with this ID.
CSS can be placed different places. It can e.g. be at the top of the document, in a style tag, after title, within head. It can also be in another document, referenced from a link tag, the same place as the style tag. Finally style can be inside the tag affected:
<p style="color: green">Bla bla</p>
Concept last updated: 06/05 2004.
Relations
|
Other sources
- Beginning XHTML; Frank Boumphrey, CG, DR, JR, SS, TW - bl.a. 3 Getting started - Cascading style sheets
- CSS Colors; W3Schools -
- CSS How To...; W3Schools (obl.) -
- CSS2 Reference; W3Schools (obl.) -
- Diverse opgaver - CSS
- Informationsteknologi B til HH; 1.udgave; Peter Zangenberg, JPJ, FDM (obl.) - 6.3 Farvemodeller
- The Web Wizard's Guide to Dreamweaver; James G. Lengel - Chapter 2, Working with text, Arranging and formatting text, Heads and subheads, Style sheets
- XHTML; Alf - 2.4 Layout på siderne + dele af senere kapitler (2.5.1, 2.5.2B.2)