CSS : Head Section
There is a method of using a style sheet that allows you to design a style appropriate to give effect as desired in the web pages. We will create a style in the head section which begins with the tag <style> and ends with the closing </ STYLE>. Below will be displayed <span> style in the document head. (SPAN is part of a web page. Next line SPAN would not be cut until the tag is closed):
<HEAD>
<style>
<! -
SPAN {color: red; font-style: italic}
->
</ STYLE>
</ HEAD>
Now give attention to :
SPAN {color: red; font-style: italic}
This line illustrates that every time you use the tag <SPAN> </ SPAN> in your pages, the text between the tags will be colored red and italics. Look above SPAN does not use a smaller sign "<" and greater sign ">".
Example:
<SPAN> I am red and italic,</ SPAN> but I am not. <BR>
<SPAN> I am red and italic too! </ SPAN>
Using Classes
Now you have to know the use of style in the head section. Now what do you do if you want the text in red and green colored text followed. All you need is to make a class so you can change the style. To create a class, you can go to the head section of the document and then click on the inside tag <STYLE> and </ STYLE>. You can create a class like this:
<HEAD>
<style Type="text/css">
<! -
. redfont {color: red}
->
</ STYLE>
</ HEAD>
Class names that we make is "redfont". Notice the "dot" before the name of the class. This tells the browser that this is not the definition of a class definition tags. After that we find the same style as we created earlier. So if you want a class that gives red paper and then displayed in green text, you can type:
<HEAD>
<STYLE Type="text/css">
<! -
. redfont {color: red}
. greenfont {color: green}
->
</ STYLE>
</ HEAD>
We now have a class that has been made, then how to make them work within the body section. To use this class we add a class = "". If you want a red colored text, you can add a class attribute with the tag <DIV>, such as:
<DIV Class="redfont"> I am red </ DIV>
If you want a red colored text and then follow the green you can write the following:
<DIV Class="redfont"> I am red </ DIV>
<DIV Class="greenfont"> I am green </ DIV>
Now you already know the class, we will use an ID. ID is used by writing the # before the name, just as the use of a point in class.
<HEAD>
<style Type="text/css">
<! -
# Redfont {color: red}
# Greenfont {color: green}
->
</ STYLE>
</ HEAD>
To use the ID, type ID = "."
<DIV ID="redfont"> I am red </ DIV>
<DIV ID="greenfont"> I am green </ DIV>
By using class and ID, you can begin to see what can be done style sheet for you. If you have a set of green colored text and you want to replace with the color green, you just need to change class definitions into greenfont in the head section.
0 comments:
Post a Comment