In our last lesson we learned how to write a style statement and use one in an element on a page. Now we'll learn about style declarations and how to use them in a stylesheet.
When we use a style statement to define an element (tag), we get a style declaration.
Form: selector {property: value}
We already know about properties and values. The selector is just the element (tag) that we are setting a style for. Then the style statement for that element is placed in curly brackets.
Example:
body {background-color: black}
This declaration sets the background of a page to black.
Example:
body {color: white}
This declaration sets the color of all text on a page to white*.
Example:
p {color: blue}
This declaration sets the text for all paragraphs to blue*.
To use a declaration, it must go in a stylesheet. Your stylesheet may be embedded (internal) or an external file. A stylesheet is simple a collection of style declaratrions
An embedded (internal) stylesheet can be used for an individual web page. It goes in the head section. Let's set one up.
<style type="text/css">
style declarations go here
</style>
Even though this is a new concept, it is easy to figure out. We are simply saying, "Hey world, this is a CSS stylesheet for this page. This is where I declare what some of the elements for this page look like.".
We have one small problem. Some old browsers can't read a stylesheet, so they would render your declarations as if they were text and show them on your page - not good. We have to hide our declarations from these browsers. This is done with an HTML comment tag. Here is a "complete" embedded stylesheet setup.
<style type="text/css">
<!--
style declarations go here
-->
</style>
As I mentioned before, embedded stylesheets go in the head. The body still comes right after the head. Let's see what that looks like on a page.
<head>
<style type="text/css">
<!--
style declarations go here
-->
</style>
</head>
<body>
Now let's write some declarations for the body element. First let's replace bgcolor:
body {background-color: black}
(Use your own color.)
Now let's replace text:
body {color: white}
(Use your own color.)
Your declarations might look something like this:
body {background-color: black}
body {color: white}
HTML can only have one body tag. That is still true. CSS can have more than one declaration for the same element like the 2 elements in the code above. However we already learned that we can use more than one style statement in one element. We just separate the staements with a semi-colon. We can still use the 2 declarations above or we can make one declaration for the body element, like so:
body {background-color: black; color: white;}
Set up a stylesheet in the head section of a sampler page. Set the background color and text color for the body element, then remove those colors from the actual body tag. Ask as many questions as you need to. Post your page. Try to write all of your code yourself, but if you get stuck you may copy and paste the code below to get you started.
Our next lesson will discuss how to combine properties for any element.
Happy coding!
Gnubee
