CSS Division
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section)
- Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
Division
<Div> tag is standard HTML tag mostly used in CSS to divide the piece of code using class / id etc.
Example -
<!DOCTYPE html>
<html>
<head>
<title> CSS with Style </title>
<style type = "text/css" >
.red
{
color:red;
}
.large{
font-size:250%;
}
.underline
{
text-decoration:underline;
}
#first-section
{
color:brown;
font-size:150%;
background-color:pink;
width:90%;
}
.underlined
{
text-decoration:underline;
font-size:120%;
color:green;
}
#second-section
{
background-color:yellow;
width:200px;
}
</style>
</head>
<body>
<div id= "first-section">
<p> The quick brown fox jumped over the lazy dog.</p>
<p> Wow this is awesome </p>
</div>
<div id= "second-section">
<p class="red"> This is some more text and <span class="underlined"> this text is underlined.</span></p>
<p><h1 class="red"> CSS is cool </h1></p>
</div>
</body>
</html>
output
The quick brown fox jumped over the lazy dog.
Wow this is awesome
This is some more text and this text is underlined.
CSS is cool
More about the colors:
Here the color:"red" is used for text color , while color-background: "yellow" is used for background color
Comments
Post a Comment