Page Sections

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 1, section 1.4;
Chapter 2, sections 2.1 - 2.2

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Motivation for Page Sections

• want to be able to style individual elements, groups of elements, sections of text or of the page
• (later) want to create complex page layouts

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!

CSS ID selectors

#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)
• each ID must be unique; can only be used once in the page (won't validate otherwise)
• element (p above) can be specified explicitly if desired:
  p#missionstatement {

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.

Directions for Mac OS X

• 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

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>

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

• classes are a way to group some elements and give a style to only that group
  (I don't want ALL paragraphs to be yellow, just these three...)
• unlike an id, a class can be reused as much as you like on the page

CSS class selectors

.special {
	background-color: yellow;
	font-weight: bold;
}

• applies a CSS rule to any element that is part of the class special

p.standout {
	color: red;
	font-family: cursive;
}

• applies a CSS rule to only p elements that are part of the class standout

Multiple classes

<h2 class="standout">Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special standout">Satisfaction guaranteed.</p>
<p class="standout">We'll beat any advertised price!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

• an element can be a member of multiple classes (separated by spaces)

Sections of a page: <div>

a section or division of your HTML page (block)

<div class="standout">
	<h2>Spatula City!  Spatula City!</h2>
	<p class="special">See our spectacular spatula specials!</p>
	<p>We'll beat any advertised price!</p>
</div>

• a tag used to indicate a logical section or area of a page
• has no appearance by default, but you can apply styles to it

Inline 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
price</span>!</p>

• has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span

CSS context selectors

selector1 selector2 {
	properties
}

• applies the given properties to selector2 only if it is inside a selector1 on the page

selector1 > selector2 {
	properties
}

• applies the given properties to selector2 only if it is directly inside a selector1 on the page (selector1 tag is immediately inside selector2 with no tags in between)

Context selector example

li strong { text-decoration: underline; }

<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>

Shop at Hardwick's Hardware...

• The best prices in town!
• Act while supplies last!

More complex example

#ad li.important 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>

Shop at Hardwick's Hardware...

• The best prices in town!
• Act while supplies last!

CSS properties for backgrounds

• background-color : color to fill background
• background-image : image to place in background
• background-position : placement of bg image within element
• background-repeat : whether/how bg image should be repeated
• background-attachment : whether bg image scrolls with page
• background : shorthand to set all background properties

background-image

body {
	background-image: url("draft.jpg");
}

• background image/color fills the element's content area

background-repeat

body {
	background-image: url("draft.jpg");
	background-repeat: repeat-x;
}

• can be repeat (default), repeat-x, repeat-y, or no-repeat

background-position

body {
	background-image: url("draft.jpg");
	background-repeat: no-repeat;
	background-position: 370px 20px;
}

• value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.
• value can be negative to shift left/up by a given amount

Showing a partial image

.partialimage1, .partialimage2 {
	background-image: url("sex_and_the_city.jpg");
	background-repeat: no-repeat;
	width: 70px;   height: 200px;
}
.partialimage1 { background-position: 0px 0px; }
.partialimage2 { background-position: -115px 0px; }