Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
id
attribute
(3.2.2)
<p>Spatula City! Spatula City!</p> <p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!</p>
<p>Visit <a href= "http://www.textpad.com/download/index.html#downloads"> textpad.com</a> to get the TextPad editor.</p> <p><a href="#mission">View our Mission Statement</a></p>
#
#mission { font-style: italic; font-family: "Garamond", "Century Gothic", serif; }
Spatula City! Spatula City!
Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers esplode
with splendor!
mission
p#mission {
class
attribute
(3.2.3)
<p class="shout">Spatula City! Spatula City!</p> <p class="special">See our spectacular spatula specials!</p> <p class="special">Today only: satisfaction guaranteed.</p>
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; } p.shout { color: red; font-family: cursive; }
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed.
special
or a p
with class shout
<h2 class="shout">Spatula City! Spatula City!</h2> <p class="special">See our spectacular spatula specials!</p> <p class="special shout">Satisfaction guaranteed.</p> <p class="shout">We'll beat any advertised price!</p>
See our spectacular spatula specials!
Satisfaction guaranteed.
We'll beat any advertised price!
a:link { color: #FF0000; } /* unvisited link */ a:visited { color: #00FF00; } /* visited link */ a:hover { color: #FF00FF; } /* mouse over link */
class | description |
---|---|
:active
|
an activated or selected element |
:focus
|
an element that has the keyboard focus |
:hover
|
an element that has the mouse over it |
:link
|
a link that has not been visited |
:visited
|
a link that has already been visited |
:first-letter
|
the first letter of text inside an element |
:first-line
|
the first line of text inside an element |
:first-child
|
an element that is the first one to appear inside another |
<div>
(4.1.1)
a section or division of your HTML page (block)
<div class="shout"> <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>
(4.1.2)
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="shout">any advertised price</span>!</p>
See our spectacular spatula specials!
We'll beat any advertised price!
span
selector1 selector2 { properties }
selector1 > selector2 { properties }
<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>
li 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>
#ad li.important strong { text-decoration: underline; }
h2 { border: 5px solid red; }
property | description |
---|---|
border
|
thickness/style/size of border on all 4 sides |
px
, pt
, em
, or thin
, medium
, thick
)none
,
hidden
,
dotted
,
dashed
,
double
,
groove
,
inset
,
outset
,
ridge
,
solid
)
property | description |
---|---|
border-color ,
border-width , border-style
|
specific properties of border on all 4 sides |
border-bottom ,
border-left , border-right ,
border-top
|
all properties of border on a particular side |
border-bottom-color ,
border-bottom-style , border-bottom-width ,
border-left-color , border-left-style ,
border-left-width , border-right-color ,
border-right-style , border-right-width ,
border-top-color , border-top-style ,
border-top-width
|
properties of border on a particular side |
Complete list of border properties |
h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; }
border-bottom-width
above)property | description |
---|---|
padding
|
padding on all 4 sides |
padding-bottom
|
padding on bottom side only |
padding-left
|
padding on left side only |
padding-right
|
padding on right side only |
padding-top
|
padding on top side only |
Complete list of padding properties |
p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; }
This is the first paragraph
This is the second paragraph
p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
property | description |
---|---|
margin
|
margin on all 4 sides |
margin-bottom
|
margin on bottom side only |
margin-left
|
margin on left side only |
margin-right
|
margin on right side only |
margin-top
|
margin on top side only |
Complete list of margin properties |
p { margin: 50px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
p { margin-left: 8em; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; }
This paragraph uses the first style above.
property | description |
---|---|
width ,
height
|
how wide or tall to make this element (block elements only) |
max-width ,
max-height , min-width ,
min-height
|
max/min size of this element in given dimension |
auto
marginsp { margin-left: auto; margin-right: auto; width: 750px; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
width
is set (otherwise, may occupy entire width of page)
text-align: center;