26
CSS: Controlling presentation INFO 1300 September 23, 2009
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 1/26
CSS: Controlling presentation
INFO 1300
September 23, 2009
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 2/26
So far …h1 { color : #A0BBF2; }
p { font-size: 12px;
font-family: Verdana, sans-serif; }body { background-color: black; }
CSS rules let you style HTML elements
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 3/26
What if you wanted to style an
element uniquely…
All paragraphs are red
All paragraphs are redBut one is blue
All paragraphs are red
All paragraphs are red
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 4/26
What if you wanted to have
differently styled groups of anelementThese paragraphs are red
These paragraphs are redThese paragraphs are blue
These paragraphs are red
These paragraphs are redThese paragraphs are blue
These paragraphs are blue
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 5/26
Styling an element use uniquely
with an id
Let’s look under the hood
This a <p>,But it has different
styling than other
<p>
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 6/26
Using ID for unique styling• #idName {property: value; property:value}!
– #contactinfo {color: orange}!
• Remember: an ID can only be used in ONE place inan HTML document.
• But – the same ID can be used in multiple HTML
documents. And a CSS file using a ID as a selector
can be linked to by multiple HTML documents.
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 7/26
Styling a group of elements the
same with a class…
Let’s look under the hood
This a <h2> and a
<p>, both have
color:green
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 8/26
Using classes to styled a group
of elements the same…
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 9/26
Of course you can make this
element specific…
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 10/26
Class Syntax• .className {property: value; property:value}!
– .contactinfo {color: orange}!
• element.className {property: value}! – p.contactinfo {color: orange}!
• A class can be used as many times as you wish in a
document
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 11/26
Class vs. idUse “class” when you want toaffect two or more XHTMLelements
<p class="caption">
Mod Crusher's Club
Jacket
</p>
…..
<p class="caption">Scooters Outside a
Mod Hangout
</p>
Use “id” when you wantto affect only one, single element
<p id="pointers">
Learn more about Mods at
these sites.
</p>
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 12/26
So why is it a “cascading”
style sheet
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 13/26
Understanding XHTML Structure
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 14/26
From this…
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 15/26
To this…
Tree structure reflects nesting. The children of a parent are
those tags nested within it.
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 16/26
Styles are inherited or
cascade through the tree
Understanding inheritance…
body {color: red}
p {color: blue}
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 17/26
What if we want to style a
whole branch (or subtree)
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 18/26
Use div and span to add
structure
• Group together parts of the document
that represent logical information units
• Then using id or class, style those units
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 19/26
Adding to the tree
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 20/26
div vs. span<div class="imagebox"><img
src="modsscooters.jpg"height="112"
width="84" alt="" />
<p class="caption">Scooters Outside a Mod
Hangout</p></div>
Div is a block-level element.
It groups items that should bestyled together.
Like <p>.
<p><span id="opening"> A
Mod was a product of
working class British
youth of the
mid-sixties.</span> They
portrayed an image of
being stuck up, emulating
the middle classes, snobbish
and phoney. …..
</p>
Span is an in-line element. It is
used to style inside block-levelelements.
Like <em>.
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 21/26
<div> allows us to put a new
“invisible” parent in the tree
• Group a set of elements in some logical
structure (cat group, dog group)
• Then use “class” to style those groups
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 22/26
Dogs and Cats…
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 23/26
Some selector variations• Element: p { font-size: 1em; }
• Descendent: p em {
font-weight: bold; }• Class: p.urgent { color:red; }
• ID: h1#page-title { font-size: 250%}
• Multiple: h1, h2, h3, h4, h5, h6 {
text-align: center; }
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 24/26
It starts to get hard to figure out
what rule applies…
• Generally the most specific rule
matches (e.g., class is more specific
than element)
• If no match then use inhertance
• HF page 322 (simple)
• HF page 417 (the gory details)
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 25/26
Caveat on CSS
Beware, or you will rip your hair out
Develop CSS file step-by-step, debugging as you go
Test in multiple browsers
7/27/2019 Lecture 09 - CSS II
http://slidepdf.com/reader/full/lecture-09-css-ii 26/26
Review
CSS defines rules that change how
content is presented
With picky syntax
Lots of properties are available for styling
Color; links
You can select different (sets of) HTMLelements to be styled
