css - part 2 cascading style sheets jim eng [email protected] thanks to gonzalo silverio for some...
TRANSCRIPT
Overview
• Image credits
•HTML / CSS big picture ... again
•More HTML tags
•The ‘C’ in CSS - Cascading
• “Advanced” CSS
•Tools - FireBug and Web Developer
Image credits
•Credit for your work
•Attributing other people’s work
•Copyright
•Creative Commons
•http://creativecommons.org
•http://en.wikipedia.org/wiki/Creative_Commons
Color Names•W3C has listed 16 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
Colors by the number...
#e2edffThree Numbers, Red, Green , and Blue - each from
00 - FF (Hexidecimal)
#ffffff = white#000000 = black#ff0000 = red#00ff00 = green#0000ff = blue
http://www.w3schools.com/css/css_colornames.aspWeb-safe
colors
Fonts
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.
Font Factors
font-size: xx-small x-small small
medium large
x-large xx-large
font-weight: bold or normal
font-style: normal or italic
text-decoration: none, underline, overline, or line-through
HTML / CSS big picture ... again
•Markup is all about structure and meaning
•Style sheet is all about presentation
•Is this right?
Emerging conventions & rules of thumb
•A series of items: p p p p p p
•A series of items with attributes: ul or ol
•A series of items with name-value pairs defining attributes: dl
•A series of items with more many attribute values: table
• Sections and, subsections: h1, h2, h3, ... h6, hr as separators
Markup a baby
Markup a baby
<p>Jack is a <em>cool</em> baby. He has ...<p>
<ul><li>green jammies</li><li>a sweet smile</li>
</ul>
<p>He sleeps a lot.</p>
Markup a baby (2) <p>Riiiiing! Riiiing! Riiiing!</p>
<cite>Baby</cite><blockquote>Hi Mom!</blockquote><cite>Mom</cite><blockquote>Sweetie! Where are you?
</blockquote><cite>Baby</cite><blockquote> At the park, where you
left me this morning…</blockquote><cite>Mom</cite><blockquote>OMG! Stay <strong>right
there!</strong></blockquote>
Markup a taxi stand
Markup a taxi stand
<ol><li>388</li><li>231</li><li>123</li>
</ol>
Markup a taxi stand
<table><thead /> <tr><td>388</td><td>Fred</td><td>Reliable</td></tr></table>
Markup a fruit bowl
Markup a fruit bowl
<h1>Tropical fruit by size</h1><ol><li>Pineapple</li><li>Banana</li></ol><h1>Citrus fruit</h1><ul><li>Orange</li><li>Lemon</li></ul><h1>Dangerous fruit and why</h1><dl><dt>Mango</dt><dd>Causes alergic reactions</dd><dt>Strawberry</dt><dd>Can choke when eaten</dd></dl>
<ol><li>Pineapple</li><li>Banana</li></ol>
<ul><li>Orange</li><li>Lemon</li></ul>
<dl><dt>Mango</dt><dd>Causes alergic reactions</dd><dt>Strawberry</dt><dd>Can choke when eaten</dd></dl>
<ol> ... </ol>ordered list
<dl> ... </dl>definition list
<ul> ... </ul>unordered list
Markup a fruit bowl (2)
<h1>Tropical fruit</h1><h2>Pineapple</h2><p>Hard to peel</p><h2>Banana</h2><blockquote>”Essential to
comedy”</blockquote><h1>Round fruit</h1><h2>Citrus fruit</h2><h3>Orange</h3><p>Some pithy remark</p><h3>Lemon</h3><p>Some pithy remark</p>
Markup Google
Markup Google
ideal?
Markup Google
ideal?
Markup Google - the Reality
•Meaningless, presentational markup
•Where are the lists?
• tables, divs, spans, font, underline, bold, nobr - why not blink!
•But that’s OK! ... sort of
• It is essentially HTML 4 transitional loose
•A lot of old browsers out there!
Gonzalo’s approach to markup
•Work without style – needs to make sense “naked” – See www.umich.edu
•Add meaningless cruft (from the point of view of markup) as last step because of:
•Canvas needs
•Flexibility
•Positioning issues
Anatomy of a CSS Rule
What does “cascading” mean?
•http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm
•Even simple web page could have three sylesheets applied
• Browser stylesheet
• Author’s stylesheet(s)
• User’s stylesheet
•Plus embedded rules and inline rules
•There can be conflicts
Resolving cascade conflicts
•http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
•Generally, author styles override user styles which override browser styles
• "!important" can be set on any declaration to override other styles
•Used by people with special needs (font size, colors, etc)
•Explore conflicts with Firebug
In conflict, who wins?
<body><p><span><a href=“#” id=“bingo”>
A link</a></span></p></body>
body{ color:gray}p {color:blue}span {color:green}a {color:fuchsia}span a {color:black}p span a {color:lime}body p span a {color:red}#bingo{display:none}
What color will “A link” be?
Nested selectors ... again•p a {all <a> descendants of <p>}
•p > a {all <a> children of <p>}
•p * {all descendants of <p>}
•p > * > a {all <a> grandchildren of <p>}
• span#shriek {the one <span> that has a shriek id}
• span.omg {all <span> with an omg class}
• span[class=omg] {all <span> with an omg class}
• span + a { all <a> that are the same level as a <span> }
•p#spud > * > a.bungo[href=the_bad_place.html]
Gonzalo’s styling procedure
1) zero out the default stylesheet of the browser http://developer.yahoo.com/yui/reset/2) map the cascade, working from a design3) add style selectors to markup (if needed at all!)4) style for IE 6 first5) style for Moz/Safari/IE 7 last
Adding selectors to markup
economy - make cascade work for you!but make sure you have what you needaddressability for styling - but behaviors as well
choices- id or class?- can address without adding either? Leave alone then
Adding style hooks
<div id=“wrap”><div id=“nav”><h1 /><ul><li id=“current”><span /></li><li><a><span /></a></li></ul></div><div id=“content”><h1 /></div></div>
Why ids?Why not just class everything?What if I need an <ul> in #content that needs to look different from the one in #nav ?
Adding style hooks
<div id=“wrap”><div id=“nav”><h1 /><ul><li id=“current”><span /></li><li><a><span /></a></li></ul></div><div id=“content”><h1 /></div></div>
Why ids?Why not just class everything?What if I need an <ul> in #content that needs to look different from the one in #nav ?
Everything is addressable!#nav h1#nav ul#nav li#nav li a#nav li a span#nav li#current#nav li#current span
Styling: style for IE 6 first
•Crippled implementation of CSS1
•http://www.westciv.com/style_master/academy/browser_support/selectors.html
•Keep it simple – standard selectors + class + id, few fancy paths
•And no fancy property and values
If you need fancy, make sure that the markup is there for it…
For example
<div id=“wrap”><div id=“nav”><h1 /><ul><li id=“current”
class=”first”><span /></li><li><a><span /></a></li></ul></div><div id=“content”><h1 /></div></div>
If you wanted to add a pipe between each list element, you need to know which is the first!The IE 6 wayli {border-left:1px solid lime}li.first{ border:none}The modern browser way:#nav > ul > li {border-left:1px solid lime}#nav > ul > li:first-child {border:none}
Styling: style for Moz/Safari/IE 7 last
•Dynamic pseudo class selectors (:active, :hover, :focus)
•Pseudo class selectors on all elements (not just <a>)
• :first-line, :first-letter
• :before, :after (for adding “content”)
•First child selectors (E:first-child)
•Adjacent selectors (E + F)
•Attribute selectors (E[foo=warning])
Examples
http://www-personal.umich.edu/~gsilver/ui-experiments/welcome.html
CSS Box Model• height and width properties size the block element
• margin properties define the space around the block element
• border properties define the borders around a a block element
• padding properties define the space between the element border and the element content
• background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a pagehttp://reference.sitepoint.com/css/boxmodel
The Box Model
.trapped { height: 100px; width: 200px; margin: 20px; border: 5px solid yellow; background:red; padding: 20px; font-family:Arial; color:orange; font-size:20px;}<p class=”trapped”>I am trapped in a glass case of emotion which is 100px high and 200px wide.</p>
115500
119900
114400
110000
5
2020
Border, padding, and margin are additive.
.trapped { height: 50px; width: 50px;}.trapped2 { height: 50px; width: 50px; border: 5px solid yellow; padding: 10px;}<p class="trapped">One</p><p class="trapped2">Two</p>