- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <style> tag
The HTML <style> tag contains style information for an HTML document or part of a document. This includes CSS (Cascading Style Sheets), which is applied to the content of an HTML document containing a <style> tag.
The <style> tag is used to declare the style sheets within the head element for the HTML document. We can have multiple style elements in a single head element.
Generally, CSS is of three types, and if we use the style element inside the head element, then this CSS is known as internal CSS.
Syntax
Following is the syntax of the <style> tag −
<style>.....</style>
Example
In the following program, we are using the HTML <style> tag to apply a simple stylesheet(CSS) to the HTML documents.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML style tag</title> <style> h1 { color: green; font-size: 40px; font-style: italic; } </style> </head> <body> <h1>Text within h1 tag</h1> </body> </html>
When we run the above code, it will generate an output consisting of the text applied with the CSS displayed on the webpage.
Example
The following is another example of the HTML <style> tag. Here, we're including two <style> tags to the applied stylesheet on the HTML document, and see how conflicting declarations in the later style element override the earlier one, if they have the same specificity.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML style tag</title> <style> p { color: rgb(17, 114, 217); font-size: 40px; font-style: italic; font-weight: bolder; } </style> <style> p { color: red; font-size: 35px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } </style> </head> <body> <p>Text within p tag</p> </body> </html>
On running the above code, the output window will pop up, consisting of the CSS properties applied to the text displayed on the webpage.
Example
In this example, we are using the media(i.e. media query) attribute with the second "style" element. So it is only applied on the HTML document when the viewport(screen size) is less than 500px in width.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML style tag</title> <style> h3 { color: red; font-size: 25px; font-style: italic; } </style> <style media="all and (max-width: 500px)"> h3 { color: green; font-size: 30px; font-weight: bolder; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } </style> </head> <body> <h3>This is the 'h3' HTML element.</h3> </body> </html>
When we run the above code, it will generate an output displaying the text with CSS applied when the user tries to change the viewport width, i.e., greater than 500 pixels, the text changes the CSS property.
To Continue Learning Please Login
Login with Google