HTML Style tag

Introduction to HTML Style Tag

Style tag in HTML allows you to style the HTML elements from the HTML itself. The style tag in HTML is widely used to alter the styling of the elements of the webpages. Where HTML forms the backbone of your websites, CSS is what makes your website appear live and modern.

In other words, we use HTML to create the structure of our websites using different web elements like input, buttons, paragraphs, etc. But HTML by itself doesn't handle how these elements should look. It's the CSS that actually gives some styles to these elements that sets them apart. And this can be done using style tag in HTML.

One of the most traditional and common ways of writing CSS code in your HTML files is using the style tag in HTML. The style tag in HTML is used by directly adding a stylesheet inside your HTML file, which is globally available throughout your website. Inside this style tag, you can specify styles for various HTML selectors like elements, classes, ids, etc.

HTML Style Tag Syntax:

Let's say your webpage has the following HTML:

To use the style tag in HTML, simply add it inside the head section of the HTML of your page:

Inside the style tag, you can then specify any styles you want to apply to your HTML elements. Let's see how we can do that with an example.

Example of Style Tag:

Here I have some minimal HTML boilerplate code with the style tag that can be used to style this HTML.

This renders the following HTML on the page:

Now, let's move the div inside the body tag using its HTML selector and give it some CSS styles inside the style tag.

Now our div should render with a yellow color in the background:

That's how simple it is to use the style tag in HTML.

You can use style tag to add inline stylesheet to your HTML documents. An inline stylesheet represents a dedicated section inside an HTML document where all the styles for that HTML document are present.

You can also use more than one style tag on a single HTML document as shown below:

If you wish to use external stylesheets, you should use the link tag instead as shown below:

Attributes of the Style Tag

The style tag in HTML takes two attributes, both of which are optional. This means that you don't necessarily need to provide any attribute to the style tag while using it.

Thus, it's best to use these attributes only if you need them, as explained later.

The Media Attribute

The media attribute specifies what device (ex: projectors, television screens, braille devices, etc.) these styles should render for. So, if you wish to add some device-specific styles, you can do so by adding the media attribute to your style tag.

The default value of this attribute is "all". So, if you do not specify this attribute, the stylesheet will be rendered as it is on all the devices.

Here's a list of all the values that the media attribute can take. Each of these specifies a particular device for which the styles are rendered by the style tag:

• screen
• tty
• tv
• projection
• handheld
• print
• braille
• aural
• all

The Type Attribute

The type attribute specifies the type of resource the style tag represents. Since the style tag contains CSS styles in text form, the default value of this attribute is "text/css".

Inline Style Attribute

Instead of using a style tag to give CSS styling to your elements, you can directly provide these styles using a style attribute that can be attached to any HTML tag.

Inside the attribute, you can specify the CSS property and its value as key-value pairs separated by semicolons.

This is known as inline styling because you're assigning style to each HTML element as they're rendered on the webpage. Inline styling should be avoided at all cost unless deemed extremely necessary because they make your HTML more cluttered and your CSS hard to debug and maintain.

Let's now look at some examples of the style attribute.

HTML Font Family

You can set the font-family of an HTML element using the style property. All you need to do is to specify the font-family property with the font family you wish to set to this HTML element. Here's an example that does this:

And the font family will be applied to that element:

HTML Font Size

Similarly, you can set the font size of an HTML element by specifying the font-size property inside the style attribute of that element.

So the above will render the text 40 pixels large on the webpage:

HTML Font Color

To set the text color of an HTML element, you can do so by specifying the color property inside the style attribute of that HTML element.

And now, your text should appear violet in color:

HTML Text Align

To align text inside a container, the style attribute is used by specifying the container’s text-align property.

The above HTML will render everything inside the body tag at the center of the page.

HTML Background Color

You can also set the background color using the background-color property inside the style attribute of the container.

The above will add a blue background color to your entire HTML page.