style
a.k.a. CSS
css
Cascading Style Sheets
html
For Structure
css
For Presentation
cs s
Style
css
sheets
c ss
cascading
cas•cade
noun
-
a small waterfall, typically one of several that fall in stages down a steep rocky slope.
- a process whereby something, typically information or knowledge, is successively passed on.
cas•cade
verb
-
(of water) pour downward rapidly and in large quantities.
- arrange (a number of devices or objects) in a series or sequence.
cas•cade
summary
- The more specific the style....
- The lower it is in the cascade....
- The more likely it is to override
your first style
p { color: red; }
woah
What's all that stuff?
p { color: red; }
- Selector
p { color: red; }
- Declaration
P { COLOR: RED; }
- Statement
P { COLOR: RED; }
- Property
P { COLOR: RED; }
- Value
repeat after me
P { COLOR: RED; }
- Select something
- Start declaration
- Start statement
- Choose a property
- Assign a value
- End statement
- End declaration
{ }
Curly brackets enclose the declaration (i.e. <>)
:
Colon separates property from value (i.e. =)
;
Semi-colon ends the statement (i.e. "")
let's write one together
with this style
we shall:
- Select a Level-1 Heading
- Make it Green
select level-1 heading
<h1>
make it green
- What property is that?
- Can I just use 'green' for the value?
h1 { color: green; }
How'd you do?
do it again
This time make Level-1 headings Blue
you should have this
h1 { color: green; }
h1 { color: blue; }
what color is your level-1 heading?
Best guess? Green? Blue?
it's blue
But why?
c ss
Cascade
so....
- Specificity = same
- Blue declaration = lower
- Blue wins
that's all there
is to it
Well, that's not necessarily true...
style
By rmion
