HTML <style> element carry style information for a document. Style information can be attached as a separate document or embedded in the HTML document.
Three ways you can implement style in HTML:
- Inline Style
- Internal Style
- External Style
Note: Internal and External styles discussed in the next chapters
HTML Style Attribute
-
A HTML style element can be written with the <style> attribute.
Syntax for HTML style Attribute:
-
<tagname style="property:value;">write the content</tagname>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Style Attribute</title>
</head>
<body>
<h1>HTML Style Attribute for paragraph</h1>
<p style="color:green;">This is a paragraph with style attribute</p>
</body>
</html>
<html lang="en">
<head>
<title>HTML Style Attribute</title>
</head>
<body>
<h1>HTML Style Attribute for paragraph</h1>
<p style="color:green;">This is a paragraph with style attribute</p>
</body>
</html>
HTML Inline Style
-
Inline style attribute come with a property and value pair. It written inside the start tag of the element using the style attribute. Each property and value pair is separted by semicolon (;).
Example:
<p style="color:green;font-size:16px;text-align:center;">This paragraph contains property and value pair with style attribute</p>
HTML Body element with Background color
-
HTML Background color can be set with the style attribute to the body element with the property and value pair in the start tag of the body element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Background color</title>
</head>
<body style="background-color:dodgerblue;">
<h1>Background color for body tag<h1>
<p>The background color has set to the body element with the style attribute</p>
</body>
</html>
<html lang="en">
<head>
<title>HTML Background color</title>
</head>
<body style="background-color:dodgerblue;">
<h1>Background color for body tag<h1>
<p>The background color has set to the body element with the style attribute</p>
</body>
</html>
Note: In the next chapters we will discuss with more style attributes. For example: text-align, color, fonts, and etc.,
Next Topic: HTML Formatting