HTML Style Tag
The HTML <style> tag is used to define styles for an HTML document. The styles can be defined within the <style> tag or in an external style sheet. The <style> tag should be placed within the <head> section of an HTML document, and any CSS code included within the tag will apply to all HTML elements within the document.
Here's an example of how to use the <style> tag to define styles for a web page:
1<!DOCTYPE html> 2<html> 3 <head> 4 <style> body { 5 background-color: #F7F7F7; 6 font-family: Arial, sans-serif; 7 } 8 9 h1 { 10 color: blue; 11 font-size: 32px; 12 text-align: center; 13 } 14 15 p { 16 color: #333; 17 font-size: 16px; 18 line-height: 1.5; 19 margin-bottom: 10px; 20 } </style> 21 </head> 22 <body> 23 <h1>Welcome to my website</h1> 24 <p>This is the content of my website.</p> 25 </body> 26</html>
In this example, we have defined styles for the <body>, <h1>, and <p> elements using the <style> tag. We have set the background color of the <body> element to #F7F7F7, the font family to Arial, sans-serif, the color of the <h1> element to blue, the font size to 32px, and the text alignment to center. We have also set the color of the <p> element to #333, the font size to 16px, the line height to 1.5, and the bottom margin to 10px.
Multiple Style Tags
You can use multiple <style> tags in an HTML document to define different styles for different sections of the web page. For example, you could use one <style> tag to define styles for the header section and another <style> tag to define styles for the content section. Here's an example of how to use multiple <style> tags:
1<!DOCTYPE html> 2<html> 3 <head> 4 <style> /* styles for header section */ 5 header { 6 background-color: #333; 7 color: #fff; 8 padding: 20px; 9 } 10 11 /* styles for navigation menu */ 12 nav { 13 display: flex; 14 justify-content: space-between; 15 align-items: center; 16 } </style> 17 18 <style> /* styles for content section */ 19 article { 20 font-size: 16px; 21 line-height: 1.5; 22 padding: 20px; 23 } 24 25 /* styles for images */ 26 img { 27 max-width: 100%; 28 height: auto; 29 } </style> 30 </head> 31 32 <body> 33 <header> 34 <nav> 35 <h1>My Website</h1> 36 <ul> 37 <li><a href="#">Home</a></li> 38 <li><a href="#">About</a></li> 39 <li><a href="#">Contact</a></li> 40 </ul> 41 </nav> 42 </header> 43 44 <article> 45 <h2>My First Blog Post</h2> 46 <img src="image.jpg" alt="My Image"> 47 <p>This is the content of my blog post.</p> 48 </article> 49 </body> 50</html>
In this example, we have used two <style> tags. The first <style> tag defines styles for the header section and navigation menu, and the second <style> tag defines styles for the content section and images.
Style Attribute
You can also use the style attribute to define styles for individual HTML elements. The style attribute should be added to the opening tag of the element and should contain one or more CSS declarations. Here's an example of how to use the style attribute:
1<!DOCTYPE html> 2<html> 3 <head> 4 <style> h1 { 5 color: blue; 6 font-size: 32px; 7 text-align: center; 8 } </style> 9 </head> 10 11 <body> 12 <h1 style="background-color: #F7F7F7;">Welcome to my website</h1> 13 </body> 14</html>
In this example, we have used the style attribute to set the background color of the <h1> element to #F7F7F7.
Using the style attribute is useful when you want to define styles for individual elements that don't need to be used elsewhere in the web page. However, it's generally better to use the <style> tag or an external style sheet to define styles for the entire web page.