CSE 190M Web Programming

Lecture 4: Page Sections and the CSS Box Model

Reading: 4.1 - 4.2; 4.4

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

CSS pseudo-classes

a:link    { color: red; }      /* unvisited link */
a:visited { color: green; }      /* visited link */
a:hover   { color: blue; }      /* mouse over link */

Cascading style sheets

• they are called Cascading Style Sheets because the properties of an element cascade together. The value of a particular CSS property for a given element is determined from these sources in ascending precedence:
  • browser's default styles (reference)
  • external style sheet files (in a <link> tag)
  • internal style sheets (in a <style> tag in the page header)
  • inline style (the style attribute of an HTML element)

Inheriting styles (explanation)

body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }

• when multiple styles apply to an element, they are inherited
• a more tightly matching rule can override a more general inherited rule
• not all elements inherit all properties (notice link's color above)

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="mission">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>

• allows you to give a unique ID to any element on a page
• each ID must be unique; can only be used once in the page

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="#mission">View our Mission Statement</a></p>

• 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

CSS ID selectors

#mission {
	font-style: italic;
	font-family: "Garamond", "Century Gothic", serif;
}

• applies style only to the paragraph that has the ID of mission
• element can be specified explicitly: p#mission {

The HTML class attribute

<p class="shout">Spatula City!  Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p>

• 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 {                   /* any element with class="special" */
	background-color: yellow;
	font-weight: bold;
}
p.shout {                    /* only p elements with class="shout" */
	color: red;
	font-family: cursive;
}

• applies rule to any element with class special, or a p with class shout

CSS for following examples

.special {
	background-color: yellow;
	font-weight: bold;
}
.shout {
	color: red;
	font-family: cursive;
}

• for the next several slides, assume that the above CSS rules are defined

Multiple classes

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

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

Style Specificity

<aside>
	<p>
		<em id="recent" class="awesome">The 5 stages of H.F.S.</em>
	</p>
</aside>

aside               { color: gray; }
p                   { color: green; }
em                  { color: yellow; }
.awesome            { color: blue; }
em.awesome          { color: red; }
#recent             { color: black; }
em#recent.awesome   { color: orange;}

When multiple styles apply to an element and have the same origin precedence. The most specific one applies. If they have the same specificity, then the later one will be used.

Sections of a page: <div>

a section or division of your HTML page (block)

<div class="shout">
	<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 grouping or area of a page often for layout purposes
• carries no significant semantic meaning
• 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="shout">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 (selector2 tag is immediately inside selector1 with no tags in between)

Context selector example

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

li strong { text-decoration: underline; }

More complex example

<div id="ad">
	<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
	<ul>
		<li class="important">The <strong>best</strong> prices!</li>
		<li>Act <strong>while supplies last!</strong></li>
	</ul>
</div>

#ad li.important strong { text-decoration: underline; }

The CSS Box Model

• for layout purposes, every element is composed of:
  • the actual element's content
  • a border around the element
  • padding between the content and the border (inside)
  • a margin between the border and other content (outside)
• width = content width + L/R padding + L/R border + L/R margin
  height = content height + T/B padding + T/B border + T/B margin
  • IE6 doesn't do this right

Document flow - block and inline elements

CSS properties for borders

h2 { border: 5px solid red; }

• thickness (specified in px, pt, em, or thin, medium, thick)
• style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)
• color (specified as seen previously for text and background colors)

More border properties

Border example 2

h2 {
	border-left: thick dotted #CC0088;
	border-bottom-color: rgb(0, 128, 128);
	border-bottom-style: double;
}

• each side's border properties can be set individually
• if you omit some properties, they receive default values (e.g. border-bottom-width above)

Rounded corners with border-radius

p {
	border: 3px solid blue;
	border-radius: 12px;
	padding: 0.5em;
}

• each side's border radius can be set individually, separated by spaces

CSS properties for padding

Padding example 1

p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }

Padding example 2

p {
	padding-left: 200px; padding-top: 30px;
	background-color: fuchsia;
}

• each side's padding can be set individually
• notice that padding shares the background color of the element

CSS properties for margins

Margin example 1

p {
	margin: 50px;
	background-color: fuchsia;
}

• notice that margins are always transparent
  (they don't contain the element's background color, etc.)

Margin example 2

p {
	margin-left: 8em;
	background-color: fuchsia;
}

• each side's margin can be set individually

CSS properties for dimensions

p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }

Centering a block element: auto margins

p {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}

• works best if width is set (otherwise, may occupy entire width of page)
• to center inline elements within a block element, use text-align: center;