HTML - Quiz #2 Attendance CODE : 715834

1. HTML - Quiz #2Attendance CODE: 715834 http://decal.aw-industries.com Web Design:Basic to Advanced Techniques

2. Announcements • Course FTP accounts set up • Enrollment should all be sorted out • Quizzes have been graded • Mini Project 1 • Extension on last week’s HTML lab, with CSS styling • Due next Monday! Web Design:Basic to Advanced Techniques

3. Today’s Agenda • Quiz • Announcements • CSS Introduction • CSS Practice • CSS Lab • Mini Project #1 Web Design:Basic to Advanced Techniques

4. Web Design: Fall 2010 Mondays 7-9pm 200 Sutardja-Dai Hall Basic to Advanced Techniques CSS Introduction Web Design:Basic to Advanced Techniques

7. What is CSS? • Cascading Style Sheets • Separate structured content (HTML) from visual appearance (CSS) • In good web design code, these should be COMPLETELY separated (no formatting in the HTML!) • More formatting/styling options than HTML alone • Avoids repetition of code

8. What is CSS? <font color="#0000FF”>Emphasized Text<font> This is regular text. <font color="#0000FF”>Emphasized Text<font> This is regular text. … …

9. What is CSS? <span class=‘emphasized’>Emphasized Text<span> This is regular text. <span class=‘emphasized’>Emphasized Text<span> This is regular text. span.emphasized{ color: #0000FF; }

10. CSS Syntax • CSS rules go into a file with .css extension body { font-weight: bold; } Rule value selector property Every declaration Terminated by ; Style.css

11. Useful CSS • All Elements • color: #FFF / #FFFFFF / white; • font-size: 12px; • font-weight: bold / normal; • text-decoration: none / underline; • background-color: #FFF / #FFFFFF / white; • Block Objects • margin: 10px 20px; • padding: 10px 20px; • background-image: url(‘/images/background.gif’); • background-repeat: no-repeat / repeat-x / repeat-y / repeat; • background-position: 10px 0px; • border: 1px solid #000; • text-align: left / center / right;

12. CSS Selectors • We need a way to label the HTML elements we want to style so we can refer to them in our separate CSS code <p id=“myEle”></p> Style.css #myEle { font-weight: bold; font-size: 20px; }

13. Element Selector We can select HTML elements by their element type CSS Style Sheet img { border: 1px solid #333; } p { font-color: #333; } HTML Document <h1>Image Page</h1> <imgsrc=“image.gif” /> <p>Here’s a description of the image you see above</p>

14. Class / ID Selector <pid=“myUniqueElement”></p> • ID • Used to identify ONE particular HTML element • Must be unique for entire document • Invalid XHTML if more than one element with same ID <pclass=“groupOfElements”></p> • Class • Used to identify ONE or MORE HTML elements • Give multiple elements the same styling

15. Class / ID Selector We can tag HTML elements by giving them an #id or .class CSS Style Sheet #description { font-color: red; } .extraInfo { font-color: blue; } HTML Document <p id=“description”>Here’s a description of the image you see above</p> <p class=“extraInfo”>Here’s the photo equipment I used</p> <p class=“extraInfo”>Here’s where I took the photo</p>

16. Universal Selector We can select all HTML elements CSS Style Sheet * { font-family: verdana, arial, helvetica, sans-serif; color: #000; } HTML Document <h1>Image Page</h1> <imgsrc=“image.gif” /> <p id=“description”>Here’s a description of the image you see above</p> <p class=“extraInfo”>Here’s the photo equipment I used</p> <p class=“extraInfo”>Here’s where I took the photo </p>

17. Combining Selectors • Descendant (nested) • Selects by nested structure • p span { color: red; } • .description a { color: blue; } • Combined • Selects between elements of same class • p.info { color: red; } • a.info { color: #FFF; } • Grouped • Applies style to list • a, p, span { color: red; } <p class=“description”> <a href=“#”>a link</a> <span>a span</span> </p> <p class=“description”> <a href=“#”>a link</a> <span>a span</span> </p> <p class=“description”> <a href=“#”>a link</a> <span>a span</span> </p> <p class=“info”>para</p> <a class=“info” href=“#”>link </a> <p class=“info”>para</p> <a class=“info” href=“#”>link </a> <p class=“info”>para</p> <a class=“info” href=“#”>link </a> <p>a para</p> <a href=“#”>a link</a> <span>a span</span> <p>a para</p> <a href=“#”>a link</a> <span>a span</span>

18. Specificity <p class=“para” id=“myPara”>Text</p> p { color: red; } .para { color: blue; } #myPara { color: green; } #id > .class > element • What color is the text? GREEN

19. Attaching CSS Styles • After we write our CSS rules we need to link our rules to our HTML document • External Style Sheets • Inline Styling • Embedded Style Sheets

20. External Style Sheets <head> <link href=”/style.css” rel="stylesheet" type="text/css" /> </head> • Most common way to link CSS to HTML • CSS and HTML in separate files • Same CSS rules throughout site • Best practice!

21. Inline Styling • Useful for single cases • Poor practice to use this extensively throughout site • If applying same style to multiple elements, consider using class instead <pstyle=“color: red;”>red text</p>

22. Embedded Style Sheets <head> <style type="text/css”> p { color: red; } </style> </head> • Like inline styling, only use this for exceptions • If elements in this page are styled differently than the rest of the site • Try to avoid ever using this • Better option is to link to another .CSS file

23. Multiple Style Sources • HTML documents can include multiple sources of CSS styles • A HTML document may link to any number of external style sheets • In addition to those style sheets, the documents may use inline styling and embedded style sheets • SomeHTMLDoc.html • <head> • <link href=”/style.css” rel="stylesheet" type="text/css" /> • <link href=”/style2.css” rel="stylesheet" type="text/css" /> • <link href=”/style3.css” rel="stylesheet" type="text/css" /> • </head>

24. Cascade Order • Proximity: Inline > Embedded > External • Last style wins • Rules in last style sheet overwrite previous rules Style.css p { color: red; font-weight: bold} <p style=“color: orange;”> some text </p> <p> some text </p> <p> some text </p> <p> some text </p> Style2.css p { color: green; } Style3.css p { color: blue; }