Styles & Style Sheets
Ultimate Style Example. Courtesy of Zen Garden.
Inline style attribute can be used to apply styles to a single element
<h1 style="font-size:500%; color:red;">Valley Town Hall</h1>Common units of measure for font size:
Internal (Embedded) Styles (Contained in the <head> )
Used for formatting in a SINGLE web page.
tag:
<style>
</style>
attributes:
type
generally type="text/css"
We also need to specify a default style sheet language for the whole document. To do so we use a meta tag placed within the <head>.
<meta http-equiv="Content-Style-Type" content="text/css" />
basic style sytax: <style type="text/css">
tag {property : value}
</style>
Example:
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title> style example </title>
<style type="text/css">
h1 {color: #ff00ff}
</style>
</head>
Other properties for various tags: text-align, font-size, font-style, font-family
Style classes:
Class is a type of sub-style
Syntax: tag.classname
Example:
<style type="text/css">
h1 {color: #ff00ff}
h1.color2 {color : #0000ff}
</style>
Then in the body
<h1> this is a sample of the new h1 color </h1>
<h1 class="color2"> this is a sample of h1 color 2 </h1>
External Style Sheets:
An external style sheet is simply a text-only file that contains only style definitions.
File is created in notepad and saved with a .css extension.
Linked to html file with a <link> tag in the <head>.
<link rel="stylesheet" type="text/css" href="filename.css">
Example of what may be defined in style sheet:
body
{
font-family: Garamond, Times New Roman, Times;
background-color: rgb(51,102,204);
color: rgb(255,255,153);
}
table
{
table-border-color-light: rgb(153,255,204);
table-border-color-dark: rgb(0,0,51);
}
h1, h2, h3, h4, h5, h6
{
font-family: Verdana, Arial, Helvetica;
}
h1
{
color: #ff00FF;
}
h2
{
color: #ff3300;
}
h3
{
color: rgb(0,255,204);
}
h4
{
color: rgb(255,204,0);
}
h5
{
color: rgb(153,255,51);
}
h6
{
color: rgb(0,255,204);
}
The sequence in which styles are applied
Cascading rules
The term "Cascading Style Sheets" refers to the fact that
more than one style sheet can be applied to a single web page. If two or more rules for the same property are
applied to the same element, the "cascade order"
determines which rule takes precedence:
!important rules precede normal rules precede default rules.
If rules have the same
cascade order, the last rule applied overrides the other
rules.
(1) On each page,
add the following two cryptic lines BEFORE the <html> tag:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd">
(2) There must be NO SPACE between : and the attribute value