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

  1. Inline style sheet Or embedded styles
  2. Internal style sheet
  3. 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 after 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>
DEMO: Bold tag with change in Font size by Internal Style

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.

HTML CSS code Generator Advantage of CSS Links without Underline by style

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Nae

    04-07-2012

    Prioroties..?
    Santosh Rathod

    05-03-2013

    good explanation about priority...
    gautham.m thirumangalam

    16-04-2013

    i have clearly know about this
    Habib Mahomed

    30-03-2015

    I still do not understand why there are different levels of CSS!!!
    Seyed Jafar Mortazavi

    18-10-2018

    Hello all,
    As I was searching about this subject to write an article and I saw this article in my research, I would like to share my earned knowledge with you all. Hope it be useful for you.
    As the article is a bit long I sent it two or three posts.

    *** CSS types ***
    1. There are three types to inserting CSS which are called inline CSS, internal CSS and external CSS.
    2. An inline CSS inserts inside HTML element's start tag. To use inline styles, add the style attribute to the relevant element. The
    style attribute can contain any CSS property. An inline style may be used to apply a unique style for a single element.
    3. An internal CSS may be used if one single page has a unique style. Internal styles are defined within the <style> element,
    inside the <head> section of an HTML page.
    4. An external CSS can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved
    with a .css extension. External stylesheets are stored in CSS files.
    5. Use the HTML style attribute for inline styling. Use the HTML <style> element to define internal CSS. Use the HTML <link> element
    to refer to an external CSS file. Use the HTML <head> element to store <style> and <link> elements.
    *** other ways to style HTML element ***
    1. Except, three mentioned types of styling, there are three other ways which are called HTML presentational attributes style, user
    define style and browser default style.
    2. The HTML presentational attributes style is to style HTML tag with built-in element attributes. HTML presentational attributes
    comes in start tag exactly after tag's name.
    3. The user define style which is at client side.
    4. The browser define style which also at the client side.
    Seyed Jafar Mortazavi

    18-10-2018

    second part (final part):


    *** different styling priorities (HTML presentational attributes vs CSS properties) ***
    1. According to the types and ways of styling mentioned above, there are a priority level defined, and based on this priority the
    styling property gets included. styling priorities order is as follows:
    a. User defined style.
    b. Inline style sheet.
    c. Internal style sheet or External style sheet.
    d. HTML presentational attributes.
    e. Browser default style.
    2. There is a point in styling priority, which is waterfall attribute. It means if we define more than one style for any element,
    the lowest(undermost) defined style will override all it's previous styles properties.
    3. there is other point in styling priority, which is "!important" keyword. If we use "!important" keyword the style with the
    keyword, will prior to other styles.
    4. Waterfall attribute is executive when using "!important" keyword as well.

    04-02-2021

    The first priority is Inline CSS,
    The second One is Internal CSS,
    And The Third priority is External CSS.



    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer