| 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
The CSS stylesheet for this page
HTML is a markup language.
Example:
The Harvard College Web site was re-organized and re-structured. The site moved away from most deprecated HTML elements and 'text as images' towards using CSS to control the presentation.
Results:
|
These links will display the same page |
|
However, implementation for CSS is limited by lack of full browser support AND the fact that many world viewers are still using older browsers. |
 |
|
WebReview (http://www.webreview.com/) has
excellent CSS resources available, which is authored by Eric Meyer.
WebReview
Style Sheet Reference Guide
WebReview CSS Master Compatibility Chart
WebReview CSS Leader Board |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
Properties are typically inherited from the parent. In the case of conflicting styles, the more specific rule applies (the rule that is "closer" to the content).
Other conflicts may arise between styles designed in link elements, imported style sheets, style elements, and style attributes. Again, the "closer" rule applies.
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title>My Favorite Teas</title> </head> <body> <h1>My Favorite Teas</h1> <p>Some of my favorite teas are:</p> <ul> <li>Golden Kenyan</li> <li>Sikkim Temi</li> <li>Oolong Silvertip</li> </ul> </body> </html> |
 |
For an XML document, you would create a rule for every element in the document.
Two parts:
h3 {color: green}
|
 |
h3 {color: green}
h1 {color: green}
h2 {color: green}
h3 {color: green}
h4 {color: green}
h5 {color: green}
h6 {color: green}
h1, h2, h3, h4, h5, h6 {color: green}
h1 {color: green}
h1 {text-align: center}
h1 {
color: green;
text-align: center;
}
h1 {
color: green; /* set color to green */
text-align: center; /* center align text */
}
<h1 style="color: green;">My Favorite Teas</h1>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>My Favorite Teas</title> <style type="text/css"> h1 { color: green; } </style> </head> <body> <h1>My Favorite Teas</h1> ... </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>My Favorite Teas</title> <link rel="stylesheet" type="text/css" href="teas.css"> </head> <body> <h1>My Favorite Teas</h1> ... </body> </html>
h1 { color: green; }
@import url(let-site.css) /* style sheet for my site */
/* below are local additions for the "Tea" document */
h1 { color: green; }
Import can also be used within the
<style> element of an individual document.
Following the xml declaration, add the CSS processing instruction
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="web_stylesheet.css"?>
Use the xsl:processing-instruction element to call the CSS file
<xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSK/Transform" version="1.0">
<xsl:template match="/">
<xsl:processing-instruction name="xml-stylesheet">
type="text/css" href="web_stylesheet.css" </xsl:processing-instruction>
The easy way...just adding the call with your other HTML code.
<xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSK/Transform" version="1.0">
<xsl:template match="/">
<html><head><title>Page Title</title>
<link rel="stylesheet"
type="text/css" href="web_stylesheet.css"> </head> <body>
<style type="text/css"> h1 { color: green; /* set color to green */ text-align: center; /* center align text */ } </style>NS 1 and IE2 will display the contents of the style element. "Hide" the display by enclosing within HTML comments:
<style type="text/css"> <!-- h1 { color: green; /* set color to green */ text-align: center; /* center align text */ } --> </style>
display:none lets you hide individual or groups of elements, specified text, or whatever. No trace remains of the hidden element in the browser window. There is no empty space.
description {display:block;}
announcement {display:none;}
date {display:inline;}
Certain HTML elements are defined in the HTML DTD as block level elements. Block level elements begin on a new line and any following element will also begin on a new line. You can define any element as block level if it fits your purposes.
h1 {display:block;}
ol {display:block;}
p {display:block;}
HTML elements are defined in the HTML DTD as inline type elements because they change the appearance but they appear directly after the preceding element. For example: bold, italic, typewriter text, font, etc. You can define any element as inline if it fits your purposes. Note: inline is the default if no declaration is made.
i {display:inline;}
code {display:inline; color:red; background-color:white;}
tt {display:inline; color:maroon; background-color:#ffffcc;}
Each element has a natural location in a page's flow. Moving the element with respect to this original location is called 'relative positioning'. Surrounding elements are not affected at all. The element requires a declared direction (top/right/bottom/left) and value - the desired distance that you want to offset the element from its natural location (Eg. 10pt, 3em, etc.)
big {display:block; position:relative;left:125px;}
Each element has a natural location in a page's flow. You can break this flow by declaring an 'absolute' position. This is a precise position relative to the element's parent. The element requires a declared direction (top/right/bottom/left) and value - the desired distance that you want to offset the element from its parent element (Eg. 10pt, 3em, etc.). The direction and value can be repeated for even more precise positioning. Note: Because absolutely-positioned elements are taken out of the natural flow, they may overlap other content. Also, browser support is weak and unpredictible.
strong {display:block; position:absolute; left:9px;}
Think 'layers'. Depth is the 3rd dimension. This should allow
you to control overlapping (sure!) .
- The higher the z-index number, the higher up the element will be
in the stack.
- Positive or negative integers are acceptable.
span.3d {display:block; position:absolute; left:9px; z-index:-1;
border:medium solid maroon; background-color:#f4f4f4; color:maroon;}
Then, in the HTML, you say <span class="3d">Yada, yada, yada</span>
You often have elements on your page that you want to be aligned in the same way. The vertical-align property may be your solution. Note: vertical-align can be applied only to inline elements.
| Options: | |
|---|---|
| baseline | Align element's baseline with the parent's baseline |
| middle | Align the middle of the element with the parent's middle |
| sub | Position the element as a subscript with respect to the parent |
| super | Position the element as a superscript with respect to the parent |
| text-top | Align the top of the element with the top of the parent |
| text-bottom | Align the bottom of the element with the bottom of the parent |
| top | Align the top of the element with the top of the tallest element on the line |
| bottom | Align the bottom of the element with the top of the lowest element on the line |
| [percent] | A % of the line-height of the element (may be positive or negative) |
td {display:inline; padding: 5px; vertical-align:top;}
th {display:inline; padding: 5px; vertical-align:top;
text-align:center; font-weight:bold}
You can set the height and width for most elements, including images, form components and even blocks of text. You can set width and height for several elements on the page at the same time. Caution: If you set these values as a percent, it is a percent of the parent element.
h2 {display:block; position:relative; left:125px; width:340px;}
You can create a border around any element, then set its thickness, style and color. Borders also enclose padding (if any). Caution: You can create more problems than solutions by overzealous use of borders.
Values:
options: border or border-top, border-bottom, border-left,
border-right
thickness: thin, medium, thick or absolute value (eg. 4px)
style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
color: any valid hex value or color word
h3 {display:block; border:medium dotted red;}
div {display:block; border-top:medium dotted red; border-left:thick solid red;}
p {display:block; position:relative; left:125px; width:340px;
border:thin solid red;}
More on Borders [W3 Schools]
Padding is extra space around the contents of an element. It can be useful when you want some extra whitespace for separation.
Options: padding or padding-top, padding-bottom, padding-left, padding-right
h3 {display:block; border:medium dotted red; padding:5px;}
big {display:inline; font-size: 14pt; padding-right:5px; padding-left:5px}
Without CSS you must futz around in order to get simple margins. With CSS it's easy.
Here are your options:
If there is only one value, it applies to all sides.
If there are 2 values, the 1st = top+bottom, 2nd = right+left.
If there are 3 values, the 1st = top, 2nd = right+left, 3rd = bottom.
If there are 4 values, they apply to the top, right, bottom, and left, respectively.
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
You can also set the four margins independently:
body { margin-left: 3em}
div.space { margin-top: 5em; margin-bottom:5em}
p.right { margin-right: 2em}
Browser support is spotty, but you can indicate specific page breaks to assure (?) nice printing.
hr {page-break-after:always;}
/* don't use both in the same sheet! */
hr {page-break-before:always;}
The rest of the document wraps around 'float'ing elements. The float direction indicates the side of the page on which the float element will sit. You can float left or right. [The trick to making things flow between elements is to always put the floating element directly before the content that should flow next to it.]
.note{
width: 33%;
text-align: left;
float: right;
font-size: .75em;
color: #006600;
background: #CCCCCC;
position: relative;
padding: 1em;
border-width: thin;
border-style: groove;
}
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
.wow {
color: magenta;
background: yellow;
font-weight: bold;
}
In HTML:
<p class="wow">This entire paragraph has the class of "wow"</p> <p>In this paragraph, only <span class="wow">this part</span> has the class of "wow".</p>
Rendered:
This entire paragraph has the class of "wow"
In this paragraph, only this part has the class of "wow".
ID attributes function silarly to class, BUT each ID must be unique to the document. IDs always begin with the pound sign (#).
In style sheet:
#abc123 {
color: blue;
background: yellow;
font-weight: bold;
}
In HTML:
<p id="abc123">This paragraph has a unique ID of "abc123".</p>
This entire paragraph a unique ID of "abc123".
li em {
color: magenta;
background: yellow;
font-weight: bold;
}
In HTML:
<p>Some of my <em>favorite</em> teas are:</p> <ul> <li>Golden Kenyan</li> <li>Sikkim Temi</li> <li>Oolong <em>Silvertip</em></li> </ul> </body> </html>
Some of my favorite teas are:
These replace the link, alink and vlink attributes of the <body> element.
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: none;
}
a:active {
background: red;
color: white;
text-decoration: none;
}
a:hover {
color: white;
background: blue;
text-decoration: none;
}
<div style="font-weight: bold; font-family: arial, helvetica, sans-serif; font-size: 1.25em; background: #CCCCCC; padding: 0.5em; text-align: center"> <a href="example.html" target="new">Home</a> |
. . .etc.. . .etc. </div>
|
You mean this was done with CSS? |
<div style="font-family: garamond, times, serif"> Garamond, Times, or serif</div> <div style="font-family: Arial, Helvetica, sans-serif"> Arial, Helvetica or sans-serif</div> <div style="font-family: Courier, monospace"> Courier or monospace</div> <div style="font-family: fantasy"> Fantasy (generic family)</div> <div style="font-family: cursive"> Cursive (generic family)</div>
| length | mm | cm | in | pt | pc | |
|---|---|---|---|---|---|---|
| absolute-size | xx-small | x-small | small | large | x-large | xx-large |
| relative-size | smaller | larger | ||||
| percentage | ||||||
<div>abc</div> <div style="font-size: 12pt">abc (12 pt)</div> <div style="font-size: 18pt">abc (18 pt)</div> <div style="font-size: 24pt">abc (24 pt)</div> <div style="font-size: xx-small">abc (xx-small)</div> <div style="font-size: x-small">abc (x-small)</div> <div style="font-size: small">abc (small)</div> <div style="font-size: medium"> abc (medium) <span style= "font-size: larger"> xyz (larger; parent is medium) </span> </div> <div style="font-size: large">abc (large)</div> <div style="font-size: x-large">abc (x-large)</div> <div style="font-size: xx-large">abc (xx-large)</div> <div style="font-size: 1.4em">abc (1.4 em)</div> <div style="font-size: 200%">abc (200%)</div>
font-style - value: normal | italic | oblique
font-variant - value: normal | small-caps
<div> <span style="font-variant: small-caps">When in the course of human events</span> it becomes necessary... </div>
<div><B>bold (B element)</B></div> <div style="font-weight: bold">bold</div> <div style="font-weight: 700">700 is bold<BR> <span style="font-weight: normal">normal<BR> <span style="font-weight: 400">400 is normal</span> </div>
|
Using an image to replace the bullets: <ul style="list-style-image: url(images/smallarrow.gif)"> <li>student organizations</li> <li>admissions and financial aid</li> </ul>
|
Same list with no bullets: <ul style="list-style-type:none"> <li>student organizations</li> <li>admissions and financial aid</li> </ul>
|
For lots more good stuff on lists, see Taming Lists by Mark Newhouse
<div style="text-align: left">We hold ... </div>
<div style="text-align: right">We hold ... </div>
<div style="text-align: center">We hold ... </div>
<p style="text-indent: 10%">We hold ...
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
<p style="text-indent: 2em">We hold ...
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
<p style="line-height: 1.8em">We hold ...
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
<p style="line-height: 0.8em">We hold ...
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
You can add or reduce space between letters ('kerning') or between words ('tracking'). You can also add a chunk of space, or an indent, before particular paragraphs. The value 'normal' returns things to the default.
code {background:#ffccff; color:maroon; letter-spacing:1em; text-indent:15pt} span.bold {font-weight:800; word-spacing:1em; letter-spacing:3pt; border:thin dashed green}
<span style=" font-variant: bold; font-size: 4em; width: 1em; float: left; font-family: Arial, Helvetica, sans-serif; ">W</span>e hold ...We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
See also the first-letter pseudo element.
Define the text case for your style with the text-transform property. You have options for initial caps, all caps, all lower case or as typed. Values are uppercase, lowercase, capitalize (first character of each word), or none.
em {font-style:italic; text-transform:uppercase;} i {font-weight:800; font-style:italic; text-transform:capitalize;
Instead of the <font> tag, use the color element to stipulate the color for your text, horizontal rules, form elements and/or tables, etc. Values are any of the 16 recognized color words, any hex color value or any rgb color value. Note: It is recommended that any time you set a foreground color, you also declare a background color.
p.special {display:block; color:magenta;} big {display:inline; color:#ccccff; font-size:200%;} small {display:inline; color:#ffffcc; font-size:80%;} td.emph {display:block; color:magenta; background:black; padding:5px;}
CSS lets you easily change the background color for any element, including snippets of text, a sentence, or a paragraph. Note: It is recommended that any time you set a foreground color, you also declare a background color. Declare 'transparent' if you you want the default to prevail.
p {font:10pt arial; background:#ffffcc}
span.highlight {font:10pt monospace; background:yellow; color:black;}
span.seethrough {font:10pt helvetica; background:transparent; color:magenta;}
Options:
repeat - tile the image both horizontally and vertically
repeat-x - tile the image horizontally only
repeat-y - tile the image vertically only
no-repeat - don't tile the image
background-attachment - fixed/scroll (background scroll with
canvas?)
body { background-image: url(images/logo.gif); }
Example 2
body { background-image: url(images/logo.gif);
background-repeat: repeat-y;
margin-left: 20%
}
Example 3 (How to mess up your page
- part 2)
body { background-image: url(images/logo.gif);
background-repeat: repeat-x;
background-attachment: fixed;
margin-left: 20%
}
Example 4
body { background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
margin-left: 20%
}
h2 {
font: bold 1.2em Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #990000
}
[ Slide 56 deleted ]
Hakon Wium Lie & Bert Bos, 1999. Cascading Style Sheets: Designing for the Web. 2nd ed. Reading (MA): Addison-Wesley. 396 p. |
Eric A. Meyer, 2000. Cascading Style Sheets: The Definitive Guide. Sebastol (CA): O'Reilly & Associates. 453 p. |
Many Web sites use Javascript to determine the system, browser and browser-version of the viewer, then serve-up the best stylesheet from their options.
Here's a sample and additional information.
