What is a style in HTML

HTML style - global CSS properties

Above the fold

In addition to styles that only apply to the current document, the CSS styles that are important for rendering the content "above the fold" can be noted in the style tag. This technology speeds up the page loading for the visitor, as the browser does not have to wait until the complete CSS file has been loaded.

This is a simple example of creating stylesheets in a document. The stylesheet properties declare the font, color and size for

,

 and  tags. More about CSS. 

<head> … <style media="screen"> p { color: black; font-size: 1.1em } pre { color: navy; font-size: 0.9em } code { font-family: Courier; color: navy } </style> … </head>

Before HTML5, the type also had to be listed in the style tag. With HTML5 the type attribute is omitted and the validator throws a warning.

The type attribute for the style element is not needed and should be omitted.

Integrate CSS at an early stage

Although it doesn't matter in which order the tags appear in the head of the website (apart from the order of Javascript files that build on each other), CSS files are included before scripts. This allows the browser to display the page faster.

style in the body: scoped

The style tag with body element came in HTML5, but was removed from the standard again.

The style tag must be inside the head element, unless the scoped-Attribute is set.

Then a style tag can be set in the body of the website. Its scope is limited to the comprehensive HTML element - hence the name "scoped".

<article> <header><h2>Zweiter Artikel – Überschrift h2</h2></header><section> <style scoped> h3 { background: orchid; padding: 10px} </style> <h3>Section 1 in Artikel 2 Überschrift h3</h3></section></article>

With scoped CSS rules may only be used within their comprehensive container, but the browsers (except Firefox) ignore the scoped attribute and apply the rules of the style tag to the entire document.

In order to apply CSS to an area of ​​the document in exceptional cases, there is the style attribute of the HTML tags. The style attribute only applies to the content of this one element.

@import rule

Within the style tag, an external CSS file can also be imported into the document using the @import rule. With the @import rule, however, CSS files load more slowly than with a link tag.

<style> @import url("style.css"); @import url("print.css") print; @import url("small-devices.css") projection, tv; </style>

The import rule is now superfluous (and slower than loading the CSS file using a link tag). The link tag for integrating external CSS files is the better choice.

Attributes for style

media
a list of media in which the HTML document can be presented (all, aural, braille, handheld, print, projection, screen, tvandtty). The default is screen.
scoped (new in HTML5 and out again)
is a boolean attribute. If scoped is set, the style tag can be set in an HTML element in the body of the website and set CSS properties for the comprehensive element.
type
declares the type of style. There is only one possible value: text / css. In HTML5 type = "text / css" can be omitted.

External sources