ARTDM 171, Week 5: CSS

695 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
695
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ARTDM 171, Week 5: CSS

  1. 1. ARTDM 171, Week 5: CSS Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  2. 2. Homework • Please email me a link • Example: o http://xyz.xtreemhost.com/week4/ 2
  3. 3. Letʼs take a quiz!
  4. 4. Tags (continued)
  5. 5. <a></a> - Anchor • Link to an external Web site: ‣ <a href="http://www.dvc.edu">DVC</a> • Link to a Web page on your own site: ‣ <a href="bread.html">My Page About Bread</a> ‣ <a href="about/history.html">History of Bread</a> • Hooks (invisible): ‣ <a name="croissants"></a> • Link to the hook: ‣ <a href="index.html#croissants">Croissants</a>
  6. 6. <img /> - Image • <img src="images/file.jpg" border="0" height="10" width="10" />  • Border, Width and Height are optional.
  7. 7. <ul>, <ol> — Lists Unordered Lists (Bulleted) <ul> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> </ul> Ordered Lists (Numbered) <ol> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> </ol>
  8. 8. &nbsp; — non breaking space
  9. 9. <table> – Table tags • <table></table> – Table. Encloses your table. You can set the width (Pixels or Percentage %), border, and cellpadding and cellspacing as attributes. • <tr></tr> – Row. Encloses a row in your table. • <td></td> – Cell. Encloses what's in each cell of the table. These also create your columns. Make sure you have the same number of cells in each row.
  10. 10. Table Example •<table width="540" border="0" cellpadding="0" cellspacing="0"> <tr> <td>column 1</td> <td>column 2</td> Let’s try this <td>column 3</td> example. </tr> <tr> <td>Eggs</td> <td>Milk</td> <td>Potatoes</td> </tr> </table>
  11. 11. Table Example <table> <tr> <td> Column 1 </td> <td> Column 2 </td> <td> Column 3 </td> </tr> <tr> <td> Eggs </td> <td> Milk </td> <td> Potatoes </td> </tr> </table>
  12. 12. Fonts • For fonts, colors, and sizes, use CSS.  • Placed between the <head></head> tags • <style type="text/css></style> - Style tags. Enclose your CSS code in these. • Page Elements ‣CSS uses page elements to specify fonts.  You can set a font on any page element, body, h1, p, a,...
  13. 13. What about the <font> tag? • <font> tag is dead! • No longer the standard in todayʼs World Wide Web • <font> tags embed presentation in the structure • With CSS, our goal will be to separate presentation from structure
  14. 14. Cascading Style Sheets (CSS)
  15. 15. Cascading Style Sheets • Code that you add to your Web pages • Separate presentation from structure
  16. 16. CSS Zen Garden http://www.csszengarden.com
  17. 17. Parts of a Style Sheet • Style Sheets are made up of CSS Rules selector [, selector2, ...]:pseudo-class { property: value; } /* comment */ • Each rule is made up of a Selector and a Declaration Block • Each declaration in the declaration block is made up of a Property and a Value
  18. 18. Page Properties... Dreamweaver fonts + CSS
  19. 19. Basic Stylesheet <style type="text/css"> <!-- body, td, th {     font-family: Arial, Helvetica, sans-serif;     font-size: 12px;     color: #996600; } h1 {     font-family: Georgia, Times New Roman, Times, serif;     font-size: 16px;     color: #003366; } --> </style>
  20. 20. CSS Selectors
  21. 21. Tags • h1 {     font-family: Georgia, Times New Roman, Times, serif;                font-size: 16px;     color: #003366; } • <h1>My Website About Eating Food</h1>
  22. 22. IDs – placed as attributes within tags • Must be unique • When used in the <div> tag, separates sections of the page: header, nav, content, footer • #footer { font-family: Georgia, Times New Roman, Times, serif;    font-size: 16px;     color: #003366; } • <div id="footer">(cc) 2009. Some rights reserved.</div>
  23. 23. class – attributes within tags • Can be used several times on a Web page... Be careful of overuse • .highlight {     background-color: #FFCC00; } •  <p class="highlight">Today I had coffee and did laundry.</p>
  24. 24. Pseudo-classes • Be aware of ordering when using pseudo for rollover states • a:link {     color: #FF0000; } • a:visited {     color: #00FF00; } • a:hover {     color: #0000FF; } • <a href="index.html">back to home</a>
  25. 25. Firebug for Firefox https://addons.mozilla.org/en- US/firefox/addon/1843
  26. 26. Using Selectors
  27. 27. Grouped Selectors body, td, th {      color: #000000; } h1, h2, h3 {      color: #FF0000; }
  28. 28. Selectors on specific elements • This will affect only paragraphs that have an attribute class="highlight" p.highlight {      background-color: #FFFFFF;  }
  29. 29. Descendents • This will affect linked images only a img {      border: 0;  } • This will affect links within paragraphs that have an attribute class=“hightlight” p.highlight a {      font-weight: bold;  } • This will affect links while hovering within a list in the navigation container #navigation ul li a:hover {     background-color: #FFFFFF;  }
  30. 30. Fonts
  31. 31. Font Sizes • Pixels (px) • Ems (em) • Percentage (%) • Points (pt) • Picas (pica) • Inches (in) • Centimeters (cm) • Milimeters (mm)
  32. 32. Absolute Font Size: px • Example: font-size: 12px; • Not proportional to the viewing area.  Always the same.
  33. 33. Relative Font Size: em or % • Example: font-size: 1.2em; font-size: 120%; • Proportional to the viewing area.
  34. 34. Relative Font Sizing Relative font sizing can be difficult to use. Hereʼs one strategy: •Browser default sizing for fonts is roughly 16pt.  62.5% resets the default size to roughly 10pt, which makes it easier to do the math •1em translates 10pt •1.2em translates to 12pt body {     font-size: 62.5%; } p{     font-size: 1.2em;  }
  35. 35. Relative Font Sizing • Nested elements affect each other • If an element has a font size of 80% and is nested within an element that also has a font size of 80%, then the result is a font size of 64% • That's 80% of 80% • This could be a lot smaller than you might have wanted.
  36. 36. Embedded, Linked, and Inline Stylesheets
  37. 37. Embedded • Embedded Style Sheet: are placed within the header, within a Web page <html> <head> <style type="text/css"> h1 {     font-family: Georgia, Times New Roman, serif; } </style> </head> <body> </body> </html>
  38. 38. Linked • Linked Style Sheet: All CSS rules are saved in a .css file <html> <head> <link rel="stylesheet" href="css/global.css" type="text/css" /> </head> <body>  </body> </html>
  39. 39. Inline • Inline Styles: declarations can be placed within a single tag as a style attribute <html> <head> </head> <body>  <p>What color is a cucumber?</p> <p style="color:#00FF00;font-weight:bold;">A cucumber is green.</p> </body> </html> 
  40. 40. Group Projects are due next week
  41. 41. Homework due Sept 22 • Read chapter “Graphics” in Web Style Guide • Complete Group Projects • Next week: formatting images for the Web
  42. 42. Thank You

×