HTML5: How to specify the media type of the style tag?

Last update on February 14 2024 12:56:05 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify the media type of the style tag</title><!-- Title of the HTML page -->
<style type="text/css"><!-- Start of CSS style block with type attribute -->
h1 {color:green;} /* Define style for h1 elements to have green color */
p {color:OrangeRed;} /* Define style for p elements to have orange-red color*/
</style><!-- End of CSS style block -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<h1>HTML5 tutorial</h4><!-- Heading 1 element with the text "HTML5 tutorial" -->
<p>I can develop excellent web applications with HTML5 and related APIs in HTML5 tutorial.</p><!-- Paragraph element with text about HTML5 -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a heading and a paragraph.
Inside the <head> section, a CSS style block is defined with the type attribute set to "text/css", indicating that the contained styles are written in CSS format.
Within the CSS style block, specific styles are defined for <h1> and <p> elements.
The style for <h1> elements sets the color to green, while the style for <p> elements sets the color to orange-red.
The type="text/css" attribute is not strictly necessary in HTML5, as "text/css" is the default value for the type attribute of the <style> tag. However, it's still commonly used for compatibility with older HTML versions.

Live Demo:

See the Pen style-type-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page