What is the HTML <style> tag ?
HTML <style> tag is used for declaring style sheets within the head of our HTML document.
HTML <style> tag is used to add CSS style to an HTML document.
An HTML document can contain multiple <style> tags and each <style> tag must be located between the <head> or <body> tags.
How HTML <style> tag works ?
HTML <style> tag is used to add styles to an element, such as color, font, size, and more.
HTML <style> tag defines the CSS style information for a document.
HTML <style> tag holds the CSS properties for an HTML document.
Inside the HTML <style> tag we can specify how our HTML elements should be rendered in a browser.
We can place any number of <style> elements inside the document.
Note : To link to an external style sheet, use the <link> tag.
Note : Its better to put our styles in external stylesheets and apply them using <link> elements.
Why is the HTML <style> tag used ?
HTML <style> tag helps us to modify the text, viewed in the page.
We can do all modifications like changing font size, font family, font color etc.
We can also change the style of a body part of a page.
Note: Normally the browser reads a style sheet, then it will format the HTML document according to the information in the style sheet.
And if some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!
Note : If we want to include multiple <style> and <link> elements in our document, they will be applied to the DOM in the order they are included in the document.
So make sure that we include them in the correct order, to avoid unexpected cascade issues.
Note : If we want to include media attributes that contain media queries, apply <style> to our document depending on media features such as “viewport width” ..etc.
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<tagname style="property:value;">
1. HTML Font Family:
Example :
<html>
<head>
<title>Font Family</title>
</head>
<body>
<h1 style="font-family:Bookman;">Welcome to CSTechbook</h1>
<h2 style="font-family:Palatino;">Welcome to CSTechbook</h2>
<h3 style="font-family:Arial;">Welcome to CSTechbook</h3>
<p style="font-family:Castellar;">Welcome to CSTechbook</p>
<p style="font-family:Vardena;">Welcome to CSTechbook</p>
</body>
</html>
Output :
2. HTML Font Size:
Example :
<html>
<head>
<title>Font Size</title>
</head>
<body>
<h1 style="font-size:80%;">Welcome to CSTechbook.</h1>
<h2 style="font-size:150%;">Welcome to CSTechbook.</h2>
<h3 style="font-size:20px;">Welcome to CSTechbook.</h3>
<p style="font-size:30px;">Welcome to CSTechbook.</p>
</body>
</html>
Output :
3. HTML Font Color:
Example :
<html>
<head>
<title>Font Color</title>
</head>
<body>
<h1 style="color:red;">Welcome to CSTechbook.</h1>
<h3 style="color:blue;">Welcome to CSTechbook.</h3>
<h3 style="color:brown;">Welcome to CSTechbook.</h3>
<h2 style="color:#8CCEF9;">Welcome to CSTechbook.</h2>
<h3 style="color:green;">Welcome to CSTechbook.</h3>
<p style="color:#810CA6;">Welcome to CSTechbook.</p>
</body>
</html>
Output :
4. HTML Text Align:
Example :
<html>
<head>
<title>Text Align</title>
</head>
<body>
<h1 style="text-align:left;">Welcome to CSTechbook.</h1>
<h2 style="text-align:center;">Welcome to CSTechbook.</h2>
<p style="text-align:right;">Welcome to CSTechbook.</h2>
</body>
</html>
Output :
5. HTML Background Color:
Example :
<html>
<head>
<title>Background Color</title>
</head>
<body style="background-color:white;">
<h1 style="font-family:commanders;
background-color:yellow;">Welcome to CSTechbook.</h1>
<h2 style="font-family:algerian;
background-color:cyan;">Welcome to CSTechbook.</h2>
<p style="font-family:Castellar;
background-color:green;">Welcome to CSTechbook.</p>
</body>
</html>
Output :
<style> Tag Attributes
HTML <style> tag support following specific attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | media | all braille projection screen speech | Specifies the device for media style should be apply to. |
| 2 | type | text/css | Specifies the MIME type of style sheet language. |
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |