Selectors Precedence Levels in CSS

Introduction

This article explains what CSS Precedence Levels are.

CSS Precedence Level

A CSS precedence level mainly defines the priority of CSS styles that CSS applies to a specific element at the following three levels.

Inline styles
Embedded styles
External styles

Inline styles

Inline styles have the highest priority over the external style and external styles. Inline styles take priority over embedded styles and external styles. Inline-styles are applied directly to an element via the style attribute.

Code of Inline style

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My HTML Page </title>
</head>
<body>
<div id="Box" style="width:10px">
<div id="Table">
<h1>Best Company</h1>
<ul id = "list" >
<li> CSharpCorner</li>
<li> Norton India</li>
<li id="DebugCoder">DebugCoder</li>
<li>MCN Solution</li>
</ul>
</div>
</div>
</body>

Embedded styles

Embedded styles take priority over external styles. It has more priority in comparison to external styles and less than in inline styles. This type of style is applied only within the style tag, that goes in the head of your document.

HTML code of embedded style

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My HTML Page </title>
<style type="text/css">
h1 {
color: #f00;
}
</style>
</head>
<body>
<div id="Box">
<div id="Table">
<h1>Best Company</h1>
<ul id = "list" >
<li> CSharpCorner</li>
<li> Norton India</li>
<li id="DebugCoder">DebugCoder</li>
<li>MCN Solution</li>
</ul>
</div>
</div>
</body>

CSS code of embedded style

html {
}
body {
}
#Box {
color:#f00;
}
#Table {
}
#list {
}
}

External styles

External styles have less priority. It is a file with a CSS extension that is applied in the head of your document. Never remind that external files do not take priority over inline styles and embedded styles.

HTML code of external style

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My HTML Page </title>
<link href="StyleSheet.css" rel="stylesheet" />
<style type="text/css">
h1 {
color: #f00;
}
</style>
</head>
<body>
<div id="Box">
<div id="Table">
<h1>Best Company</h1>
<ul id = "list" >
<li> CSharpCorner</li>
<li> Norton India</li>
<li id="DebugCoder">DebugCoder</li>
<li>MCN Solution</li>
</ul>
</div>
</div>
</body>

CSS code of external sheet

html {
}
body {
}
#Box {
color:#00ff90;
}
#Table {
}
#list {
}

CSS precedence level of selectors

There are various types of CSS precedence levels of selectors.

ID selector
Class selector
Type Selector
Element Selector

ID selector

ID selector can be used to override all the selectors. The #id selector applies the styles to elements with a specific id. The #id selector can be supported in all browsers.

HTML code for ID selector

<div id="div1">
Hello
</div>
</body>

CSS code for ID selector

#div1{
font-size:32px;
color:#b200ff;
border: 2px solid gray;
}

Class selector

The class selector uses the HTML class attribute. It finds elements with the specific class that we define in a CSS file. The class selector can be used to find elements with a specific class followed by the name of the class.

HTML code for class selector

<body>
<div class="div1">
Class Selector
</div>
</body>

CSS code for class selector

.div1{
font-size:32px;
color:#b200ff;
border: 2px solid gray;
}

Element selector

The element selector selects an element based on the element name. The user can select all elements on a page using <p>.

HTML code for element selector

<body>
<div>
Element Selector Example 1
</div>
<div>
Element Selector Example 2
</div>
<div>
Element Selector Example 3
</div>
</body>

CSS code for element selector

div{
font-size:32px;
color:#b200ff;
border: 2px solid gray;
}

Child selector

The child selector can be used to match elements that are direct children of other elements.

HTML code for element selector

<div>
Element Selector Example 1
</div>
<div>
Element Selector Example 2
</div>
<div>
Element Selector Example 3
</div>

CSS code for element selector

div:first-child {
font-size: 32px;
color: #b200ff;
border: 2px solid gray;
}
div:last-child{
font-size:34px;
color:#ffd800;
border : 2px dotted gray;
}

Summary

This article provided an introduction to CSS precedence levels and also explained the CSS precedence level of selectors.