CSS TUTORIAL
CSS ID
In the previous example we saw, how we could use styling to alter the way a webpage is rendered. We used the styling to change the way an existing element is rendered. What if we wish to apply different setting to different section of the html content. Take a look at the following example, in which two paragraphs have been rendered in different ways using traditional methods.
<html> <head> </head> <body> <p align ="center"> <font color="red" size="25px"> This is some header</font> </p> <p> <font color="blue">This is some blue blue text from Reference Designer</font> <p> </body> </html> |
This is some header
This is some blue blue text from Reference Designer
You may like to try this code using online tool here
Here is the section of the code that accomplishes it. Notice that there are two two selectors this time. The
<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
font-size:25;
}
#alt
{
color:blue;
text-align:left;
font-size:100%;
}
</style>
</head>
<body>
<p>This is some Header</p>
<p id=alt>This is some blue blue text from Reference Designer</p>
</body>
</html>
|
You may like to try this code using online tool here
Explanation
It is possible to include the CSS styling inside the html page. For the moment we will focus on the CSS styling inside the page itself.
We have defined two styles selector here - one is p and another one with an id selector defined as #alt. And id selector is used to specify a style of one single element.
The id selector is defined with a "#".In the above example the style rule for the second paragraph will be applied to the element with id="alt":
