layout
design
style
content
format
E-E-K
T-R-A-P
H-A-T
M-O-U-S-E-T-R-A-P
C-A-T
Cascading Style Syntax
Common Style Syntax
Common Style Sheets
Central Style Shortcuts
Cascading Style Sheets
Yes
No
In a pond.
In their purses.
In a river bank.
In their hats.
vertically aligns an element to the bottom of the page
horizontally aligns an element to the right of the page
horizontally aligns an element to the center of the page
vertically aligns an element to the top of the page
horizontally aligns an element to the left of the page
clouds
clear: left;
elements that are pushed to the top or the bottom of a page
elements that are pushed to the right or the left of a page
elements that do not allow text to surround them
background-attachment: url();
background-image: src();
background: #FFF url();
background-url: ;
Maybe
/* */
//
<! !>
<!-- -->
p, h1, h2 { color: green; }
p { border= 1px dotted #000000; }
<p style="border: 1px dotted #000000;"> </p>
p { border: 1px dotted #000000; }
Internal CSS
Inline CSS
External CSS
margin, border, padding, content
content, margin, border, padding
border, margin, content, padding
content, padding, border, margin
padding, content, margin, border
pseudo-classes
attribute selectors
ids
selectors
Does it do this?
classes are identified a number sign (#)
classes are identified with a dot (.)
classes and ids are not used in inline CSS
ids are identified with a number sign (#)
margins add whitespace inside the border and padding adds whitespace outside
padding adds whitespace and margins increase the border size
there is no difference
margins add whitespace and padding increases the border size
padding adds whitespace inside the border and margins add whitespace outside
Sorta
style="font: ;"
body { font-size: ; }
body { font: ; }
p { font-size: ; }
p { font: ; }
#505050
grey
808080
rgb(80, 80, 80)
#FFF
overflow: visible;
overflow: auto;
overflow: scroll;
overflow: hidden;
mouse-pointer: value;
cursor: value;
mouse-pointer { type: value; }
cursor { type: value; }
position: static;
top: -100px;
top: 100px;
z-index: -100;
z-index: 100;
Maintained In A Separate File
Added Directly to An HTML Tag
Added to An HTML Document's Header