3.1 Cascading Style Sheets

Motto Fashions fade, style is eternal. —Yves Saint Laurent

Purpose Cascading Style Sheets (CSS) –specify the presentation of elements e.g., font, position, … –separate from the document's structure Three types –Inline Styles –Embedded Style Sheets –External Style Sheets CSS validator jigsaw.w3.org/css-validator/

Inline Styles Inline style –declared using the style attribute within in the element’s start tag good only for this element The value of the style attribute: –semicolon-separated list of properties –form: property-name : property-value –e.g., –Inline Styles don't separate content and layout

Inline Styles: Example Inline Styles The text in this paragraph has the font-size 20pt. and is rendered in magenta color.

Embedded Style Sheets Define styles for an entire document Can associate a set of style properties –with a particular XHTML element e.g., with, with, with, with … will be applied to each such element –independent of any elements identified by (class) name can be applied to an arbitrary element

Embedded CSS: Form element –within –attribute type="text/css" the MIME type (encoding format) –inner text must follow syntax: list of rules a rule consist of a name and set of properties name is either an element name or a class name (see next) set of properties is enclosed in { and } a property is specified as in Inline Styles

Style Classes Class name –arbitrary letters and - no spaces In style definition –preceded by. –can be combined with an element form: element-name.class-name e.g., a.nodec {text-decoration: none} –applies only to

Embedded CSS: Sample em { font-weight: bold; color: purple } h1 { font-family: helvetica, sans-serif } p { font-size: 12pt; font-family: arial, sans-serif }.blue { color: #6666ff } Meaning: –every text within will be bold and black –every text within will be in Helvetica or sans-serif font –every text within will be in Arial or sans-serif font –every element with class="blue" will be in color #6666ff (light blue)

Embedded CSS: Example … Embedded CSS Let me emphasize this and color this. And do it also in this section. And in another section again.

Embedded CSS: Example 2 em { font-weight: bold; color: red } h1 { font-family: courier, monospaced } p { font-size: 10pt; font-family: garamond, serif }.blue { color: blue }

Precedence of Styles If there are several styles for one element, which one will be applied? precedence: 1.user 2.author (you) 3."user agent" (=browser) within document: –the more specific wins –the innermost wins

Font Properties font-family –comma–separated list (in order left-to-right) of font names, e.g., times-roman, helvetica, courier generic fonts: serif, sans-serif, monospace, cursive font-style – normal, italic, oblique font-weight –relative: normal, bold, bolder, lighter –absolute: 100, 200, 300, …, 900 font-size –relative: n %, xx-small, x-small, small, smaller, medium, larger, large, x-large, xx-large –absolute: n pt, n em, n ex, … (see next slide)

Unit Values Absolute – pt : points – px : pixels – in : inches – cm : centimeters – mm : milimeters – pc : picas Relative (to default font size) – % : percent – em : height of the letter M – ex : height of the letter x

Font Properties: Guidelines font-family –always end the list with a generic font serif, sans-serif, monospace, … font-weight, font-size –use relative rather than absolute values –accessibility!

Text Properties text-align – left, right, center, justify text-indent –length or percent (see previous slide) –indentation of the 1 st line text-decoration – underline, overline, blink, line-through color –see next slide

Color Values Predefined colors: – black, white, gray, red, green, blue, yellow, aqua, fuchsia, lime, maroon, navy, olive, purple, silver, teal Colors in hex –start with # –then 6 hex digits, 2 for each red, green, blue –e.g. #ff00ff : ff red, 00 green and ff blue = magenta

Lecture-specific questions What colors is # ? And what color is #ff0000 ? Can you write white in another way? Write an style rule that makes a link purple if the user's mouse is on top of the link.

Background Properties background-color –see previous slide background-image –URL –laid over background-color background-repeat – repeat, repeat-x, repeat-y, no-repeat –whether and in which dimension to repeat the image

Pseudoclasses Provide access to content not specifically declared in the document Form: –element-name : pseudoclass –no surrounding spaces! hover pseudoclass is used when the mouse is on top of an element –e.g., a:hover {color: purple}

External Style Sheets A separate document with only CSS rules Complete separation of contents and style Used to create websites with uniform look –several (all) pages can use the same styles –change in a single style-sheet file changes styles across the entire website

Link to an External Style Sheet element –within the element – rel="stylesheet" attribute relation to linked document – type="text/css" attribute MIME type – href attribute URL of the external style sheet

External Style Sheets: Form simply a list of CSS rules –see Embedded Style Sheets e.g., – em { font-weight: bold; color: purple } h1 { font-family: helvetica, sans-serif } p { font-size: 12pt; font-family: arial, sans-serif }.blue { color: #6666ff }

External Style Sheets: Example E.g., several pages, one style

Another External Style Sheet Same pages, only the single external CSS changed

Guidelines Always use external style sheet for a website! –consistent look-and-feel –faster development –faster browsing downloaded once, stored, applied to all pages Test your CSS in all common browsers –Firefox, I-Explorer, Opera, Safari, Google Chrome Run your CSS through W3C CSS Validator