The HTML style attribute allows CSS to be applied directly within HTML tags. This enables styling of an element without the need for an external CSS file or a <style> block. It provides a quick, inline way to apply styles to individual elements.
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).
How Does the Style Attribute Work?
When we apply styles using the style attribute, they only affect that specific HTML element. Unlike external or internal CSS, which can affect multiple elements at once, inline styles are individual and specific.
Now let's understand this with the help of example
HTML
<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 HTML
Below 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
<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 attribute2. 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
<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:
Embedded Style3. 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:
- 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
<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 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
<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 StyleConclusion
the HTML style attribute allows quick, inline styling of individual elements without the need for external CSS. While ideal for small, specific changes, for larger projects, external or internal CSS is more efficient and maintainable.
Similar Reads
HTML accept Attribute HTML accept Attribute specifies the type of file that the server accepts. This attribute can be used with <input> element only. This attribute is not used for validation tools because file uploads should be validated on the Server.Syntax:<input accept = "file_extension"> Note: This attri
3 min read
HTML accept-charset Attribute The accept-charset attribute is used to define the character encoding and is used for form submission. The default value of the accept-charset attribute is "UNKNOWN" string which indicates the encoding equals to the encoding of the document containing the <form> element. Syntax:<form accept
2 min read
HTML accesskey Attribute The HTML accesskey attribute defines a keyboard shortcut to activate or focus an element.It assigns a keyboard key combination to trigger an element (like a link or button).Browser support and specific key combinations vary (e.g., Alt + key on Windows, Ctrl + key on macOS).Use it sparingly and provi
3 min read
HTML action Attribute The HTML action attribute is used to specify where the form data should be sent on submission. It allows the browser to send the data to the specified location, enabling server-side scripts to process the data and generate a response.Note: It can be used in the <form> element. Syntax:<form
3 min read
HTML align Attribute In HTML, the align attribute is used to control the alignment of elements on a webpage. Whether it's for text, images, or tables, the align attribute helps to position content in relation to its surrounding elements.Syntax<element_name align="left | right | center | justify">Attribute ValuesAt
4 min read
HTML alt attribute The alt attribute in HTML provides alternative text for images, aiding accessibility and providing context for screen readers.Syntax:<img src=" " alt=" " >HTML<html> <body> <h1>GeeksforGeeks Logo</h1> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190
3 min read
HTML async Attribute The HTML <script> async attribute is used to load and execute external scripts without blocking the rest of the page from loading. This speeds up page load times. It only works with external scripts (when the src attribute is present).Syntax:<script src="path-to-script.js" async></scr
3 min read
HTML autocomplete Attribute The HTML autocomplete Attribute is used to specify whether the input field autocompleted would be on or off. When the autocomplete attribute is set to on the browser will automatically complete the values based on what the user entered before. It works with input fields such as text, search, URL, em
3 min read
HTML autoplay Attribute The HTML autoplay Attribute, a boolean attribute, enables audio or video elements to start playing automatically when the page loads, providing seamless playback without interruption.Syntax: <element autoplay> Supported ElementsIt can be used with <audio> and <video> elements. Elem
2 min read
HTML autofocus Attribute The HTML autofocus attribute is a powerful tool that enhances user experience by automatically setting the focus to a specific element when a webpage loads. Syntax<input type="text" autofocus> Note: This attribute is boolean, meaning it can either be present or absent.Supported TagsElementPurp
2 min read