Library tutorials & articles
Using Cascading Style Sheets (CSS)
Priority of Styles
Styles may be specified in an external document, within the HTML document's <head> region, and inside an HTML tag. More than one style may be specified for an HTML tag, in which case the order of priority is important.
Priority of Styles
A style defined in an HTML tag takes precedence over styles defined in the head of the HTML document. Similarly, styles defined in the head of the HTML document take precedence over styles defined in an external style sheet.
The following style sheet is used to define the <p> tag in the examples
below.
mystylesheet.css
p
{
color:#f00;
background:transparent;
}
Example 1
In the following example, the definition of the <p> tag within the HTML
document will take precedence above the definition of the <p> tag defined
within the <head> of the HTML document and the definition of the <p> tag
defined in the external style sheet.
example1.html
<html>
<head>
<title>Title for this Page</title>
<link href="mystylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p
{
color:#0f0;
background:transparent;
}
</style>
</head>
<body>
<p style="color:#00f;background:transparent;">Blue Text</p>
</body>
</html>
Example 2
In this example, the definition of the <p> tag defined within the <head> of the HTML document will take precedence over the definition of the <p> tag defined in the external style sheet.
example2.html
<html>
<head>
<title>Title for this Page</title>
<link href="mystylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p
{
color:#0f0;
background:transparent;
}
</style>
</head>
<body>
<p>Green Text</p>
</body>
</html>
Example 3
This example uses the definition of the <p> tag defined in the external
style sheet.
example3.html
<html>
<head>
<title>Title for this Page</title>
<link href="mystylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Red Text</p>
</body>
</html>
Example 4
This final example doesn't specify a style for the <p> tag, so the default
style of the browser will be used instead.
example4.html
<html>
<head>
<title>Title for this Page</title>
</head>
<body>
<p>Default Browser Text</p>
</body>
</html>
Priorities With the Anchor Element's Pseudo Classes
When specifying styles for the anchor element's psuedo classes, order is important. When you define styles for the same elements, the styles for that element are combined. When there are conflicting styles, the latest one overrides previous definitions of the style (which is inkeeping with the cascading concept, and true for all elements). The least significant style should be written first, and the most significant style written last. With the anchor element, this would be link, visited, hover, then active. If you define a basic style for the anchor element, it should be positioned before the pseudo classes.
I'm available for contract work. Please visit Juicify for details.
Related articles
Related discussion
-
Create this kind of website
by maidentv (1 replies)
-
$200 Website Design and Development
by manypeopledesign (1 replies)
-
Dallas Interactive Marketing & Internet SEO SEM October Meetup
by dsafmx (4 replies)
-
Contract: ActionScript/FlashBuilder Developer
by mattmeigs (2 replies)
-
Can I design web site by using ASP.net
by pradeepfusion (1 replies)
Related podcasts
-
Despise the listener
We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.
Events coming up
-
Nov
23
Dan Cederholm Workshop
London, United Kingdom
Handcrafted Bulletproof CSSwith Dan Cederholm of "Simplebits"Learn how craftsmanship can apply to the intangibility of web design. Dan Cederholm will guide you though a case study, pointing out the details that matter most when designing fle...
This is a good tutorial as it covers the basics.
Nevertheless, readers should know that CSS can be taken to the extreme and should know the other side of the story in regards to fully integrated CSS.
One of the points to always remember in any technology is the K.I.S.S. principle.
Tables versus fully CSS (i.e. replacing all table tags with div tags)
http://www.decloak.com/Products/Dreamweaver/NestedTemplates/TablesOrLayers.aspx
This thread is for discussions of Using Cascading Style Sheets (CSS).