Web-03-CSS.ppt
- 1. Cascading Style Sheets Charles Severance www.dj4e.com https://www.dj4e.com/code/css.zip
- 2. Web Server Database Server Time Django Views Sqlite or PostgreSQL Browser JavaScri pt D O M django code static files RRC/HTTP SQL Parse Respons e Parse Reques t
- 4. 1995 2007 HTML has evolved a *lot* over the years - as computers and networks have gotten faster
- 6. HTML CSS
- 7. Separation of Concerns / Specialization <html> <head> <title>Including CSS From a File</title> <link type="text/css" rel="stylesheet" href="rules.css"> </head> <body> <h1>A Header</h1> <p> By putting the CSS rules into a separate file, it can be included in many different web pages with a single "link" tag, usually in the "head" of the document. </p> body { font-family: arial, sans-serif; } h1 { color: blue; } p { border-style: solid; border-color: red; border-width: 5px; } a { color: green; background-color: lightgray; text-decoration: none; } Developer Designer
- 8. CSS Syntax • CSS Syntax is very different than HTML. • CSS is a set of “rules” which in include a “selector” and one or more “properties” and “values” as well as some punctuation... body { font-family: arial, sans-serif; }
- 9. Anatomy of a CSS Rule body { font-family: arial, sans-serif; font-size: 100%; } property - which aspect of CSS we are changing selector - which part of the document this rule applies to value – what we are setting the property to
- 11. Partial List of CSS Properties color background-color visibility (visible/hidden) font-family (arial, sans-serif) font-size font-style (italic, normal) font-weight (bold, normal) text-align vertical-align text-transform (lowercase, etc) text-decoration border-width border-style border-color margin border padding float (left, right, none) left / top position (static, relative, absolute) z-index http://www.lesliefranke.com/files/reference/csscheatsheet.html
- 12. Using CSS in HTML
- 13. Applying CSS to our HTML • Inline - right on an HTML tag, using the style= attribute • An embedded style sheet in the <head> of the document • As an external style sheet in a separate file
- 16. csev $ ls -l total 32 -rw-r--r-- 1 csev staff 44 Dec 19 06:06 rules.css -rw-r--r-- 1 csev staff 679 Dec 19 06:07 index.htm -rw-r--r-- 1 csev staff 883 Dec 19 05:59 include.htm -rw-r--r-- 1 csev staff 679 Dec 19 05:59 colors.htm csev $ <html> <head> <title>Including CSS From a File</title> <link type="text/css" rel="stylesheet" href="rules.css"> </head> <body> <h1>A Header</h1>
- 19. <p style="border: 1px green solid;"> With CSS we wanted some tags that had no pre-existing style. So the <span style="color: green;">span</span> tag was invented as the new "inline" tag with no styling. </p> <div style="border: 1px blue solid;"> And the <strong>div</strong> tag is a new unstyled block tag with no padding, margin, background-color, or anything else. So you could mark blocks with the div tag and not inherit any default style. <div style="border: 1px orange solid;"> And the <strong>div</strong> tags can be nested as well. Adding the 1-pixel borders does take up a pixel of space. </div> You can add some text in the outer div. </div> span and div Tags
- 20. <p style="border: 1px green solid;"> With CSS we wanted some tags that had no pre-existing Style. So the <span style="color: green;">span</span> tag was invented as the new "inline" tag with no styling. </p> <div style="border: 1px blue solid;"> And the <strong>div</strong> tag is a new unstyled block tag with no padding, margin, background-color, or anything else. So you could mark blocks with the div tag and not inherit any default style. <div style="border: 1px orange solid;"> And the <strong>div</strong> tags can be nested as well. Adding the 1-pixel borders does take up a pixel of space. </div> You can add some text in the outer div. </div>
- 23. Images, Colors, and Fonts
- 25. Color Names • W3C has listed 16 official color names that will validate with an HTML validator. • The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. http://www.w3schools.com/html/html_colors.asp
- 26. Advanced Colors... #e2edff Three numbers, Red, Green, and Blue - each from 00 - FF (Hexidecimal) #ffffff = white #000000 = black #ff0000 = red #00ff00 = green #0000ff = blue Web-safe colors http://www.w3schools.com/css/css_colornames.asp
- 27. • Default fonts are ugly and they have serifs - which make them harder to read on a screen • So the first thing I usually want to do is override the fonts in my document • And I want to do this everywhere Fonts
- 28. body { font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: x-large; } Most Favorite Least Favorite Fallback fonts: serif, sans-serif, monospace, cursive, and fantasy Fonts
- 29. Font Factors font-size: xx-small x-small small medium large x-large xx-large 14px font-weight: bold or normal font-style: normal or italic text-decoration: none, underline, overline, or line-through
- 30. Styling for Links Post-Click: Browser default styling for links is downright ugly!
- 31. Styling Links a { font-weight: bold; } a:link { color: black; } a:visited { color: gray; } a:hover { text-decoration: none; color: white; background-color: navy; } a:active { color: aqua; background-color: navy; } link - before a visit visited - after it has been visited hover - when your mouse is over it but you have not clicked active - you have clicked it and you have not yet seen the new page
- 33. CSS Summary • CSS layout is its own art and science. • CSS basics are well established and well supported in all modern browsers. • Site layout and markup is further evolving - mostly to make it increasingly possible to support desktop-like experiences on the web and mobile. • These innovations will naturally cause incompatibilities - which make things interesting and frustrating at times.
- 34. Acknowledgements / Contributions These slides are Copyright 2010- Charles R. Severance (www.dr-chuck.com) as part of www.dj4e.com and made available under a Creative Commons Attribution 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Charles Severance, University of Michigan School of Information Insert new Contributors and Translators here including names and dates Continue new Contributors and Translators here
Editor's Notes
- #2: Note from Chuck. If you are using these materials, you can remove my name and URL from this replace it with your own, but please retain the CC-BY logo on the first page as well as retain the entire last page when you remix and republish these slides.
- #35: Note from Chuck. Please retain and maintain this page as you remix and republish these materials. Please add any of your own improvements or contributions.