HTML Style Attribute
Using the inline technique, the style property of HTML allows CSS to be applied to an HTML element.
Using the property and value pair enclosed in double quotes within the style attribute of the HTML tag, we can apply CSS to the style attribute. Multiple property-value pairs are denoted with a semicolon (;) if there are any.
In addition to seeing a few examples below, we will learn about the syntax in great depth.
The styles given in the HTML style element or an external style sheet are examples of styles that the style attribute will override unless they are set using the ! Important keyword.
Since the style property is a component of global HTML attributes, any HTML tag can utilize it.
This article will explain the HTML style property and provide examples to help you learn how to use it. In HTML, styles are guidelines that specify how a page should appear in a browser. Style sheets can be included in the HTML content or added separately. In HTML, style may be applied in three different ways:
- Inline Style: Using the style property within the HTML start element is how this technique works.
2. Embedded Style: This technique uses the style element inside the document's <head> element.
3. External Style: Using the <link> element, an external CSS file is referred to in this technique.
Syntax
<ElementName style="StyleRule; StyleRule2;......">content</ElementName>
4. Inline Style: The CSS rules for inline styling are written inside the beginning tag using the style attribute. The style attribute includes several CSS properties and value pairs. A semicolon (;) divides each pair of "property: value." For any applicable style set, this attribute will take precedence over the style properties worldwide.
Example: To add the different styling characteristics, supply the style property, which defines the internal style in this example.
<html>
<head>
<title>Example for Inline Styling</title>
</head>
<body>
<h2 style="color:red;font-size:39px;">
Example of Inline Style
</h2>
<h3 style="color:blue;">This is First line</h3>
<p style="color:maroon;font-size:30px;">
This is the Second line
</p>
<hr style="border-color:black;">
</body>
</html>
Output
5. Embedded Style: Internal or embedded style sheets only have an impact on the document in which they are embedded. The <style> element is used in the <head> section of an HTML page to declare embedded style sheets.
Example: The embedded style attribute is explained in this example.
<html lang="en">
<head>
<style type="text/css">
body {
background-color: lightpink;
}
h1 {
color: black;
font-family: arial;
}
p {
color: red;
font-family: Times New Roman;
}
</style>
<title>Example for embedded style</title>
</head>
<body>
<h1>Example for Embedded Style</h1>
<p>This is first line</p>
</body>
</html>
Output
6. External Style Sheet: When applying CSS to several web pages, the External Style Sheets approach might be helpful. You may connect to an external style sheet from an HTML file on your website, which contains all of the style guidelines in one document. External style sheets can be attached in two different ways:
- Linking External Style Sheets: This technique uses the <link> tag to link an external style sheet to an HTML document.
Example: The external style sheet that adds the different stylistic features is described in this example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="/html/css/externalstyle.css">
<title>Example for external styling</title>
</head>
<body>
<h3>Example for linking external style sheet</h3>
<p>This is first line</p>
</body>
</html>
Output
- Importing External Style Sheets: "@import" may be used to load external style sheets into an HTML document. The browser is instructed to load the CSS file using the "@import" declaration. The <style> element can also be used to incorporate other CSS rules.
Example: To add the styling properties from the external style, follow the instructions in this example to import the external style sheet.
<html>
<head>
<style type="text/css">
@import url("/html/css/importstyle.css");
p {
color: blue;
font-size: 20px;
}
</style>
<title>Example for importing external styling</title>
</head>
<body>
<p>Example for external style sheet using import statement</p>
<h3>This is first line</h3>
</body>
</html>
Output
List of HTML style attribute values
An HTML element's style attribute provides several values that allow a developer to modify its font color, font size, background color, background image, margin, padding, and other features.
1. Color
This attribute allows us to set the text's font color using the color name, HEX code, or RGB code of the color.
<html>
<body>
<h1 style="color:red;">This is an example for color attribute</h1>
</body>
</html>
Output
2. background-color
This property sets the background color of various HTML elements, such as div, span, and body. We can use the HEX code, RGB code, or the color name of the color we want.
<html>
<body>
<h2 style="background-color:pink; color:black">This is an example for background-color</h2>
</body>
</html>
Output
3. font-size
This attribute is used to adjust the text's font size. For this, we may utilize other units, such as px, em, or rem.
<html>
<body>
<h2 style="font-size:30px">This is an example for font-size</h2>
</body>
</html>
Output
4. margin
This attribute allows an HTML element, such as a p, div, span, etc., to have a margin applied to all four of its sides.
- Margin-top: To add a margin just to the HTML element's top.
- Margin-right: To add margin to an HTML element to its immediate right.
- Margin-bottom: To add a margin just to the HTML element's bottom.
- Margin-left: This style applies a margin to the HTML element just to its left.
<html>
<body style="background-color:pink">
<div style="margin:100px; background-color:black; width:50px; height:50px"></div>
</body>
</html>
Output
5. Padding
This attribute specifies the distance between an HTML element's boundaries and content. All four sides can have padding applied to them using the "padding" property, or we can utilize specific padding values like
- Padding-top: To add padding to the element's top.
- Padding-bottom: To add padding to the element's top.
- Padding-left: This style adds padding to the element's top.
- Padding-right: To add padding to the element's top.
<html>
<body>
<div style="padding:20px; background-color:pink; width:100px; height:100px">
<div style="background-color:red; width:50px; height:50px"></div>
</div>
</body>
</html>
Output
6. Width and height
The width and height properties of a shape or an HTML element, such as a div, may be specified. In earlier div instances, width and height were used.
<!DOCTYPE html>
<html>
<body style="background-color:pink">
<div style="background-color:black; width:50px; height:50px"></div>
</body>
</html>
Output
7. letter spacing
This characteristic specifies the character spacing within a word. It can be given a positive or negative pixel value to increase or reduce the distance between characters.
<html>
<body>
<p style="letter-spacing:2px; text-align:left; padding:5px 0; border: 1px solid blue; font-size:20px">This is an example for letter spacing</p>
</body>
</html>
Output
