How to design websites with the HTML tag style
IONOS editorial team4 mins
With the HTML tag “style” you define the appearance of individual elements on a website. The style tag is placed in HTML in the header and before possible scripts and integrates global CSS styles. It is compatible with various HTML attributes 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 appearance of individual elements for a website and thus make them uniform. On the other hand, it can be used together with HTML attributes 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 significantly, since it doesn’t need to load the entire CSS file first.
How is the style tag structured 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 respective browser to display, the style tag is placed in HTML before any scripts for the website. Since the introduction 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 corresponding document. In addition to the colour, size and font can also be specified like this.
Which attributes are compatible with the HTML tag style?
Some attributes can be used with the HTML tag style. These include all global attributes and all event attributes. The most common attributes for the style tag in HTML are as follows:
| Attribute | Value | Description |
| 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 abbreviation | The lang universal attribute is used to define the language within the document or element. |
| media | all, aural, braille, handheld, projection, print, screen, tty, tv | The media attribute defines which device the corresponding 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 interpreted. |
The attributes 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 background 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 individual elements. In the end, this will make it easier for you to build a website in a neat and well-structured way. If you also want to use external CSS files, use the link tag for that.
You want your own website made completely according to your ideas? No problem! IONOS offers you everything you need with the Website Builder. Design your online presence individually without the need for any prior knowledge or let our experienced experts help you.
