Styles & Style Sheets
Ultimate Style Example. Courtesy of Zen Garden.
Internal 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);
}