Basic Styling with CSS
(and a bit more XHTML)

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 1, sections 1.3 - 1.5

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.

Valid XHTML 1.1 Valid CSS!

Recall: Basic CSS rule syntax

selector {
	property: value;
	property: value;
	...
	property: value;
}

p {
	font-family: sans-serif;
	color: red;
}

Attaching a CSS file: <link> 

<head>
	...
	<link rel="stylesheet" type="text/css" href="filename" />
	...
</head>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css"
href="http://www.google.com/uds/css/gsearch.css" />

CSS properties for colors

p {
	color: red;
	background-color: yellow;
}

This paragraph uses the style above.

Specifying colors

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

This paragraph uses the first style above.
This heading uses the second style above.
This heading uses the third style above.

Grouping styles

p, h1, h2 {
	color: blue;
}
h2 {
	background-color: yellow;
}

This paragraph uses the above style.

This heading uses the above style.

CSS properties for fonts

font-family

p {
	font-family: "Georgia";
}
h2 {
	font-family: "Arial Narrow";
}

This paragraph uses the first style above.

This heading uses the second style above.

More about font-family

p {
	font-family: "Garamond", "Times New Roman", serif;
}

This paragraph uses the above style.

  • if the first font is not found on the user's computer, the next is tried
  • generally should specify similar fonts
  • placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size

p {
	font-size: 14pt;
}

This paragraph uses the style above.

  • pt specifies number of point, where a point is 1/72 of an inch onscreen
  • px specifies a number of pixels on the screen
  • em specifies number of m-widths, where 1 em is equal to the font's current size

font-weight, font-style 

p {
	font-weight: bold;
	font-style: italic;
}

This paragraph uses the style above.

Spying on styles with Firebug

firebug firebug

Why <strong>, <em> and not <b>, <i>?

strong { font-weight: normal; color: red; }
em { font-style: normal; background-color: #DDDDDD; }

Now if I want to strongly emphasize something or just emphasize it, it doesn't necessarily have to be bold or italic.

CSS properties for text

text-align

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

The Emperor's Quote

[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

text-decoration

p {
	text-decoration: underline;
}

This paragraph uses the style above.

CSS comments: /* ... */

/* This is a comment.
  It can span many lines in the CSS file. */
p {
	color: red; background-color: aqua;
}

Body styles

body {
	font-size: 16px;
}

W3C CSS Validator

<p><a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a></p>

Valid CSS!

More XHTML elements

lists, quotations, and source code

Unordered list: <ul>, <li>

ul represents a bulleted list of items (block)
li represents a single item within the list (block) 

<ul>
	<li>No shoes</li>
	<li>No shirt</li>
	<li>No problem!</li>
</ul>

More about unordered lists

<ul>
	<li>Simpsons:
		<ul>
			<li>Homer</li>
			<li>Marge</li>
		</ul>
	</li>
	<li>Family Guy:
		<ul>
			<li>Peter</li>
			<li>Lois</li>
		</ul>
	</li>
</ul>

Ordered list: <ol>

ol represents a numbered list of items (block) 

<p>RIAA business model:</p>
<ol>
	<li>Sue customers for copying music</li>
	<li>???</li>
	<li>Profit!</li>
</ol>

RIAA business model:

  1. Sue customers for copying music
  2. ???
  3. Profit!
  • we can make lists with letters or Roman numerals using CSS (later)

Common Error: Not closing a list

<ul>
	<li>No shoes</li>
	<li>No shirt</li>
	<li>No problem!</li>

<p>Paragraph after list...</p>

Paragraph after list...

Common Error: Improper nested list placing

<ul>
	<li>Simpsons:</li>
		<ul>
		<li>Bart</li>
		<li>Lisa</li>
		</ul>
	</li>
	<li>Family Guy:
		<ul>
		<li>Peter</li>
		<li>Lois</li>
		</ul>
</ul>

The list-style-type property

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

Quotations: <blockquote>

a lengthy quotation (block) 

<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
	<p>
		Fourscore and seven years ago, our fathers brought forth
		on this continent a new nation, conceived in liberty, and 
		dedicated to the proposition that all men are created equal.
	</p>
</blockquote>

As Lincoln said in his famous Gettysburg Address:

Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

Quotations: <q>

a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>

Quoth the Raven, Nevermore.

We don't use " marks for two reasons:

  1. XHTML shouldn't contain literal quotation mark characters; they should be written as &quot;
  2. using <q> allows us to apply CSS styles to quotations (seen later)

HTML Character Entities

a way of representing any Unicode character within a web page

character(s)entity
< >&lt; &gt;
é è ñ&eacute; &egrave; &ntilde;
™ ©&trade; &copy;
π δ Δ&pi; &delta; &Delta;
И&#1048;
" &&quot; &amp;

HTML-encoding text

<p>
	<a href="http://google.com/search?q=marty&ie=utf-8&aq=t">
		Search Google for Marty
	</a>
</p>

&lt;p&gt;&
	lt;a href=&quot;http://google.com/search?q=marty&amp;ie=utf-8&amp;aq=t&quot;&gt;
		Search Google for Marty
	&lt;/a&gt;
&lt;/p&gt;

Practice Problem

Interaction Pane:

kitten 1 KITTENS! kitten 2

Why I love them:

  1. They are little.
  2. They make adorable sounds:
    • Meow!
    • Purr!
  3. JUST LOOK AT THEM!