div
, span
, id
, class
)Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
id
attribute<p>Spatula City! Spatula City!</p> <p id="missionstatement">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!</p>
Spatula City! Spatula City!
Our mission is to provide the most spectacular spatulas
and splurge on our specials until our customers esplode
with splendor!
#missionstatement { font-style: italic; font-family: "Garamond", "Century Gothic", serif; }
missionstatement
(next slide)p
above) can be specified explicitly if desired: p#missionstatement {
<p>Visit <a href= "http://www.textpad.com/download/index.html#downloads"> textpad.com</a> to get the TextPad editor.</p> <p><a href="#mac">Directions for Mac OS X</a></p>
Visit textpad.com to get the TextPad editor.
#
class
attribute<p>Spatula City! Spatula City!</p> <p class="special">See our spectacular spatula specials!</p> <p class="special">Today only: satisfaction guaranteed.</p>
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed.
I don't want ALL paragraphs to be yellow, just these three...)
id
, a class
can be reused as much as you like on the page.special { background-color: yellow; font-weight: bold; }
special
p.standout { color: red; font-family: cursive; }
p
elements that are part of the class standout
<h2 class="standout">Spatula City! Spatula City!</h2> <p class="special">See our spectacular spatula specials!</p> <p class="special standout">Satisfaction guaranteed.</p> <p class="standout">We'll beat any advertised price!</p>
See our spectacular spatula specials!
Satisfaction guaranteed.
We'll beat any advertised price!
<div>
a section or division of your HTML page (block)
<div class="standout"> <h2>Spatula City! Spatula City!</h2> <p class="special">See our spectacular spatula specials!</p> <p>We'll beat any advertised price!</p> </div>
See our spectacular spatula specials!
We'll beat any advertised price!
<span>
an inline element used purely as a range for applying styles
<h2>Spatula City! Spatula City!</h2> <p>See our <span class="special">spectacular</span> spatula specials!</p> <p>We'll beat <span class="standout">any advertised price</span>!</p>
See our spectacular spatula specials!
We'll beat any advertised price!
span
selector1 selector2 { properties }
selector1 > selector2 { properties }
li strong { text-decoration: underline; }
<p>Shop at <strong>Hardwick's Hardware</strong>...</p> <ul> <li>The <strong>best</strong> prices in town!</li> <li>Act while supplies last!</li> </ul>
Shop at Hardwick's Hardware...
#ad li.important strong { text-decoration: underline; }
<div id="ad"> <p>Shop at <strong>Hardwick's Hardware</strong>...</p> <ul> <li class="important">The <strong>best</strong> prices in town!</li> <li>Act <strong>while supplies last!</strong></li> </ul> </div>
Shop at Hardwick's Hardware...
background-color
: color to fill backgroundbackground-image
: image to place in backgroundbackground-position
: placement of bg image within elementbackground-repeat
: whether/how bg image should be repeatedbackground-attachment
: whether bg image scrolls with pagebackground
: shorthand to set all background propertiesbackground-image
body { background-image: url("draft.jpg"); }
This is the first paragraph
This is the second paragraph...
It occupies 2 lines
background-repeat
body { background-image: url("draft.jpg"); background-repeat: repeat-x; }
This is the first paragraph
This is the second paragraph...
It occupies 2 lines
repeat
(default), repeat-x
, repeat-y
, or no-repeat
background-position
body { background-image: url("draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; }
This is the first paragraph
This is the second paragraph...
It occupies 2 lines
top
, left
, right
, bottom
, center
, a percentage, or a length value in px
, pt
, etc..partialimage1, .partialimage2 { background-image: url("sex_and_the_city.jpg"); background-repeat: no-repeat; width: 70px; height: 200px; } .partialimage1 { background-position: 0px 0px; } .partialimage2 { background-position: -115px 0px; }