What is a style tag in HTML?
Style is used to design an HTML webpage. Style tags can be inside any tag or inside head tag or external CSS (Cascading Style Sheet) file. It contains style information for a document
Examples of HTML style tag
Let’s see multiple scenario examples.
Use in Head tag
Here we are targeting all <a> and <p> tags, you can use id or class for specific elements.
<html>
<head>
<style>
h1 {color:green;}
p {color:red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Output:
HTML <style> tag in body
HTML 5 includes the scoped attribute (see update below), which allows you to create style sheets that are scoped within the parent element of the <style> tag. This also enables you to place <style> tags within the <body> element:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="scoped-content">
<style type="text/css" scoped>
h1 { color: red; }
</style>
<h1>Hello</h1>
</div>
<h1>
World
</h1>
</body>
</html>Inline style tag Example
Inline styles directly affect the tag they are written in, without the use of selectors.
<!DOCTYPE html>
<html>
<body>
<p style="color:blue;font-size:46px;">
I'm a big, blue, <strong>strong</strong> paragraph
</p>
</body>
</html>Q: What are Default CSS Settings?
Answer: If you don’t define CSS for elements (tag) then it could show like below code or something else depends on the browsers.
style {
display: none;
}Do comment if you have any questions and doubts on this topic.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version