March 4, 2008

1. Week 7: Introduction to CSS March 4, 2008 Margaret Kipp margaret.kipp@gmail.com http://myweb.liu.edu/~mkipp/

2. Cascading Style Sheets (CSS)‏ • Style sheets are the officially sanctioned way to add style to your document • CSS or Cascading Style Sheets is the default style sheet language • We will cover CSS 2.1 • The official specification is here: http://www.w3.org/TR/CSS21/

3. Style Sheets • A style sheet is a sequence of style rules • In the sheet, one rule follows the other • Rules cannot be nested like XHTML tags • The way rules are written in a style sheet is much simpler than the way elements are written in XHTML • CSS defines the appearance of the page while XHTML defines the structure

4. Style Sheets • a text file (or block of text) that contains a list of rules • these rules define how certain elements of a web page will be displayed • each rule consists of properties and values • properties control formatting (e.g. colour, font size, positioning of elements)‏

5. Cascading Styles • a style cascade occurs when there are two or more rules that can apply to a selector • determined by three things: inheritance, specificity and location • inheritance is specified in the appendix, some rules are inherited some are not • otherwise, the more specific rule is applied or the last rule

6. In Element Styles • You can add a style= attribute to any element that accepts the core attributes <element style="style"> .. <element> where style is a stylesheet. There is no selector. • Example: <h1 style="color: red">Red Text</h1> • In element styles only affect that specific element.

7. Internal Style Sheets • add a <style> tag to your document and type styles into the tag • <style type="text/css"> • img {border: 3px dotted blue;} • p {color: red;} • </style>

8. Internal Style Sheets 2 • <style> takes the core attributes • It requires the type= attribute. Set it to "text/css" • It takes the media= attribute for the intended media. This attribute allows you to set different styles for different media

9. External Style Sheets • add a <link> tag to your document, then store styles in a separate file • <link rel="stylesheet" type="text/css" href="mysheet.css" /> • type= and href= are required attributes • this form of style sheet can be used with multiple pages

10. Adding a Simple Style Sheet • Add the following link tag to your page: <link rel="stylesheet" type="text/css" href="main.css" /> • Then create a file main.css with a simple test rule such as: p{color: red} • Make sure you use a tag that you are actually using on your page • Try it out!

11. Alternate Stylesheets • You can give a page several style sheets and let the user choose • <link rel="stylesheet" title="default" type="text/css" href="main.css" /> <link rel="alternate stylesheet” title="nostalgic" type="text/css" href="nostalgic.css" /> • The sheet with no "alternate" will be shown by default. Others have to be selected. title= is required

12. Style Rules • each style rule has two main parts: the selector and the declaration • selectors determine which XHTML elements are affected by the rule • declarations specify what properties are being affected and what the value for the property will be (each declaration has a property value pair)‏ • e.g. {color: red}

13. Style Rules 2 • Example: • h1{color: red;} • all heading 1 elements will be red • img{border: 3px dotted blue;} • all images will be surrounded by a 3 pixel dotted blue border • p{color: red; background: yellow;} • paragraph with red text and yellow background

14. Style Rules 3 • All style rules are composed of selectors and declarations • Declarations consist of one or more property-value pairs separated by semicolons inside curly brackets Missing or duplicate semicolons may cause the browser to skip the rule

15. Style Syntax • All names and values are case-insensitive, but lower case is preferable • the semicolon is not required on only one element • Example: • h1 {color: blue;} • h1 {color: blue; background: yellow;}

16. Style Syntax - Multiple Properties • selector { property1: value1; property2: value2 ; } • You can have as many property-value pairs as you like • Each set of property values pairs must be separated by a semicolon

17. Comments • add comments to a style sheet by typing your comment inside a pair of these: /* */ • e.g. /* this rule makes all the heading 1 text red */

18. CSS Properties • Appendix B contains a list of many important CSS properties • Each property is described and possible values are listed • Common properties: border, font-size, color, background, height, width

