CSSE 290 Web Programming

Lecture 4: CSS properties and Selectors

Reading: 3.2 - 4.1

Attribution:Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. 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.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

CSS Text Properties

property	description
text-align	Alignment of text within its element (left, right, center, justify)
text-decoration	Decorations such as underline, overline, strikethrough
text-indent	Indents the first letter of each paragraph
text-shadow	A colored shadow near an existing piece of text
line-height, word-spacing, letter-spacing	Gaps between the various portions of the text
text-transform	Change text case to lowercase, uppercase, or capitalize
Complete list of text properties

Details of some of these on the next few slides

text-align

blockquote { text-align: justify; }
h2 { text-align: center; }

• Can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

text-transform

h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }

• Possible values for this property:
  lowercase
uppercase
capitalize
none
inherit

text-decoration

p {
	text-decoration: underline;
}

• Possible values of this property:
  overline
underline
line-through
  can do both underline and overline
  none
• Effects can be combined:

  text-decoration: overline underline;

text-shadow

p {
	font-weight: bold;
	text-shadow: -2px 5px gray;
}

• Shadow is specified as an horizontal-offset, a vertical-offset, and optional blur-distance and color

The list-style-type Property

ol { list-style-type: lower-roman; }

• Possible values:
  1. none : No marker
  2. disc (default), circle, square
  3. decimal : 1, 2, 3, etc.
  4. decimal-leading-zero : 01, 02, 03, etc.
  5. lower-roman : i, ii, iii, iv, v, etc.
  6. upper-roman : I, II, III, IV, V, etc.
  7. lower-alpha : a, b, c, d, e, etc.
  8. upper-alpha : A, B, C, D, E, etc.
  9. lower-greek : alpha, beta, gamma, etc.
  10. others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
• See also list-style-image, list-style-position, and list-style

CSS Properties for Backgrounds

background-image

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

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

background-repeat

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

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

background-position

body {
	background-image: url("images/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
  
• This section on backgrounds contains the last information in the slides that relates to Homework 1

Styling Tables

table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }

• All standard CSS styles can be applied to a table, row, or cell
• Table specific CSS properties:
  • border-collapse, border-spacing, caption-side, empty-cells, table-layout

The border-collapse Property

table, td, th { border: 2px solid black; }
table { border-collapse: collapse; }

• By default, teach cell in the table has a separate border
• The border-collapse property merges these borders into one

The rowspan and colspan Attributes

<table>
	<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td colspan="2">1,1-1,2</td>
		<td rowspan="3">1,3-3,3</td></tr>
	<tr><td>2,1</td><td>2,2</td></tr>
	<tr><td>3,1</td><td>3,2</td></tr>
</table>

• The colspan tag makes a cell occupy multiple columns; rowspan multiple rows
• The text-align and vertical-align CSS properties control where the text appears within a cell

Column styles: <col>, <colgroup>

<table>
	<col class="urgent" />
	<colgroup class="highlight" span="2"></colgroup>
	
	<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
	<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>

• col tag can be used to define styles that apply to an entire column (self-closing)
• colgroup tag applies a style to a group of columns (NOT self-closing)
• The CSS code forr the above example:

			.urgent {
				background-color: pink;
			}
			.highlight {
				background-color: yellow;
			}
		

Don't Use Tables for Layout!

• (borderless) tables appear to be an easy way to achieve grid-like page layouts
  • Many "newbie" web pages do this
• But, a table has semantics; it should be used only to represent an actual table of data
• Instead of tables, use divs, widths/margins, floats, etc. to perform layout

• Tables should not be used for layout!
• Tables should not be used for layout!!
• TABLES SHOULD NOT BE USED FOR LAYOUT!!!
• TABLES SHOULD NOT BE USED FOR LAYOUT!!!!
• They were designed for displaying data: browsers might change how they render, breaking your website
• They are difficult to maintain if you need to change the layout
• Hard for screen readers to understand

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, hidden)
• 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)

CSS3 New Features

• New selectors: nth-child, inline-block, :not, +
• Ability to embed fonts in a page
• Easy built-in support for multi-column layouts
  
• Transparency/opacity, color gradients, shadows
• Rounded corners/borders
• Animations and transitions
• Affine transformations (scaling, rotation, perspective)
• We will examine a few of these in detail later

Body styles

body {
	font-size: 16px;
}

• To apply a style to the entire body of your page, write a selector for the body element
• Saves you from manually applying a style to each element

Styles that Conflict

body { color: green; }
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

• When two styles set conflicting values for the same property, the latter style takes precedence
• Later we will learn about more specific styles that can override more general styles

Content vs. Presentation

• HTML is for content; what is on the page (heading; list; code; etc.)
• CSS is for presentation; how to display the page (bold; centered; 20px margin; etc.)
• Keeping content separate from presentation is a very important web design principle
• If the HTML contains no styles, its entire appearance can be changed by swapping .css files
• For amazing examples of what can be done with CSS, see: CSS Zen Garden

Cascading Style Sheets

• They're called Cascading Style Sheets because the properties of an element cascade together in this order:
  • Browser's default styles (reference)
  • External style sheet files (in a <link> tag in the page header)
  • Internal style sheets (in a <style> tag in the page header)
  • Inline style (the style attribute of an HTML element)

Inherited 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; }

• inheritance: Some style properties, when applied to an element, also apply to all of its descendants, unless overrident by specific style rules on the descendants.
• Not all properties are inherited (notice link's color above)
• How to tell whether a specific property is inherited?
See the w3schools description of that property, for example.

CSS pseudo-classes

a:link    { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }      /* visited link */
a:hover   { color: #FF00FF; }      /* mouse over link */

Motivation for Page Sections

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

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 can only be used once in the page
• Simply adding an id to an element does not change the page's appearance.
• Two main uses:
  • "Link to this specific part of the page" capability
  • Can apply style properties to this particular element

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 the style properties only to the HTML element that has the ID of mission
• Element can be specified more 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 many times as you wish on a page
• The addition of a class attribute to a tag does nothing until we use that class in CSS or in JavaScript code.

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 these style properties to any element with class special, and to any p element with class shout

Multiple classes

<h2 class="shout">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 in the HTML code)

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

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 div tag is used to indicate a logical section or area of a page
• A reminder of the CSS that is applied to the HTML code on this page:

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

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>

• A span has no onscreen appearance, but you can apply a style or ID to it, which will be applied to whatever is inside the span
• A reminder of the CSS that is applied to the HTML code on this page:

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

Recap: 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; }