Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Similar a Artdm171 Week5 Css
Similar a Artdm171 Week5 Css (20)
Más de Gilbert Guerrero
Más de Gilbert Guerrero (20)
Último
Último (20)
Artdm171 Week5 Css
- 1. ARTDM 171, Week 5: CSS Basics Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
- 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. Letʼs take a quiz!
- 4. Cascading Style Sheets (CSS)
- 5. Cascading Style Sheets • Code that you add to your Web pages • Separate presentation from structure
- 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. Page Properties... Dreamweaver fonts + CSS
- 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. CSS Selectors
- 11. Tags • h1 { font-family: Georgia, Times, serif; font-size: 16px; color: #003366; } • <h1>My Website About Eating Food</h1>
- 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. 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. 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. Firebug for Firefox https://addons.mozilla.org/en- US/firefox/addon/1843
- 16. Using Selectors
- 17. Grouped Selectors body, td, th { color: #000000; } h1, h2, h3 { color: #FF0000; }
- 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. Descendents a img { border: 0; } • This will affect linked images only
- 20. Descendents p.highlight a { font-weight: bold; } • This will affect links within paragraphs that have an attribute class=“hightlight”
- 21. Descendents #navigation ul li a:hover { background-color: #fff; } • This will affect links while hovering within a list in the navigation container
- 22. Fonts
- 23. Font Sizes • Pixels (px) • Ems (em) • Percentage (%) • Points (pt) • Picas (pica) • Inches (in) • Centimeters (cm) • Milimeters (mm)
- 24. Absolute Font Size: px • Example: font-size: 12px; • Not proportional to the viewing area. Always the same.
- 25. Relative Font Size: em or % • Example: font-size: 1.2em; font-size: 120%; • Proportional to the viewing area.
- 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. 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. Embedded, Linked, and Inline Stylesheets
- 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. 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. 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. Combining methods • Embedded, linked, and inline styles can be combined in a single page
- 33. Group Projects Due March 9
- 34. Homework due March 2 • Read chapter “Graphics” in Web Style Guide • Work on Group Projects Next week: formatting images for the Web
- 35. Thank You