In this article, we will see the HTML style attribute, along with understanding its implementation through examples. Styles in HTML are basically rules that describe how a document will be presented in a browser. Style information can be either attached as a separate document or embedded in the HTML document. There are 3 ways of implementing style in HTML:
- Inline Style: In this method, the style attribute is used inside the HTML start tag.
- Embedded Style: In this method, the style element is used inside the <head> element of the document.
- External Style: In this method, the <link> element is used to point to an external CSS file.
Supported Tags: It supports all HTML elements.
Inline Style: In Inline styling, the CSS rules are directly written inside the starting tag using the style attribute. The style attribute includes a series of CSS property and value pairs. Each ‘ property: value ‘ pair is separated by a semicolon ( ; ). This attribute will override the style properties globally for any relevant style set.
Example: This example describes the internal style by specifying the style attribute to add the various styling properties.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Inline Styling</title>
</head>
<body>
<h1 style="color:Blue;font-size:25px;">
Example of Inline Style
</h1>
<p style="color:red;">First paragraph</p>
<p style="color:green;font-size:40px;">
Second paragraph
</p>
<hr style="border-color:orange;">
</body>
</html>
|
Output:
style attribute
Embedded Style: Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> tag.
Example: This example describes the embedded style property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
background-color: powderblue;
}
h1 {
color: black;
font-family: arial;
}
p {
color: yellow;
font-family: verdana;
}
</style>
<title>Embedded Styling</title>
</head>
<body>
<h1>Example of Embedded Style</h1>
<p>First paragraph.</p>
</body>
</html>
|
Output:
Embedded Style
External Style Sheet: External Style Sheets method can be useful when the CSS has to be applied to various web pages. An external style sheet holds all the style rules in a separate document that you can link from an HTML file on your site. There are two ways of attaching external style sheets:
- Linking External Style Sheets
- Importing External Style Sheets
Linking External Style Sheets: In this method, an external style sheet is linked to an HTML document using the <link> tag.
Example: This example describes the external style sheet to add the various styling properties.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="/html/css/externalstyle.css">
<title>External Styling</title>
</head>
<body>
<h3>Example of Linking External Style Sheet</h3>
<p>First paragraph.</p>
</body>
</html>
|
Output:
External Style
Importing External Style Sheets: External style sheets can be loaded into an HTML document using “@import“. The “@import” statement instructs the browser to load the CSS file. Other CSS rules can also be included using the <style> element.
Example: This example describes the importing external style sheet to add the styling properties from the external style.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url("/html/css/importstyle.css");
p {
color: powderblue;
font-size: 30px;
}
</style>
<title>Importing external Styling</title>
</head>
<body>
<h3>Example of external style sheet using import</h3>
<p>First paragraph</p>
</body>
</html>
|
Output:
Importing External Style
Supported Browser: The browsers supported by style attribute are listed below:
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!