Welcome to Metaphor Man's
Web Tutor
An HTML Workshop for Beginners and training ground for Hand Coding Enthusiasts
By Alain Lareau - Copyright © 2009

Web Site Development

Lesson 2.4
META tag attributes - StyleSheet CSS - Other Tags in the Head

Notes for Head: ,, showcase the first bit of HTML code for this page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

The above should reenforce what you have already covered. This lesson will use a page that is 'narrative' of its own construction. This will help you decide which direction you would like the 'lesson plan' to point. You have covered a broad range of things thus far. There is a lot more to say about list and tables. We have just begun to cover images and not yet covered audio or video. You should be ready to tackle stylesheets full blast and take a peek at JavaScript, and we haven't yet covered 'frames'. We can talk about web sites that help kids build websites, web sites that help adult build web sites for kids, HTML that helps students, or HTML that helps small business owners. The chore of revamping web sites in older HTML versions should be in the venue as well. Let's narrate. What have we set up so far?

The lid CAP in the top left corner - skip, not part of the lesson
A block section containing text [font-size: 42pt] in div tags, in-line style, [font-size: 10pt] in span tags
A 2nd section containing a little menu by means of paragraph tag [p id="menu"] style set in head,
both also not part of the lesson
FOR THIS LESSON's focus
an H1 header [ in head style, h1, h2, h4 { color: black; text-align: center }]
an H2 header [ in head style, same as above]
an H5 header [ in head style, h5 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
color: #336600; margin-left: 5em; margin-right: 5.5em; padding-left: 6.5em; background-color: #ffcc66 }]
a pre-formated block - depicting HTML5 DTD & associated conventions
paragraph section with class designation [show], style set in head
paragraph section with class designation [intro], style set in head
This Unordered List [ in head style, ul { color: blue; font-size: 14pt; text-align: center }]

Method plus Design Notes and Pre-formated examples of Style rules

(class=lesson) ,,. this paragraph,
As just described, we have an H1 header, an H2 header, an H5 header, a Pre-text block, followed by two paragraphs each with new style rules applied (class=show) (class=intro), the unordered List in blue then a second H5 header followed by this paragraph in black that is again different from the other paragraph in black by virtue of a different margin rule [p.lesson{ }].
For the next few 'block items' i.e. <p> tags, I will indicate the class rule controlling that/this ELEMENT/OBJECT by prefacing it with a label in parenthesis.
So now using 'pre' tags this page's style is depicted in brown.

Do not overlook the body style rule. This sets a default ( or should we say 'changes the default ) for general text font face and color when not otherwise specified.
You should learn to do all, or most, of the things you did in the HTML <body> TAG
in the body rule listed in the style list between the < style > TAGS instead,
except the background image. Continue to use an attribute in a tag for that.

<style type="text/css">
body {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: purple;
  background-color: #ddddee }
h1, h2, h4 { 
  color: black;
  text-align: center }
h5 {
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  color: #336600; 
  margin-left: 5em;
  margin-right: 5.5em; 
  padding-left: 6.5em; 
  background-color: #ffcc66 }
pre {
  margin-left: 11.75em;
  font-family: monospace;
  color: brown }
new stylesheet rule -
p.show { font-weight: bold }
new stylesheet rule -
p.intro {
  font-size: 14pt; 
  margin-left: 8em; 
  margin-right: 8em; 
  text-align: left; 
  color: #334455 }
p.lesson {
  font-size: 14pt; 
  margin-left: 5em; 
  margin-right: 5em; 
  text-align: left; 
  color: #334455 }
new stylesheet rule -
pre span {
  margin-left: -11.25em; 
  color: green }
...
</style>
<base href="http://www.w3schools.com/tags/>

(class=intro)
Notice the negative value, there is a hereditary principle employed between ELEMENTs with a parent and child relationship. To make the green text set with the 'span' tag swing to the far left you must reference the fore set margin of the 'parent' ELEMENT.

(class=show)
pre { margin-left: 11.75em }
pre span { margin-left: -11.25em }

Do you notice that Times New Roman is wrapped in quotes? This is only needed if the font face name is more than one word, otherwise separating the font face names by commas is fine.

body { font-family: Georgia, "Times New Roman", Times, serif }
h5 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }

Take note of the orange bar which is the 'H5' ELEMENT and has been assigned with values for background color, margin and padding.

h5 { margin-left: 5em; margin-right: 5.5em; padding-left: 6.5em; background-color: #ffcc66 }

Other tags used in the Head section

One of the important uses of the 'base' tag fits in with what was showcased before in lesson 1.4 that the 'href' values for the URL's in the 'anchor' tag can be shortened. If a URL is made reference in the base tag any 'anchor' tags with abbreviated 'href' values will fill on the value in the 'base' tag. Using this can be a great time saver and we will have more to say about the 'base' tag.

The 'link' tag can be use to set many external references for the page haul in for it self. Yes that is a good way the phrase it 'Haul In' as one tag can do more than one thing and more than one 'link' tag can be used. For your purposes now, know that your StyleSheet can be 'external' and sit in a file that can be used by many HTML pages. Changing something in the .css file you store on your server can change all published pages that reference that StyleSheet.

JavaScript code can reside in the head section and operate on the loading of the page, be 'Hauled In' with the 'link' tag, or JavaScript can be set in-line in the body section. There are more types of 'script' than JavaScript but for now we can prepare to use JavaScript by helping you understand the DOM ( Document Object Model ).

Meta tag uses and attributes

You have seen this code in 'meta' tags and I think you know what to do with these.

(class=list)
name="author" content=
name="description" content=
name="keywords" content=

You also have seen the 'meta' tag employed to have the browser render the text to a Character Set and you know about the HTML 5 shorthand used with an allowed new attribute.

The http-equiv attribute is a special fish I think we should get at later, but for now please remember that when it is used the attributes 'http-equiv="- - -" ' and 'content="- - -" ' must come in pairs as below.

Attribute	Value	Description
charset New	character_set	Specifies the character encoding for the HTML document
content	text	Gives the value associated with the http-equiv or name attribute
http-equiv	content-type default-style refresh	Provides an HTTP header for the information/value of the content attribute
name	application-name author description generator keywords	Specifies a name for the metadata
scheme	format/URI	Not supported in HTML5. Specifies a scheme to be used to interpret the value of the content attribute
the meta tag also supports HTML Global Attributes <- -- Give a visit to W3 Schools ;-)

CSS Cascading Style Sheets

Update your template

<!DOCTYPE html> for html 5
<html lang="en">
<head>
<title>THIS SHOWS IN TOP BLUE BAR</title>
<meta charset="UTF-8">
<meta name="- -" content="- -">
<meta http-equiv="- -" content="- -">
<base>
<link>
<style type="text/css">CSS</style>
<script>JavaScript</script>
</head>
<body>
<div>
</div>
<p>PAGE
<br>
DISPLAY</p>
<hr>
</body>
</html>

The Cascading Style Sheet is a list of assigned attributes, that is attributes to tags that are compiled in one file ( saved with .css extension ). When working with CSS / Style these attributes are referred to as properties and the general statement in the code are called Style Rules.
If the StyleSheet resides on the page in the HTML Head, wrap it in "Style" tags, <style></style> if it sits in a file of it's own in a folder at the Server then no need for the tags.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lesson 3</title>
<meta charset="UTF-8">
<meta name="- -" content="- -">
<meta http-equiv="- -" content="- -">
<base href="http://www.w3schools.com/" target="_blank">
<link rel="stylesheet" type="text/css" href="*">
<style rel="stylesheet" type="text/css">CSS</style>
<script>JavaScript</script>
</head>

List of style rules used on this page and
some crried from previous lessons

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: purple;
  background-color: #ddddee }
h2, h4 { 
  color: black;
  text-align: center }
h5 {
  font-family: Helvetica, Geneva, Arial, sans-serif;
  color: #00b899;
  margin-left: 5em ;
  margin-right: 5em ;
  background-color: #ffcc66 }
p.lesson {
  font-size: 14pt; 
  margin-left: 5em ;
  margin-right: 5em ;
  text-align: left ;
  color: #334455 }
p.list {
  font-size: 14pt; 
  color: #cc0033; 
  margin-left: 6em ;
  text-align: left }
p.show { font-weight: bold }
b {
  font-size: 10pt; 
  color: blue } 
pre {
  margin-left: 12em;
  font-family: monospace;
  color: brown }
table.ref {}
table tr td pre {
  margin-left: 2em; 
  margin-right: 2em }
table tr td p.list{
  margin-left: 3em; 
  margin-right: 3em }

Subsuming

General

Sectional

Specific

Micro-specific

I will discontinue showing you templet code this way. Better display of code can be had with the "Pre" tag (that stands for preformat) see below, this will look more like the stuff you should copy and paste. Below that, see the "StyleSheet" carry-over from Lesson 2

CSS Cursors

With CSS you can specify a particular cursor that should appear when hovering over an element. That is you can apply atributes to tags that defife curor responce.

Default cursor icons are usually a skewed arrow, an "I" icon that appears when selecting text, and an hourglass.

<html>
<head>
<style type="text/css">

p { cursor: wait; }
h1 { cursor: help; }
h2 { cursor: crosshair; }

</style>
</head>
<body>
<p>
This cursor will show the "wait" icon 
when you hover over this paragraph.
</p>
<h1>
This cursor will show the "help" icon 
when you hover over this heading.
</h1>
<h2>
This cursor will show the "crosshair" 
when you hover over this heading.
</h2>
</body>
</html>

List of style rules to demostrate much
of what style can manipulate

body {
   padding-left: 11em }
ul.navbar {
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: absolute;
   top: 2em;
   left: 1em;
   width: 9em }
ul.navbar li {
   background: white;
   margin: 0.5em 0;
   padding: 0.3em;
   border-right: 1em solid black }
ul.navbar a {
   text-decoration: none }

Some rules for the anchor tag

a:link { color: blue }
a:hover {
   color: red;
   background: cyan }
a:visited { color: purple }
a:active { color: rgb(255, 0, 102) }
- -
a.plain { text-decoration: none }

Which would suppress underlining for a link
by assigning a class selector in the anchor tag (class="plain"), such as, this is not underlined,
to make it work I must add
this rule to the style of this page.

Here is an example of shorthand

blockquote { 
   margin: 1em 0em 1em 0em } 
(or) {
   margin-top: 1em;
   margin-right: 0em;
   margin-bottom: 1em;
   margin-left: 0em;
   background: #EDB;
   padding: 0.5em;
   font-style: italic }
 
address {
   margin-top: 1em;
   padding-top: 1em;
   border-top: thin dotted }
   
h1 { font-weight: bold }
h2 { font-weight: bold }
h3 { font-weight: bold }
 
h1, h2, h3 { font-style: bold; text-align: center }
 
h1 {
   font-size: 36pt;
   font-family: serif;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   line-height: normal }
 
h2,h3,h4,h5,h6 { margin-left: -4%; }
 
h2.subsection { margin-top: 8em; margin-bottom: 3em; }

Other approches

p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
 
h2 { text-transform: lowercase; }
 
em { font-style: italic; font-weight: bold; }
 
strong { text-transform: uppercase;  font-weight: bold; }
 
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
 
body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }
pre { font-family: monospace; }
 
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
 
div.box { border: solid; border-width: thin; width: 100%; }

Note that without the "width" property some browsers will place the right margin too far to the right.

This can then be used with markup such as:

<div class="box">
The content within this DIV element
will be enclosed in a box with a thin line around it.
</div>

div.color {
   background: rgb(204,204,255);
   padding: 0.5em;
   border: none }
p.changed {
   padding-left: 0.2em;
   border-left: solid;
   border-right: none;
   border-top: none;
   border-bottom: none;
   border-left-width: thin;
   border-color: red }

Move your cursor to the left, over the words ' 'style' ' to see the effect.

style="cursor: default;"