- Trending Categories
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 work with style attribute in HTML?
The task we are going to perform in this article is how to work with style attribute in HTML.
HTML styles are essentially set of rules that specify how a page will be displayed in a browser. Style information may be incorporated in the HTML document or provided as a separate document. In HTML, style can be applied in 3 different ways.
Let’s look one by one to get more idea on how to work with style attribute in HTML.
Inline Style
The style attribute is used in inline styling to directly write the CSS rules inside the beginning tag. Many CSS property and value pairs are included in the style attribute. The style properties for any applicable style set will be overridden by this attribute globally.
Let’s look into the following example
Example
In the following example we are using onload method.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:#2ECC71 ;font-size:25px;">
Welcome To TutorialsPoit
</h1>
<p style="color:#3498DB;">The Best E-Way Learning</p>
<p style="color:#E74C3C ;">Where You Can Learn Lot Of Courses</p>
</body>
</html>
When the script gets executed, it will generate an output displaying the style applied to the text we used in the script on the webpage.
Using External Style
When CSS needs to be applied to numerous web pages, the external style sheets method can be helpful. All the style guidelines are contained in an external style sheet, which you may link from an HTML page on your website.</p
Example
Considering the following example
<!DOCTYPE html>
<html>
<style>
body {
background-color: #D5F5E3 ;
}
h1 {
color: #A9CCE3;
}
p {
color: #FAD7A0 ;
}
</style>
<body>
<h1>Welcome To Tutorialspoint</h1>
<p>The Best E-Way Learning</p>
</body>
</html>
When the above script is executed, it will provide output that includes the style that was applied to the text on the website.
Embedded style
Internal style sheets have no impact outside of the document they are embedded in. The <style> tag in an HTML document's <head> section is used to declare embedded style sheets.
Example
Following is the example for embedded style
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#D6EAF8;
}
h1 {
color:#D2B4DE ;
font-family: arial;
}
p {
color:#5DADE2;
font-family: verdana;
}
</style>
</head>
<body>
<h1>Tutorials Point originated from the</h1>
<p> idea that there exists a class of readers who respond better</p>
</body>
</html>
When the script gets executed, it will generate an output displaying the text used in the code applied with the style on the webpage.
57 Views
