[an error occurred while processing this directive]

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

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

Exercise: Blog - Semantic Tags

Mark up our blog page from last lecture with the appropriate semantic tags. We already have appropriate tags for the content, what about the structure of the page itself.

3.1: Basic CSS

The bad way to produce styles

<p>
	<font face="Arial">Welcome to Greasy Joe's.</font>
	You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat 
	<font size="+4" color="red">OUR</font> prices!
</p>

Recall: Basic CSS rule syntax 

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

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

Cascading Style Sheets (CSS): <link> 

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

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

Exercise: Blog - CSS Sheet

Lets add a style sheet to our blog page!

CSS properties for colors 

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

This paragraph uses the style above.

property description
color color of the element's text
background-color color that will appear behind the element

Specifying colors

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

This paragraph uses the first style above.

This h2 uses the second style above.

This h4 uses the third style above.

CSS properties for fonts

property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties

font-family

p {
	font-family: Georgia;
}
h2 {
	font-family: "Courier New";
}

This paragraph uses the first style above.

This h2 uses the second style above.

More about font-family

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

This paragraph uses the above style.

font-size

p {
	font-size: 14pt;
}

This paragraph uses the style above.

font-weight, font-style 

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

This paragraph uses the style above.

CSS properties for backgrounds

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

Exercise: Blog - Styles

Add the following styles to our blog page:

Grouping styles

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

This paragraph uses the above style.

This h2 uses the above styles.

CSS comments: /* ... */ 

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

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!

Exercise: Blog - Styles

3.2: CSS Properties

CSS properties for text

property description
text-align alignment of text within its element
text-decoration decorations such as underlining
text-indent indents the first letter of each paragraph
text-shadow a colored shadow near an existing piece of text css3
line-height,
word-spacing,
letter-spacing 		gaps between the various portions of the text
Complete list of text properties

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.

text-shadow css3 

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

This paragraph uses the style above.

The list-style-type property 

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

Body styles

body {
	font-size: 16px;
}

Exercise: Blog - More Styles

Styles that conflict

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

This paragraph uses the first style above.

This heading uses both styles above.

Embedding style sheets: <style> (BAD!) 

<head>
	<style type="text/css">
		p { font-family: sans-serif; color: red; }
		h2 { background-color: yellow; }
	</style>
</head>

Inline styles: the style attribute (BAD!) 

<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

Content vs. presentation

Cascading style sheets

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

This is a heading.

A styled paragraph. Previous slides are available on the web site.

  • a bulleted list

CSS pseudo-classes

a:link    { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }      /* visited link */
a:hover   { color: #FF00FF; }      /* mouse over link */
Buy early, buy often!
class description
:active an activated or selected element
:focus an element that has the keyboard focus
:hover an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited
:first-letter the first letter of text inside an element
:first-line the first line of text inside an element
:first-child an element that is the first one to appear inside another
:nth-child(N) applies to every Nth child of a given parent

Exercise: Blog - Even More Styles

[an error occurred while processing this directive]