include "../_i/1.h"; ?>
At the dawn of the WWW, web pages typically contained a mix of tags/attributes that specify:
<h1>
, or <p>
and <font color='#446677' font-family='Times Roman'>
or <p align='center' >
But nowadays there is broad consensus that the distinction between these two tasks of markup should be as strict as possible:
HTML tags should be used only to mark up the logical units of meaning (semantic structure, or functional structure) of your document.
CSS rules are what we'll use to specify the details of the appearance (or presentation) of the document
There are immediate benefits of separating content from presentation: One set of style rules can be linked to from many web pages to cause, for example, all level 1 headlines to appear in precisely the same font and size. And you can later on decide to change the font and size of all the level 1 headlines of your entire website in one place (instead of many).
Is the <b>
tag semantic or presentation markup?
Add the following code to your test web page, just before the </head>
tag:
<style type="text/css"> h1 { color: #ff0000; font-family: Arial, Helvetica, sans-serif; } </style>
Re-load your page in your browser to see the effect (red, sans-serif font) on your headline.
h1 { color: #ff0000; font-family: Arial, Helvetica, sans-serif; }
h1
is a selector.
color: #ff0000;
is a style
rule.
color
is a style name and #ff0000
is a style
attribute.
Here's Paul's abridged CSS reference.
But instead of using a <style></style>
section, more
often it's useful to put all of our styles in a separate text file (conventional
extension .css) - a 'stylesheet' -- and then link to the rules
with this tag in the <head></head>
section:
<link href='sitelook.css' rel='stylesheet' type='text/css' media='all' />
Now, many pages can all refer to just one file, and thus get consistent presentation at the drop of a hat.
So far, the only style rule we've seen has been applied to a particular tag. There's a way to define a reusable collection of style rules called a class by using the "." selector like this:
.wildtype { color:#66CC00; /* an obnoxious green */ font-family: Comic Sans, Comic Sans MS; /* See http://www.bancomicsans.com/ */ }
Apply it:
<h4 class='wildtype'>My crazy summer</h4> <p>Here's some <span class='wildtype'>wild and crazy</span> text</p> |
My crazy summerHere's some wild and crazy text |
#homework { background-color: #FFFFCC; font-size: 3.0em; }
Applying it:
<h4 id='homework' class='wildtype'>Homework</h4> <p>Write about your <span class='wildtype'>wild and crazy</span> summer.</p> |
HomeworkWrite about your wild and crazy summer. |
Remember how we used an id to mark a unique location (link anchor)? We could
jump to this location using some variant of href="#homework"
.
*
- used to style every last tag.
body
- container of all of our page content. Apply your default typography to this tag.
.myclass
- class with a name you decide on.
#myid
- id with a name you decide on.
p.wildtype
- just paragraphs of a particular class.
h1, h2, h3
- apply styles to more than one selector at a time.
Download this chapter from Don Quixote (a big chunk of html with little or no formatting) style things including (but not limited too) the font, the line height (leading), link colors, and headline treatment of a website whose typography you admire. I used an article at alistapart.org as a starting example, but you may choose a different site. Just send a link to the site along with your e-mail (below).
Your styles should be in a linked stylesheet not in the page itself.
Post your page on the GC webserver (in your mypages folder). Validate your page. E-mail Paul (paulmr@goshen.edu) the URL to your page.
Two CSS cautions:
width: 30em;
width: 30
em;
Read:
include "../_i/3.h" ?>