HTML5: How to define style information for a document?

Go to Exercise page


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 -->


  • 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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.