CSS+-+Internal

Well, the style attribute was okay, but you may have noticed it did not make anything much easier than it was to use several html tags. Well, now we are going to see a method of using style sheets that will begin to make life a little easier because you won't have to write the same thing numerous times on one page to get the effect you desire.

To do this, we are going to declare a style inside the head section of the page. A style in the head section must begin with the  tag and end with the  tag. Below is an example that declares the style for the tag in the head of the document. (The SPAN tag is a division in a page. It won't break to the next line after you close the tag, like the DIV tag does) :  

 



 

 

 The whole thing begins with the  tag. Right after the STYLE tag you will notice that we begin an html comment. This hides the contents of the STYLE tag from browsers that do not recognize it, so it won't be printed on your page.

 Now you see this line: <span style="background-color: #ffffff; font-family: Arial,sans-serif;"> SPAN { color:red; font-style:italic }

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"> This line declares that every time you use the tags in your page, the text between the tags will be red and italic. Notice you do not use the less-than "<" or greater-than ">" signs around the SPAN declaration. Also, rather than using equal signs or quote marks, we place the style properties inside two curly brackets { } to declare the style properties. The properties are each separated with a semicolon.

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"> Now that you have that in your head section, you can just use the tags to make yur text red and italic, rather than writng out two tags for it each time you need the effect:

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"> I am red and italic, but I am not. <BR>

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"> I am red and italic too!

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"> This will give you the following: <span style="background-color: #ffffff; font-family: Arial,sans-serif;"> I am red and italic, but I am not.

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"> I am red and italic too!