SQL PHP HTML ASP JavaScript articles and free scripts to download
HTML CSS

Different levels of CSS and the priority over each other

We will discuss different types of style property declared and there priority over others here. CSS gives flexibility in using different style property locally by overriding the global declared values or declared styles in external style sheet.
Let us start with Types of styles. Mainly there are three types

Inline style sheet Or embedded styles
Internal style sheet
External style sheet

We also have another two types of styles at the client end. One is user defined style and other is browser default style. Then the big question why so many types of style ? If more than one style is defined then which one will be followed? For this there is a priority level defined and based on this priority the styles property gets included.  

  1. User defined style
  2. Embedded or inline style sheet
  3. Internal style sheet
  4. External style sheet
  5. Browser default style
We can see here that out of the above list as a designer we have control over serial number 2,3 and 4. These three types of styles we will discuss more. Within these three ( Inline, Internal & External ) the priority order is first Inline, then Internal and last priority is given to external styles. This is the biggest advantage as we can override the global style property and define them locally. Let us start learning each of these three types of CSS.

Inline style

We add the styles within our HTML tags. This gets highest priority than Internal and external defined styles. Let us try to add a background style to one h4 tag.
<h4 style="background-color: #f1f1f1;">This is H4 tag</h4>

Internal Style

This type of style is defined inside the body tag of the page. The style defined here get priority over the external styles but before the Inline styles. Here is an example of Internal styles.
<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
<!--
p { 
 font-family: verdana, arial, sans-serif; 
background-color: #ffff00;
 } 
-->
</style>
</head>
<body >

<p> This is content and its style is defined 
within the internal style sheet</p> </body> </html>

External Style sheets

These styles are kept separately and called or linked from the required page. This is the syntax followed for linking a external style sheet.
<link rel="stylesheet" href="images/style.css" type="text/css">
The above tag is to be placed within the head tags of the page. We can keep our style details inside the file named style.css. Watch the linking of the file. The path details are to be given for including the style sheet.

Number of User Comments : 3


Google+
Nae04-07-2012
Prioroties..?
Santosh Rathod05-03-2013
good explanation about priority...
gautham.m thirumangalam16-04-2013
i have clearly know about this
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer