Tutorial: External style sheets
Contents
1. Introduction & Tools
2. How external style sheets and html work together and what each does
3. Linking the html and the external style sheet
4. A bit about writing css in an external style sheet
5. Putting the css into the html code
6. Page body & page backgrounds
14. Container as rows or columns
18. Validating and checking the code
20. Working with backgrounds: single DIV background page
Simple Containers
Let's try writing a simple DIV (container) to change the font and background color of an area. Put in a width of 350 pixels. Call it #container-example1.
All of the code needed for the external style sheet and the html will be shown. Put it inside your programs and see how it looks.
Below is an example of this container with the text properties inside.
This container should have a dark blue background color with light blue text and a silly font. Everything written inside this container will have these attributes.
body {
background-color: White;
}
#container-example1
{
font-family: fantasy, "Courier New", Courier, monospace;
font-size: 32px;
font-weight: bolder;
color: #6495ED;
background-color: #00008B;
width: 350px;
}
It would be written like this inside the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>css tutorial - containers</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../tutorial-style.css"
media="screen">
<body>
<div id="container-example1">
<p>This container should have a dark blue background color with
light blue
text and a silly font. Everything written inside this container will
have
these attributes.</p>
</div>
</body>
</html
Tutorial: External Style Sheets
www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK