Lecture Notes 4b:
CSS Classes
CSE 190 M (Web Programming), Spring 2007
University of Washington
Reading: Sebesta Ch. 3 sections 3.2 - 3.3, 3.4.2 - 3.4.4, 3.12
CSS class selectors
p.special {
background-color: yellow;
font-weight: bold;
}
- selectively applies a CSS rule to only the paragraphs that are part of the class named
special(next slide) - gives a style to some occurrences of an element but not others
(I don't want ALL paragraphs to be yellow, just these three...
)
The HTML 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> <p>We'll beat any advertised spatula price!</p>
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed.
We'll beat any advertised spatula price!
Class selectors without element
.standout {
color: red;
font-family: cursive;
}
- selectively applies a CSS rule to any element that is part of the class named
standout
HTML class attribute revisited
<h2 class="standout">Spatula City! Spatula City!</h2> <p class="special">See our spectacular spatula specials!</p> <p class="special standout">Today only: satisfaction guaranteed.</p> <p class="standout">We'll beat any advertised spatula price!</p>
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed.
We'll beat any advertised spatula price!
- an element can be a member of multiple classes (separated by spaces)
CSS ID selectors
p#missionstatement {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
}
- selectively applies a CSS rule to only the paragraphs that has the particular ID named
missionstatement(next slide) - differs from class selector in that an ID can only be used once in the HTML document (won't validate otherwise)
- element (
pabove) can be omitted if desired; rule will apply to any element with IDmissionstatement
The HTML 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!
Linking to sections of a web page
<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.
- a link target can include an ID at the end, preceded by a
# - browser will load that page and scroll to element with given ID
- can link to an ID within the current page
Logical divisions in HTML: <div>
a section or division of your HTML page (block-level)
<div class="standout"> <h2>Spatula City! Spatula City!</h2> <p class="special">See our spectacular spatula specials!</p> <p>We'll beat any advertised spatula price!</p> </div>
Spatula City! Spatula City!
See our spectacular spatula specials!
We'll beat any advertised spatula price!
- has no onscreen appearance, but you can apply a style or ID to it, which will be inherited by all elements inside the
div
Inline styling sections: <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 spatula price</span>!</p>
Spatula City! Spatula City!
See our spectacular spatula specials!
We'll beat any advertised spatula price!
- has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the
span
Embedding style sheets: style
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
- should be placed within the
headof the HTML page - linking to an external style sheet file is preferred, especially when you have many styles
Inline styles: the style attribute
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
This is a paragraph
- higher precedence than embedded or linked styles
- useful for one-time overrides
Cascading style sheets
- it's called Cascading Style Sheets because the attributes of an element cascade together in this order:
- browser's default styles
- external style sheet files (in a
<link>tag) - internal style sheets (inside a
<style>tag in the page's header) - inline style (the
styleattribute of the HTML element)
Practice problem
Add styling to the web page stored as digg.html to make it look like this:
|
|
|
