1 / 40

CSS

CSS. Digital Media: Communication and design 2007. Comments. Exercise on Photoshop Evaluation Assignments Book. 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. Index.

david-espinoza
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Digital Media: Communication and design 2007

  2. Comments • Exercise on Photoshop • Evaluation • Assignments • Book

  3. 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. Index • Intro to CSS • Syntax • Adding styles to our document • Box model • Selectors • Fonts

  5. Layers Behavioural layer JavaScript Presentational layer CSS Structural layer XHTML

  6. 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. A single style sheet can be used by many XHTML documents Style sheet XHTML-document XHTML-document XHTML-document <!-- Stylesheets --> <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. Index • Intro to CSS • Syntax • Adding styles to our document • Box model • Selectors • Fonts

  9. Syntax • Example h1 {color: #fff;} p { font-size: 12px; font-family: Verdana, sans-serif; }

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

  11. 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. Index • Intro to CSS • Syntax • Adding styles to our document • Box model • Selectors • Fonts

  13. 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. Adding styles: inline • Uses style attribute • Deprecated in XHTML 1.1 <h1 style=“color: red”>This is a red header</h1> <h2 style=“color: red; font-family:’Courier New’,serif”>This is a red header with another font</h2>

  15. Adding styles: embedded • <style>…</style> • Uses style element in the head of the XHTML document <head> <style type=“text/css”> h1 {color: red;} p {color: blue; font-size: 12px;} </style> <title>Stylesheets embedded</title> </head>

  16. 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 */ mystyles.css Comments <head> <link rel=“stylesheet” href=“styles/mystyles.css” media=“screen” type=“text/css” /> </head> <head> <style> <!-- @import url(styles/mystyles.css); --> </style> </head>

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

  18. Inheritance

  19. 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. Index • Intro to CSS • Syntax • Adding styles to our document • Box model • Selectors • Fonts

  21. Box model <body> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Aliquam accumsan, leo vel gravida placerat, est nulla <strong>sollicitudin</strong> mi, ut dignissim eros urna sit amet sem. Phasellus posuere malesuada tortor</p> <ul> <li>This is a list of items</li> <li>This is another element</li> <li>This is another element</li> </ul> </body>

  22. Box model II em strong body h1 p ul li 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 • This is another element

  23. Box model III margin padding This is a paragraph that runs over two lines content border

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

  25. Index • Intro to CSS • Syntax • Adding styles to our document • Box model • Selectors • Fonts

  26. Selectors • Element selector • Contextual selector • Class and id selector • Pseudoselector

  27. Selectors: element • We specify the HTML element h1 {color: blue;} h1, h2, p {color: blue;}

  28. 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. Selectors: class • Class: group elements that share a common characteristic <h1 class=“first”>First heading</h1> <p class=“first”>This is the first paragraph in the article</p> p.first {color: blue;} .first {padding-top: 10px;}

  30. Selectors: id • id: give an element a unique name <div id=“header”>…</div> <div id=“menu”>…</div> div#header {background-color: red;} #header {background-color: red;}

  31. 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. Index • Intro to CSS • Syntax • Adding styles to our document • Box model • Selectors • Fonts

  33. Font properties • Font issues: not all users have all fonts • Size issues: OK for me is probably too small for my father

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

  35. Font size h1 {font-size: larger;} p {font-size: 80%;} #menu {font-size: 10px;} • 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

  36. Font weight / style • Font weight: • Font style h1 {font-weight: bold;} p {font-weight: normal;} h1 {font-style: italic;} p {font-style: oblique;}

  37. Text decoration • Remove the underline in links • Be careful a:link {text-decoration: none} a:visited {text-decoration: none}

  38. Text alignment • Text indent: • Indent in the first line of text p {text-indent: 3em;} p {text-indent: 10%;}

  39. Text alignment p {text-align: justify;} p {text-align: right;}

  40. Questions?

More Related