Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to decide the order of precedence of the style attributes in HTML?
In this article, we will be discussing how to decide the order of precedence of the style attributes in HTML. The use of the order of precedence in style attributes in HTML is important because it helps determine which style rules should be applied to an element when there are multiple styles defined. By following a specific order, you can make sure that the correct styles are applied and the desired visual design is achieved.
Approaches
We have two different approaches to deciding the order of precedence of the style attributes in HTML including the following −
Using the “Inline style attribute”
Using the “Internal style attribute
Using the “External style attribute”
Let us look at each step in detail.
Approach 1: Using the "Inline style attribute"
The first approach is to decide the order of precedence of the style attributes in HTML as “Inline style attribute”. It is defined within the opening tag of an HTML element using the "style" attribute. It is used when you want to apply a unique style to a single element rather than creating a separate CSS file.
Example
Following is an example to decide the order of precedence of the style attributes in HTML using the “Inline style attribute”.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Inline Style Attribute in HTML</title>
</head>
<body>
<h1 style="color: red; text-align: center;">Tutorials point</h1>
<p style="font-size: 24px; line-height: 1.5;">
This is an example of using an inline style attribute in HTML.
</p>
<div style="background-color: #f0f0f0; padding: 10px;">
<h2 style="color: blue;">Differnt Languages used in web development</h2>
<p style="font-size: 18px; font-style: italic;">
This text has been styled with inline CSS.
</p>
<ul style="list-style-type: none;">
<li style="color: green;">HTML</li>
<li style="color: purple;">CSS</li>
<li style="color: violet;">JAVASCRIPT</li>
</ul>
</div>
</body>
</html>
Note − Inline styles can also be used to override the styles defined in an external or internal stylesheet.
Approach 2: Using the “Internal style attribute"
The second approach is to decide the order of precedence of the style attributes in HTML as “Internal style attribute”. It defines “styles” for multiple elements in an HTML document by placing the styles within the “head” section of the document. These styles apply to all elements with targeted elements in the document. They can be overridden by styles defined in an external stylesheet or inline styles.
Example
Following is an example to decide the order of precedence of the style attributes in HTML using the “Internal style attribute”.
<!DOCTYPE html>
<html>
<head>
<title>Internal Style Example</title>
<style>
p {
color: blue;
font-size: 25px;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Internal Style attribute</h1>
<p>It is defined within the style tags in the head section of an HTML document</p>
<p>These styles apply to all elements with matching selector in the document</p>
</body>
</html>
Approach 3: Using the “External style attribute"
The second approach is to decide the order of precedence of the style attributes in HTML as “External style attribute”. These are defined in a separate file with the extension .css, and linked to the HTML document using the <link> tag in the <head> section. They apply to all elements with matching selectors in the HTML document and are useful for sharing styles between multiple pages.
Example
Following is an example to decide the order of precedence of the style attributes in HTML using the “External style attribute”.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
p {
color: blue;
font-size: 15px;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>External Style attribute</h1>
<h2>Definition of external style attribute</h2>
<p>These styles apply to all elements with matching selector in the document</p>
</body>
</html>
Conclusion
In this article, we examined two different approaches to decide the order of precedence of the style attributes in HTML. Here, we are using two different approaches “Inline styles” and ”Internal styles” and the “External styles”. Inline styles are defined within the HTML element using the style attribute, while internal styles are defined within the head section of an HTML document using the style tag. External styles are defined in a separate CSS file that is linked to the HTML document using the link tag.
134 Views
