DHTML Lab 3:
CSS1 (The STYLE tag with other elements)


In the previous Learning Lab we used the SPAN tag to change some text and background properties. We can do the same thing with ANY HTML TAG. The only difference is that the HTML general HTML keeps it's inherent properties and effects the parts of the document that the tag is intended for.

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red; }
B { color: blue; }

//-->
</style>
</head>
<body>

Here is <b>some text</b> to look at.

</body>


Preview the code.

You see, we can add properties to pre-existing HTML tags. In this case, all the text in the body is given the default color red. while every use of the BOLD tag <b> has blue text in it.

Of course, we may want to only have some of the bold text have the color blue. like the SPAN tag we can CLASSes to the HTML tags.

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red; }
B.blueone { color: blue; }

//-->
</style>
</head>
<body>

Here is <b>some text</b> to look at.

Here is some <b class=blueone>other text </b> to look at.

</body>


Preview it.

What happened? this time "some text" is bold but is default text color for the body, and the "other text" is blue and bold. We made a bold tag class by typing B.blueone.

We can also force the tags to be context dependent. For instance we may want bold text to be blue only if it's between some paragraph (<p>) tags. Try doing the following:

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red; }
P B { color: blue; }

//-->
</style>
</head>
<body>

Here is <b>some text</b> to look at.

<p>Here is some <b> other text </b> to look at.</p>

</body>


Preview it.

With the above style sheet everytime we use a <b> tag inside a <p> tag the text will not only be bold but blue. To make elements context dependent we simply list the elements on the same line seperated by a space then followed by property values.

If we put a comma between the elements then the property values will be used by all of the elements listed. For example do the following:

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red; }
P, B,I { color: blue; }

//-->
</style>
</head>
<body>

Here is <b>some text</b> to look at.

<p>Here is some <b> other text </b> to look at.</p>

here is some <i>italics text</i> to look at.

</body>




Now whenever we use the P, B, or I HTML elements, we get blue text.

Now that we know the syntax of stylesheets let's explore some more properties and practice using them. Background Properties

With stylesheets we can change the background color and image of any element. We will start our discussion by changing the background in the BODY element since it has the most dramatic effect. Just remember that you should try change the background in other elements like H1,P,B,FONT, etc. Okay now let's try the following:

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red; background-color:yellow }
P { background-color:blue; color:yellow}
//-->
</style>
</head>
<body>

<p>Here is some text in the paragraph tags.</p>

</body>


Preview it.

Now lets add a background image:

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red;
background-color:yellow;
background-image:url(http://www.useractive.com/raindrop.gif); }
P { background-color:blue; color:yellow}
//-->
</style>
</head>
<body>

<p>Here is some text in the paragraph tags.</p>

</body>


Preview it.

Here we simply declare we are using a background image and provide a url by using url(http://www.useractive.com/raindrop.gif); you can use any URL of course.



In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red;
background-color:yellow;
background-image:url(http://www.useractive.com/raindrop.gif);
background-repeat:no-repeat;
}
P { background-color:blue; color:yellow}
//-->
</style>
</head>
<body>

<p>Here is some text in the paragraph tags.</p>

</body>


Preview it.

Background-repeat can have three possible values, repeat-x,repeat-y, and no-repeat. By using the Backgound property, here is an even shorter way of doing the same thing:

In HTML mode, Type the following code into CodeRunner below:
<head>
<style type="text/css">
<!--

BODY { color: red;
background:yellow
url(http://www.useractive.com/raindrop.gif);
no-repeat;
}
P { background-color:blue; color:yellow}
//-->
</style>
</head>
<body>

<p>Here is some text in the paragraph tags.</p>

</body>



To Find More CSS Properties:
The complete list of CSS properties can be found at the UserActive CSS Reference

Since you now know the CSS syntax you should take some time now to go to the reference and explore the properties and experiment with some.


Importing Styles with an External CSS File

Suppose you've come up with a set of properties (style sheet) that you would like to apply to some or all of the other pages on your web site. From what we know so far we would have to copy and paste the styles into each page. This seems rather like a waste of space and time. Besides if we change our mind about some property we would have to change ALL of the pages one by one. External CSS files save the day for us. We can put all of the styles in to one file then link to it from some or all of our HTML files which will use that file to set the styles. Let's try it. First, clear the current text by selecting Edit -->Erase All

Make the following External CSS file. Name it mystyle.css:

In HTML mode, Type the following code into CodeRunner below:
BODY { margin: 2em 1em 2em 70px;
font-family: Arial, sans-serif;
color: darkred;
background-color: #e9e6d4;
}

P {background-color:white; font-family: Arial, sans-serif;}

H1, H2, H3 { text-align: left;
font-family: Tahoma, Verdana, "Myriad Web", Syntax, sans-serif;
font-weight: normal;
color: #0050B2;
}



Don't bother Previewing this, you won't see anything. Instead, SAVE this file as mystyle.css

mystyle.css will be the style sheet for the next HTML page. Select Edit -->Erase All again, and make the following HTML file:

In HTML mode, Type the following code into CodeRunner below:
<head>
<LINK rel="stylesheet" type="text/css" href="mystyle.css">

</head>
<body>

<h1>This is from an H1 tag</h1> <p>
You should save this file.
Then change something on the External
Stylesheet and reload this page to see
how it can save time.

</p>


Preview this page. Of course, it's problably not a style you would choose, but we are just learning. ;o)

If you are only making one file with this style then it doesn't pay to make an external style sheet, but if you are making many pages then an external styles file will save you much time, especially when you want to make small changes. To make style changes on many pages using this stylesheet you simply change the mystyle.css file and all of the other pages will change too!!

Borrowing External CSS From Others'

Suppose you really like someone else's style and they have their style definitions in an external CSS file. Here is how you can get a hold of their style code:

1). View the source of their HTML page. 2) Discover the name of the external CSS file. For example, mystyle.css 3) Figure out the full path to the file. For example, http://www.useractive.com/mystyle.css 4) Make a link on a web page directly to the file. 5) Open the web page and click on the link you just made. 6) Save the file. 7) go look at the file you just saved.

For example we have a mystyle.css file at http://www.useractive.com/mystyle.css make a link to it like so:

In HTML mode, Type the following code into CodeRunner below:
<body>

<a href="http://www.useractive.com/mystyle.css">click here</a>



</body>



Preview and click on the link.

This is the end of this lesson. You should take the time to play with what you've learned before going to the next lesson!!