• Save
ARTDM 171, Week 5: CSS
Upcoming SlideShare
Loading in...5

ARTDM 171, Week 5: CSS






Total Views
Views on SlideShare
Embed Views



1 Embed 30

http://www.gilbertguerrero.com 30



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

ARTDM 171, Week 5: CSS ARTDM 171, Week 5: CSS Presentation Transcript

  • ARTDM 171, Week 5: CSS Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  • Homework • Please email me a link • Example: o http://xyz.xtreemhost.com/week4/ 2
  • Letʼs take a quiz!
  • Tags (continued)
  • <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>
  • <img /> - Image • <img src="images/file.jpg" border="0" height="10" width="10" />  • Border, Width and Height are optional.
  • <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>
  • &nbsp; — non breaking space
  • <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.
  • 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>
  • 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>
  • 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,...
  • 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
  • Cascading Style Sheets (CSS)
  • Cascading Style Sheets • Code that you add to your Web pages • Separate presentation from structure
  • CSS Zen Garden http://www.csszengarden.com
  • 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
  • Page Properties... Dreamweaver fonts + CSS
  • 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>
  • CSS Selectors
  • Tags • h1 {     font-family: Georgia, Times New Roman, Times, serif;                font-size: 16px;     color: #003366; } • <h1>My Website About Eating Food</h1>
  • 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>
  • 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>
  • 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>
  • Firebug for Firefox https://addons.mozilla.org/en- US/firefox/addon/1843
  • Using Selectors
  • Grouped Selectors body, td, th {      color: #000000; } h1, h2, h3 {      color: #FF0000; }
  • Selectors on specific elements • This will affect only paragraphs that have an attribute class="highlight" p.highlight {      background-color: #FFFFFF;  }
  • 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;  }
  • Fonts
  • Font Sizes • Pixels (px) • Ems (em) • Percentage (%) • Points (pt) • Picas (pica) • Inches (in) • Centimeters (cm) • Milimeters (mm)
  • Absolute Font Size: px • Example: font-size: 12px; • Not proportional to the viewing area.  Always the same.
  • Relative Font Size: em or % • Example: font-size: 1.2em; font-size: 120%; • Proportional to the viewing area.
  • 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;  }
  • 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.
  • Embedded, Linked, and Inline Stylesheets
  • 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>
  • 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>
  • 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> 
  • Group Projects are due next week
  • Homework due Sept 22 • Read chapter “Graphics” in Web Style Guide • Complete Group Projects • Next week: formatting images for the Web
  • Thank You