Selectors Precedence Levels in CSS

Prerana Tiwari
10y
6.5k
0
0

Article

Introduction

This article exlains what CSS Precedence Levels are.

CSS Precedence Level

A CSS precedence level mainly defines the priority of CSS styles that CSS applys 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 the 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 applys 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