September 7, 2016

The Style Element

html style tag

THE HTML STYLE ELEMENT

The Html style element is used to define styles in an Html document. Things like FONT, COLOR, LINE-HEIGHT, BORDERS, and POSITIONING to name just a few are defined inside of Html style tags. A single Html document can contain multiple style elements. If the same Html element is targeted and styled in two or more style elements, most of the time the second style will be applied. This is because Html documents are read from top to bottom and the first style would be OVERRIDDEN by the second style. It is more common to use just one style element and place it inside of the head element. This is known as an internal style sheet. For an example, see the images below.

index.html EXAMPLE 1: THE STYLE ELEMENT

html style tag in head element

DISPLAYED PAGE EXAMPLE 1

style tag in html head element display

We add an H1 HEADING and a P ELEMENT to the Html body. Opening and closing style tags are added inside of the HEAD ELEMENT. Then, we add CSS code inside of the style tags that define styles to apply to the p element. The CSS code will make the paragraph text white and give it a background color of blue. The Displayed Page Example 1 image shows the result.

The style tags should be located in the Html head element if the ATTRIBUTE scoped is not used. Scoped is a new attribute in HTML5 and is a boolean attribute. You don’t need to worry about what boolean means at this point, so we’ll leave that for another lesson. Scoped specifies that the defined styles will only be applied to the element’s parent element and that parent element’s child elements. That’s a mouthful. To simplify, it means that it won’t affect the entire document. It will affect a specific part. Let’s use the style element with the scoped attribute in an example. IMPORTANT: At the time this lesson was created; the scoped attribute is only supported in newer versions of Mozilla Firefox (21.0 and newer). See the images below.

index.html EXAMPLE 2: STYLE ELEMENT WITH SCOPED ATTRIBUTE

style element scoped attribute html

DISPLAYED PAGE EXAMPLE 2.1: RAN IN FIREFOX

style scope attribute

DISPLAYED PAGE EXAMPLE 2.2: RAN IN CHROME

style scope chrome

In the body section, we add a div element with an h1 and a p element inside of it. The style tags go above the new heading and paragraph. The opening style tag has the scoped attribute in it. This allows us to target the h1 and p element inside of the div. Styles are defined inside of the new set of style tags. Image 2.1 shows this document ran in Firefox with everything working how it was meant to. In browsers that do not support the scoped attribute, the style element will be treated as a global style, which means it will affect all specified elements. You can see an example of this in image 2.2 — the Html document was run in Chrome. Both style elements in the document define styles for p elements. The first style element is in the head and targets paragraphs; the second style element is in the body and targets h1 headings and paragraphs. As you can see from this image, the style element with the scoped attribute is treated as a global style element because it’s not supported by the Chrome browser. Basically what is happening here is the original font color for all paragraphs is being overridden by the second style element. The blue background for the paragraphs is still being applied from the style element in the head. You should also notice that the first h1 heading, right after the opening <body> tag, has the green font color applied to it even though the style element that defines this style comes after the h1 was already created.

That’s it for this lesson on the Html style element. You should understand how to use the style tags and where to place them. The scoped attribute may start getting support from more browsers in the future, but for now, I recommend not using it if you want visitors with browsers like Chrome, Safari, Explorer, Edge, and Opera to see the same styles that the Firefox users do. As far as adding CSS style to Html documents go, you could also add CSS INLINE STYLE or from an EXTERNAL STYLE SHEET. Click on them for more information. Thanks for reading, we’ll see you next time.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>THE HTML STYLE ELEMENT</title>
<style>
p {
color: white;
background: blue;
}
</style>
</head>
<body>

<h1>HTML STYLE ELEMENT</h1>

<p>This paragraph should have white font and
a blue background.</p>

<div>
<style scoped>
h1 {color: green;}
p {color: red;}
</style>
<h1>This font should be green.</h1>
<p>This font should be red.</p>
</div>

</body>
</html>

Clear Coded Programming

Please Leave a comment