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

DIV inside DIV

Now try something tricky like putting a DIV inside a DIV. Create a container with a pink background and neon green text. Call it #container-example2.

Containers can also have borders, margins, and padding. Let's give this container a red border.

Try putting it inside your programs and seeing what it does.

 

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.

This container should have a pink background color with neon green text and a silly font. Everything written inside this container will have these attributes.

The blue container continues on.

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;
}

#container-example2
{
font-family: fantasy, "Courier New", Courier, monospace;
font-size: 32px;
font-weight: bolder;
color: Lime;
background-color: #FF69B4;
border: thick;
border-color: Red;
border-style: solid;
}

 

<!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 id="container-example2">
<p>This container should have a pink background color with neon green
text and a silly font. Everything written inside this container will have
these attributes.</p>

</div>
<p>The blue container continues on.</p>

</div>
</body>
</html>

Now a word about the DIVs inside the html. This is so simple it might be easily overlooked, however this is HUGELY important. The placement of the DIVs inside the html determines where they fall, which goes inside which and so on.

In other words, it is possible to have one or more DIVs within another DIV. Think of it as using parentheses within parenthesis to differentiate a DIV subset within a master DIV expression.

Go to the next page

 

Tutorial: External Style Sheets

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