How to define style information of a document using HTML5 ?

In this Article, we define style information for a document by using the <style>
element in the document. It is used to change our text, viewed on the page. This change includes changing font-size, font-family, font-color, etc. Not only the texts but you can also change the style of a body or part of a page. Now let us look into various attributes of style and what else the tag supports.

Syntax:

<tagname style="property:value;">

Example 1: The following example demonstrates to define style information for a document using HTML5.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to define style information
        for a document using HTML5?
    </title>
</head>
  
<body>
    <h1 style="font-family:commanders;">
        Hello GeeksforGeeks.
    </h1>
  
    <h2 style="font-family:Chaparral Pro Light;">
        Hello GeeksforGeeks.
    </h2>
  
    <h3 style="font-family:algerian;">
        Hello GeeksforGeeks.
    </h3>
  
    <p style="font-family:Castellar;">
        Hello GeeksforGeeks.
    </p>
</body>
  
</html>

chevron_right


Output:

Example 2:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to define style information
        for a document using HTML5?
    </title>
</head>
  
<body style="background-color:#616A6B;">
  
    <h1 style="font-family:commanders; 
        background-color:yellow;">
        Hello GeeksforGeeks.
    </h1>
  
    <h2 style="font-family:algerian; 
        background-color:cyan;">
        Hello GeeksforGeeks.
    </h2>
  
    <p style="font-family:Castellar; 
        background-color:green;">
        Hello GeeksforGeeks.
    </p>
</body>
  
</html>

chevron_right


Output:

Supported Browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.