19. Property Values • possible values for specific properties are listed in Appendix B • all properties can take the inherit value which allows them to inherit styles from a parent element • many properties take predefined values from a list • other properties take lengths in pixels or as a percentags

20. Property Value Examples • in pixels • height: 500px • font-size: 24px • by percentage • font-size: 10% • height: 50% • from a list • border: blue • font-style: italic

21. Validating CSS • http://jigsaw.w3.org/css-validator/ • Check your style sheet there (style sheet must be a separate filed with the extension .css or it must be on the web)‏ • Note that checking the style sheet will not be part of the assessment of the web site

22. Selectors • Selectors select elements. They don’t select any other XML nodes • The most elementary selector is the name of an HTML element, e.g. h1 {text-align: center;} will center all <h1> element contents • Two other common selector types are: • id selectors • class selectors

23. id= Selectors • standard way to add style to a single element is to use id= attribute • #id { property: value; …} will give all the properties and values to the element with the identifier id= attribute set to id. • Example: #validator {display: none; } • Remember that in HTML you can identify an element by giving it an id= • <element id="id"> ... </element>

24. class= Selectors • standard way to add style to a group of elements • .class { property1: value1; property2: value2 …} will assign all the properties and values to any element in class class • Remember that in HTML you can assign a class to an element by saying <element class="class"> ... </element>

25. Types of Property Values • Numeric or Percentages • Measures • Keywords • Colour values (keyword or numeric)‏

26. Property Values: Numeric • Numbers like 1.2, -3 etc are often valid values. • Percentages are numbers followed by the % sign. • This means the value will be a percentage of something else. That other value may be • some property value for another element • same property of an ancestor element • the value used in a formatting context

27. Property Values: Measures • Relative values • em: the {font-size} of the relevant font • ex: the {x-height} of the relevant font, often 1/2 em • px: pixels, relative to the viewing device • Absolute values • in: inches — 1 inch is 2.54 centimetres • cm: centimetres (1 cm is 10 mm)‏ • mm: millimetres • pt: points — 1 point is 1/72th of an inch • pc: picas — 1 pica is 12 points

28. Property Values: Keywords • URLs are written as url(URL)‏ • Keywords are just written as words, multiple keywords need to be separated by commas. • 'inherit' is a special keyword that says apply the property to the current element in the same way it has been applied to the parent element

