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

7. Text

8. Text links

9. Image links

10. Borders

11. Containers (DIVs)

12. Simple Containers (DIVs)

13. A DIV inside a DIV

14. Container as rows or columns

15. Two columns

16. Three columns

17. More Tools for css

18. Validating and checking the code

19. Creating a site

20. Working with backgrounds: single DIV background page

21. Working with backgrounds:
multiple DIV backgrounds

Bookmark this 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

 

Go to next page

 

 

Tutorial: External Style Sheets

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK