How HTML elements get their style properties and how CSS conflicts are resolved
<![CDATA[Here are seven ways that HTML elements get style properities.
In all cases we will use the _font-size_ property as an example.
You should be thinking about order-of-precedence in the examples below.
Order-of-precedence define how style-conflicts are resolved.
The cases below are listed from lowest (weakest) to highest (strongest)
order of precedence. I will touch more on this at the end, so no worries
if you don't understand what this order means yet.
For all cases, the external style sheet, "my_style_sheet.css",
is empty except for the lines shown.
In other words, the cases do not build off each other.
We also only consider the case of external style sheets. You could
embed an internal style sheet within the head tag of an HTML page,
but that is considered bad practice, from a maintenance and "seperation
of concerns" point of view.
Here is the HTML used by all the cases below. Note that line 3 calls
an external sstyle sheet. It assumes you created a sub-folder called
"css" and in that sub-folder created a file called "my_style_sheet.css"
<html> <!--Line 1-->
<head> <!--Line 2 -->
<link type="text/css" href="css/my_style_sheet.css" rel="stylesheet" />
</head>
<body>
<p id="First_Paragraph" class= "welcome">Hello</p>
<h1 id="First_Heading" class="welcome">Buen Dia</h1>
</body> <!--Line 8-->
</html> <!--Line 9-->
As you can see _id_ is a unique identifier. But several elements, even
different types of elements , can belong to the same class. Class and id
names can be anything you like.
Case 1: Nothing in my_style_sheet.css -> browser defaults
In this case "my_style_sheet.css" is an empty file. So the fact that
you stated a _class_ and _id_ on lines 6 and 7 doesn't matter.
Because _font-size_ isn't specified anywhere, the browser uses its
default settings. In this case
"Hello" font-size is 12px (?)
"Buen Dia" font-size is 16px (?)
Note, actual default values depend on the browser and the user's settings.
These values are not likely typical defaults and are just used for
illustration.
Case 2: Inherit style from parent element
Here's what's in my_style_sheet.css for case 2:
body {
font-size:14px;
}
because _p_ and _h1_ are children of _body_, they should inherit the
_font-size_
style defined for _body_. Meaning both
"Hello" and "Buen Dia" will be 14px.
Inheritance is tricky because in many cases you need to explictily declare
that a property is inhereted. You would do this for the child element and
not the parent.
Case 3: style defined for element
Here's what's in my_style_sheet.css for case 3:
h1 {
font-size:18px;
}
p {
font-size:10px;
}
Results:
"Hello" in 10px
"Buen Dia" in 18px.
Case 4: style defined by class
Here's what's in my_style_sheet.css for case 4:
.welcome {
font-size:14px;
}
In this case both
"Hello" and "Buen Dia" will be 14px
because they both belong to the welcome
class. Had the body had another h1 tag like:
<h1>Konichi Wa</h1> then that "Konichi Wa" would not be 14px (it
would be the default of 16px).
Case 5: style defined for element and class
Here's what's in my_style_sheet.css for case 5:
p.welcome {
font-size:10px;
}
h.welcome {
font-size:18px;
}
Results are
"Hello" in 10px
"Buen Dia" in 18px.
(FYI, same as Case 4 "Konichi Wa" would be 16px.)
Case 6: style defined by id
Here's what's in my_style_sheet.css for case 6:
#First_Heading {
font-size:18px;
}
Results are
"Hello" in 12px
"Buen Dia" in 18px.
"Hello" is 12px because that is the default.
And it is the default because you didn't specify it's
_font-size_ anywhere.
Case 7: In line style
Here's what's in my_style_sheet.css for case 6:
#First_Heading {
font-size:18px;
font-weight:normal;
}
And now lets suppose that Line 7 in the HTML reads the following way
<h1 id="First_Heading" class="welcome" style="font-size:24px;">Buen Dia</h1>
Now "Buen Dia" -- which by default is 16px and bold -- is 24px but NOT bold.
This goes back to the order of precedence mentioned earlier.
In this case the highest order of precendence is Case 7 -- "in-line style".
You can see there is a conflict between the inline style of 24px and the
external style sheet of 18px. In-line style always wins.
But in the case of _font-weight_, in-line style didn't specify anything but the
external style sheet states "normal".
One last point. The example's simplicity makes it silly to define
classes and id's. In this case you would have simply styled with
in-line style and be done with it. Also note that you can consolidate
similar styles for example
p {
font-size:14px;
}
h {
font-size:14px;
}
could be abbreviated as
p h {
font-size: 14px;
}
you can also mix classes, id's, and elements.
#First_Heading p.welcome body {
font-size:14px;
}
One extra last point, you can modify the style property using client-side
scripting. I personally use the jQuery JavaScript library for this purpose.
Here's an example: $("#First_Heading").css('font-size', '18px');
Scripting is outside the scope of this discussion.
Hope this was helpful
lp]]>
See also
