The HTML style attribute is used to apply inline CSS directly to an element, allowing you to control its appearance such as color, font, size, and layout within the same tag.
- Written as style="property: value;" inside an HTML element.
- Used for quick, specific styling without a separate CSS file.
- Can modify visual properties like color, font size, spacing, and alignment.
Syntax:
<tagname style="property: value;">
Content goes here
</tagname>
- tagname: This is the HTML element to which you want to apply styles (like <p>, <div>, <h1>, etc.).
- property: This is the style property you want to change (e.g., color, font-size, background-color).
- value: This is the value that defines how the property should look (e.g., red, 16px, #00FF00).
Working of style Attribute
Inline styles applied via the style attribute affect only the specific HTML element and override broader CSS rules, providing element-level styling.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Style Attribute Example</title>
</head>
<body
style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0;">
<h1 style="color: green; text-align: center;">Welcome to My Website</h1>
<p style="font-size: 18px; color: purple; text-align: center;">This is a simple paragraph with purple text and a
font size of 18px.</p>
<div
style="width: 300px; height: 150px; background-color: lightblue; padding: 20px; border: 2px solid blue; display: flex; justify-content: center; align-items: center;">
This box has a light blue background, padding, and a blue border.
</div>
</body>
</html>
Commonly Used CSS Properties in the style Attribute
- Color: Changes the color of the text.
<p style="color: blue;">This is a blue paragraph.</p>- Font Size: Changes the size of the text.
<p style="font-size: 20px;">This is a larger paragraph.</p>- Background Color: Changes the background color of an element.
<div style="background-color: yellow;">This is a yellow box.</div>- Text Alignment: Aligns text (left, center, right).
<h1 style="text-align: center;">This is a centered heading.</h1>- Padding: Adds space inside an element around its content.
<div style="padding: 10px;">This box has padding around it.</div>- Margin: Adds space outside an element.
<div style="margin: 20px;">This box has margin around it.</div>- Width and Height: Controls the dimensions of an element.
<div style="width: 200px; height: 100px; background-color: grey;">This box is 200px wide and 100px tall.</div>- Border: Adds a border around an element.
<p style="border: 1px solid black;">This paragraph has a border.</p>Other Types of Styling in HTMLBelow are the different types of styling in HTML
1. Inline Style
Inline styling applies CSS rules directly inside an HTML tag using the style attribute. Multiple styling properties are written within the attribute, and each property is separated by a semicolon.
<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:
2. Embedded Style
Embedded or internal styles are written within the <head> section of the HTML document, inside a <style> tag. These styles only apply to the specific document where they are defined.
<html>
<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:
3. External Style Sheet
External style sheets are useful when CSS needs to be applied to multiple web pages. They store all the style rules in a separate file that can be linked to from an HTML document. There are two ways to link external style sheets:
1. Linking External Style Sheets: Linking an external style sheet connects a separate CSS file to an HTML document using the <link> tag. This allows the styles in the CSS file to be applied to the HTML elements. The href attribute points to the location of the CSS file.
<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:
2. Importing External Style Sheets: External style sheets can also be added to an HTML document using the @import rule. This tells the browser to load the CSS file. The @import statement can be used inside the <style> element in the HTML document.
<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:
