With the HTML tag “style” you define the ap­pear­ance of in­di­vidu­al elements on a website. The style tag is placed in HTML in the header and before possible scripts and in­teg­rates global CSS styles. It is com­pat­ible with various HTML at­trib­utes for this purpose.

What is the HTML tag style used for?

The HTML tag style allows you to create style sheets for an entire document. The goal of the style tag in HTML is, on the one hand, to precisely define the ap­pear­ance of in­di­vidu­al elements for a website and thus make them uniform. On the other hand, it can be used together with HTML at­trib­utes to optimize a website for certain devices. The style tag is used to place CSS codes in the HTML document. It is also possible to specify within the element how the content of the website should be rendered. This speeds up the layout in the browser sig­ni­fic­antly, since it doesn’t need to load the entire CSS file first.

How is the style tag struc­tured in HTML?

The style tag is used within the element head in HTML. It is also possible to place several elements with the HTML tag style for one website. For the fastest possible structure and to make it easier for the re­spect­ive browser to display, the style tag is placed in HTML before any scripts for the website. Since the in­tro­duc­tion of HTML 5, it is no longer mandatory to use the <style type="text/css"> attribute. However, the content is always placed between the <style> start tag and the </style> end tag. Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>An example of the use of the HTML tag style</title>.
<style>
h1 { color: #000000; }
p { color: #0A06EF; }
</style>
</head>
<body>
<h1>A sample headline for your website</h1>
<p>Sample copy for the first paragraph</p>
</body>
</html>

Here, the HTML tag style causes the headline `A sample headline for your website´ to be displayed in black and the first paragraph (`Sample copy for the first paragraph´) to be displayed in navy blue in the cor­res­pond­ing document. In addition to the colour, size and font can also be specified like this.

Which at­trib­utes are com­pat­ible with the HTML tag style?

Some at­trib­utes can be used with the HTML tag style. These include all global at­trib­utes and all event at­trib­utes. The most common at­trib­utes for the style tag in HTML are as follows:

Attribute Value De­scrip­tion
dir auto, rtl, ltr The universal attribute dir specifies the writing direction of the text.
height Pixel The height attribute specifies the height of an element.
id A string that cannot be empty or contain spaces. id defines a unique ID for an HTML element.
lang Language ab­bre­vi­ation The lang universal attribute is used to define the language within the document or element.
media all, aural, braille, handheld, pro­jec­tion, print, screen, tty, tv The media attribute defines which device the cor­res­pond­ing document should be optimised for.
width Pixel The width attribute defines the width of an element.
xml:space preserve, default The xml:space attribute is used to define how spaces in the source text should be in­ter­preted.

The at­trib­utes scoped and type are no longer used.

Here you can see an example of linking the HTML tag style with an attribute:

<style media="screen">
h1 { color: #000000; }
p { color: #0A06EF; }
body { background-color: #FFFFFF; }
</style>

This code defines that for all screens the headline will be black, the text in the paragraph will be navy blue and the back­ground will be white.

The HTML tag style is useful for any website

Whether you’ve been creating websites for a while or are just getting started learning CSS, the HTML tag style is a simple and useful tool for defining the look of a document and its in­di­vidu­al elements. In the end, this will make it easier for you to build a website in a neat and well-struc­tured way. If you also want to use external CSS files, use the link tag for that.

Tip

You want your own website made com­pletely according to your ideas? No problem! IONOS offers you everything you need with the Website Builder. Design your online presence in­di­vidu­ally without the need for any prior knowledge or let our ex­per­i­enced experts help you.

Go to Main Menu