Artdm171 Week5 Css

732 views

Published on

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

  • Be the first to like this

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

No notes for slide



































  • Artdm171 Week5 Css

    1. 1. ARTDM 171, Week 5: CSS Basics Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
    2. 2. Please turn in homework • Last weekʼs homework was to create a Web page • Put files in a folder with your lastname and first initial • Example:      smith-h chapter7.html
    3. 3. Letʼs take a quiz!
    4. 4. Cascading Style Sheets (CSS)
    5. 5. Cascading Style Sheets • Code that you add to your Web pages • Separate presentation from structure
    6. 6. CSS Zen Garden http://www.csszengarden.com
    7. 7. 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
    8. 8. Page Properties... Dreamweaver fonts + CSS
    9. 9. 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>
    10. 10. CSS Selectors
    11. 11. Tags • h1 {     font-family: Georgia, Times, serif;     font-size: 16px;     color: #003366; } • <h1>My Website About Eating Food</h1>
    12. 12. ID – 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, serif;    font-size: 16px;     color: #003366; } • <div id="footer">(c) 2009, BigShot Productions. All rights reserved.</div>
    13. 13. 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>
    14. 14. Pseudo-classes a:link {     color: #FF0000; } a:visited {     color: #00FF00; } a:hover {     color: #0000FF; } <a href="index.html">back to home</a> • Be aware of ordering when using pseudo for rollover states
    15. 15. Firebug for Firefox https://addons.mozilla.org/en- US/firefox/addon/1843
    16. 16. Using Selectors
    17. 17. Grouped Selectors body, td, th {      color: #000000; } h1, h2, h3 {      color: #FF0000; }
    18. 18. Specific tags with id or class attributes • This will affect only paragraphs that have an attribute class="highlight" p.highlight {      background-color: #fff;  } a.selected { font-weight: bold; }
    19. 19. Descendents a img {      border: 0;  } • This will affect linked images only
    20. 20. Descendents p.highlight a {      font-weight: bold;  } • This will affect links within paragraphs that have an attribute class=“hightlight”
    21. 21. Descendents #navigation ul li a:hover {     background-color: #fff;  } • This will affect links while hovering within a list in the navigation container
    22. 22. Fonts
    23. 23. Font Sizes • Pixels (px) • Ems (em) • Percentage (%) • Points (pt) • Picas (pica) • Inches (in) • Centimeters (cm) • Milimeters (mm)
    24. 24. Absolute Font Size: px • Example: font-size: 12px; • Not proportional to the viewing area.  Always the same.
    25. 25. Relative Font Size: em or % • Example: font-size: 1.2em; font-size: 120%; • Proportional to the viewing area.
    26. 26. Relative Font Sizing • Relative font sizing can be difficult to use. 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;  }
    27. 27. 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.
    28. 28. Embedded, Linked, and Inline Stylesheets
    29. 29. Embedded <html> <head> <style type="text/css"> h1 {     font-family: Georgia, Times, serif; } </style> </head> <body> </body> </html> • Embedded Style Sheet: are placed within the header, within a Web page
    30. 30. Linked <html> <head> <link rel="stylesheet" href="css/ global.css" type="text/css" /> </head> <body>  </body> </html> • Linked Style Sheet: All CSS rules are saved in a .css file
    31. 31. Inline <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>  • Inline Styles: declarations can be placed within a single tag as a style attribute
    32. 32. Combining methods • Embedded, linked, and inline styles can be combined in a single page
    33. 33. Group Projects Due March 9
    34. 34. Homework due March 2 • Read chapter “Graphics” in Web Style Guide • Work on Group Projects Next week: formatting images for the Web
    35. 35. Thank You

    ×