29. Property Values: Colours • Colours follow the RGB model • They are expressed as a number sign followed by three hex numbers from 00 to FF • Example: p {background-color: #FF283C} • See the colour table at the back of the book, Appendix E for colour charts or http://www.webmonkey.com/reference/color_codes/

30. Property Values: Colour Names • The following are standard colour names defined by most browsers: • Black = #000000 Green = #00FF00 • Silver = #C0C0C0 Lime = #008000 • Gray = #808080 Olive = #808000 • White = #FFFFFF Yellow = #FFFF00 • Maroon = #800000 Navy = #000080 • Red = #FF0000 Blue = #0000FF • Purple = #800080 Teal = #008080 • Fuchsia = #FF00FF Aqua = #00FFFF • Other names are not standard, but may work.

31. Property Inheritance • One of the general principles of CSS properties is inheritance. • Some properties are automatically inherited. • This means that the property value is automatically transmitted from a parent element to a child element. • Appendix B lists which properties inherit.

32. Important CSS Properties • This week we will look at CSS properties for styling text and other basic elements of the page. Next week we will look at CSS properties for styling the entire page and laying out sections of the page. • Properties: • colours and backgrounds • lists • text • fonts

33. {color: } and {background-color: } • {color: } sets the foreground colour of an element. It takes color values or inherit • {background-color: } sets the colour of the background. Takes the same values as {color: } • Remember that you need to change both in most cases in order to make your text comfortably readable • body {color: #6666FF; background-color: #FFFFCC;}

34. {background-image: } • {background-image: url(URL) } causes the picture found at URL to be displayed as the background to your page • It is important to note that many people find background images make reading text very difficult unless the image is very light

35. {background-repeat: } • {background-repeat: } can take the values • 'repeat' (default)‏ • 'repeat-x' • 'repeat-y' • 'no-repeat' • This affects how the background image is displayed. The default is to repeat. This way you can use a small image (tile) to cover a large space.

36. {background-position: } • {background-position: } locates the background image on the page • It can take values '0% 0%' to '100% 100%' • Use 'length length' to put length of offset from top left • Mixing both is allowed • You can also use 'left', 'right', 'center' and 'top', 'center', 'bottom'

37. Text Properties • These can be used on text • {letter-spacing: } sets additional spacing between letters, takes a length value or the word 'normal' • {word-spacing: } does the same as letter-spacing inside a word. • These set additional spacing to separate the letters or words.

38. Text Properties 2 • {line-height: } sets the distance between several lines of an element's contents, • in pt or pixel numbers • % age (referring to a percentage of current font size)‏ • with a number (referring to a multiple of the size of the text)‏ • 'normal' • This allows text items to be spaced out, overriding HTMLs default behaviour to remove excess white space.

39. Text Properties 3 • {text-align: } can be 'left' 'right' 'center' and 'justify' • {text-decoration: } takes 'underline', 'overline', 'line-through' and 'blink' • {text-indent: }, {margin-left: } take length units • {vertical-align: } takes 'baseline', 'middle', 'sub', 'super', 'text-top', 'text-bottom', 'top', 'bottom', and percentages • {text-transform: } takes 'uppercase', 'lowercase', 'capitalize' and 'none'

40. Font Properties 1 • {font-family:} accepts a comma-separated list of font names • Font families include a font name and a font style • Font types: 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace' • {font-family: "Deja Vu", serif} • {font-family: "Arial", sans-serif}

41. Font Properties 2 • {font-size: } accepts sizes in the form npt, n%, +npt, -npt where n is a number, or from this list: • 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'larger', 'smaller' • incremental font sizes may not be handled properly by the browser • {font-style: } takes 'italic', 'oblique' or 'normal'

42. Font Properties 3 • {font-variant: } takes 'normal' or 'small caps' • {font-weight: } takes • a number between 100 for the thinnest and 900 for the boldest. 400 is normal. • 'normal', 'bold', 'bolder', 'lighter'

43. Font Properties 4 • Other font properties are listed in the Appendix. Many are very technical and based on print printing conventions • The {font: } property can be used to combine many of the font properties into one CSS element.

44. List Properties • List properties allow you to style lists • {list-style-position: } can take the value 'inside' or 'outside'. The latter is the default, the property refers to the position of the list item start marker • {list-style-image: } defines the list item marker as a graphic, use url(URL) to give the location of the graphic. Note that this has to be a graphic

45. 'lower-roman' 'upper-roman' 'lower-alpha' 'upper-latin' 'upper-alpha' 'lower-latin' 'lower-greek' 'armenian' 'georgian' List Properties 2 • {list-style-property: } values: • 'none' • 'disk' • 'circle' • 'square' • 'decimal' • 'decimal-leading-zero'

46. Default HTML 4 Style Sheet • The default style sheet for HTML 4 • http://www.w3.org/TR/CSS21/sample.html

47. Extract from Default Style Sheet • h5 { font-size: .83em; margin: 1.5em 0 } • h6 { font-size: .75em; margin: 1.67em 0 } • h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } • blockquote { margin-left: 40px; margin-right: 40px } • i, cite, em, var, address { font-style: italic } • pre, tt, code, kbd, samp { font-family: monospace } • pre { white-space: pre }

48. Examples • Course website: redone by hand in XHTML with basic CSS • includes lists, tables and other tags and some basic CSS styles • Note that this is not an example of good design • http://myweb.liu.edu/~mkipp/650/index-xhtml.html • http://myweb.liu.edu/~mkipp/650/main.css