1. CSS Digital Media: Communication and design 2007

2. Digital Media: Communication and DesignF2007 Comments Exercise on Photoshop Evaluation  Assignments  Book

3. Digital Media: Communication and DesignF2007 Goals of the lecture Learn the syntax of CSS How to include styles in our XHTML document How to select where we want the styles applied Basic typographic styles

4. Digital Media: Communication and DesignF2007 Index Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts

5. Digital Media: Communication and DesignF2007 Behavioural layer JavaScript Layers Presentational layer CSS Structural layer XHTML

6. Digital Media: Communication and DesignF2007 Why to use styles Control the presentation  Way the document is displayed/delivered  Many many many more possibilities Keep presentation separate from content  We can change the presentation by just editing one file  Improve accessibility

7. Digital Media: Communication and DesignF2007 A single style sheet can be used by many XHTML documents Style sheet XHTML- document <link rel="stylesheet" type="text/css" href="/graphics/system/default.css" media="all"> <link rel="stylesheet" type="text/css" href="/graphics/system/default.css" media="print">

8. Digital Media: Communication and DesignF2007 Index Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts

9. Digital Media: Communication and DesignF2007 Syntax Example h1 {color: #fff;} p { font-size: 12px; font-family: Verdana, sans-serif; }

10. Digital Media: Communication and DesignF2007 Syntax selector {property: value;} Declaration Selector: select the element Property: style we’re going to apply Value: what will be the property

11. Digital Media: Communication and DesignF2007 Syntax One line with multiple properties Multiline declaration p { font-size: 12px; font-family: Verdana, sans-serif; } p {font-size: 12px;font-family: Verdana, sans-serif;}

12. Digital Media: Communication and DesignF2007 Index Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts

13. Digital Media: Communication and DesignF2007 Adding styles 3 ways:  Inline: style added within element tag  Embedded: styles added in the head of the HTML document  External style sheet: separate document containing all styles

14. Digital Media: Communication and DesignF2007 Adding styles: inline Uses style attribute Deprecated in XHTML 1.1 This is a red header This is a red header with another font

15. Digital Media: Communication and DesignF2007 Adding styles: embedded … Uses style element in the head of the XHTML document h1 {color: red;} p {color: blue; font-size: 12px;} Stylesheets embedded

16. Digital Media: Communication and DesignF2007 Adding styles: external file(s) /* This is the beginning of the CSS file */ h1 {color: red;} p {color: blue; font-size: 12px;} /* This is the end of the file */ Commentsmystyles.css

17. Digital Media: Communication and DesignF2007 Media Screen: display in a computer monitor Print: printing or “show preview” Handheld: mobile phones, PDAs All

18. Digital Media: Communication and DesignF2007 Inheritance

19. Digital Media: Communication and DesignF2007 Cascade We can apply many styles Order of style applied:  5. Browser default  4. External style sheet  3. Imported external style sheet  2. Embedded style sheet  1. Inline style sheet

20. Digital Media: Communication and DesignF2007 Index Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts

21. Digital Media: Communication and DesignF2007 Box model Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan, leo vel gravida placerat, est nulla sollicitudin mi, ut dignissim eros urna sit amet sem. Phasellus posuere malesuada tortor This is a list of items This is another element

22. Digital Media: Communication and DesignF2007 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan, leo vel gravida placerat, est nulla sollicitudin mi, ut dignissim eros urna sit amet sem. Phasellus posuere malesuada tortor Box model II Heading This is a list of items This is another element body h1 p ul li em strong

23. Digital Media: Communication and DesignF2007 Box model III This is a paragraph that runs over two lines margin padding content border

24. Digital Media: Communication and DesignF2007 Specifying values Units:  Do NOT add a space: 14px, 0.3cm Color:  Name:  RGB value: {color: #00CCFF;} {color: #0CF;} {color: rgb(0,204,255);} {color: rgb(0%, 80%, 100%);} p {color: blue;}

25. Digital Media: Communication and DesignF2007 Index Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts

26. Digital Media: Communication and DesignF2007 Selectors Element selector Contextual selector Class and id selector Pseudoselector

27. Digital Media: Communication and DesignF2007 Selectors: element We specify the HTML element h1 {color: blue;} h1, h2, p {color: blue;}

28. Digital Media: Communication and DesignF2007 Selectors: contextual Specify the context where the style will be applied Descendant: Child: Adjacent: h1 em {color: blue;} h1 > em {color: blue;} h1 + p {padding-left: 10px;}

29. Digital Media: Communication and DesignF2007 Selectors: class Class: group elements that share a common characteristic p.first {color: blue;}.first {padding-top: 10px;} First heading This is the first paragraph in the article

30. Digital Media: Communication and DesignF2007 Selectors: id id: give an element a unique name … div#header {background-color: red;} #header {background-color: red;}

31. Digital Media: Communication and DesignF2007 Selectors: pseudoselectors Used to apply styles to “pseudoclasses” a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: none;}

32. Digital Media: Communication and DesignF2007 Index Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts

33. Digital Media: Communication and DesignF2007 Font properties Font issues: not all users have all fonts Size issues: OK for me is probably too small for my father

34. Digital Media: Communication and DesignF2007 Font family serif sans-serif monospace cursive fantasy h1 {font-family: Helvetica, Arial;} p {font-family: “Trebuchet MS”, sans- serif;}

35. Digital Media: Communication and DesignF2007 Font size Absolute size:  From xx-small to xx-large, default medium  Length units: cm, in Relative size:  larger and smaller  Percentage: they accumulate  Length units: em and px h1 {font-size: larger;} p {font-size: 80%;} #menu {font-size: 10px;}

36. Digital Media: Communication and DesignF2007 Font weight / style Font weight: Font style h1 {font-weight: bold;} p {font-weight: normal;} h1 {font-style: italic;} p {font-style: oblique;}

37. Digital Media: Communication and DesignF2007 Text decoration Remove the underline in links  Be careful a:link {text-decoration: none} a:visited {text-decoration: none}

38. Digital Media: Communication and DesignF2007 Text alignment Text indent:  Indent in the first line of text p {text-indent: 3em;} p {text-indent: 10%;}

39. Digital Media: Communication and DesignF2007 Text alignment p {text-align: justify;} p {text-align: right;}

40. Digital Media: Communication and DesignF2007 Questions?