HTML5: How to define style information for a document?

Last update on February 14 2024 12:56:06 (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 define style 
information for a document</title><!-- Title of the HTML page -->
<style><!-- Start of internal CSS style block -->
h1 {color:green;} </*  Define style for h1 elements to have green color */
p {color:blue;} </*  Define style for p elements to have blue color */
</style><!-- End of internal CSS style block -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<h1>w3resource</h1><!-- Heading 1 element with the text "w3resource" -->
<p>w3resource is a free, open-source 
tutorial.</p><!-- Paragraph element with text about w3resource -->
</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, an internal CSS style block is used to define styles for specific HTML elements.
The h1 {color:green;} CSS rule sets the color of <h1> elements to green.
The p {color:blue;} CSS rule sets the color of <p> elements to blue.
As a result, the heading "w3resource" will be displayed in green, and the paragraph text will be displayed in blue, according to the defined styles.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page