HTML Code to Change Heading Font Size and Color

Updated on 12 Jan 2012,
Published on 27 Jun 2008

In HTML you have two options of change the Font size and color of Heading Tag. First quick option to change the font size of heading tag is to use the inline style attribute and apply the font-size CSS property with appropriate value in pixels to increase or decrease the text size. You can also use the inline style attribute to change the font color of HTML heading tag. color CSS property with value as #RRGGBB or standard color names can be used to change the text color of heading tag. Second option to change the font-size of heading tag is by using CSS class name or selector style rule. Similarly you can use the CSS class name or CSS selector to change the font color of headings.

HTML Example to change Heading Font Size and Color

<html>
<head>
    <title>HTML CSS Example</title>
    <style type="text/css">
        h2 {
            font-size: 22px;
        }
        
        .headingFontSize {
            font-size: 20px;
        }
        
        .headingColor {
            color: orange;
        }
        
        h5 {
            color: #0000ff;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 24px">
        Heading Font size changed using inline style attribute
    </h1>
    <h2>
        Heading Font size changed using CSS selector style rules
    </h2>
    <h3>
        Heading Font size changed using CSS class style rules
    </h3>
    <h4 class="headingColor">
        Color of Heading Changed using CSS class
    </h4>
    <h5>
        Color of heading changed using CSS selector style rules
    </h5>
    <h6 style="color: #abcdef">
        Color of Heading changed using inline style attribute
    </h6>
</body>
</html>

In the above example h2 CSS selector is used to define the CSS rule to change the font size of h2 heading tag. headingFontSize is defined as CSS class to change the font-size of h3 tag. Font size of h1 tag has been changed using inline style attribute. Next h5 CSS selector rule is used to change the text color of h5 tag. headingColor CSS class is used to change the color of h4 tag and inline style attribute has been used to change the color of h6 tag. Above HTML example code covers the basic HTML heading tags from h1 to h6 along with use of CSS to change the font color and size. You can also use the combinations to change the font size and color of heading tag at same time.

Continue to next tutorial: CSS Style Image Rollovers Effects Using HTML Image Links to learn how to apply the hover effect to image hyperlink.

9 Responses to "HTML Code to Change Heading Font Size and Color"
Animalfreakz
Thanks a lot! I wanted to change my heading's color, but it didn't work. But with your HTML codes it did :D!
Keep up the good work ;)
Thanks for the info was able to fix an issue I was having with the header tag.
hoy mga wla kayung kwenta gumawa mali mali yung ginagawa nyu wrong information mga bobobobobobobobo!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!:P
I'd like to thank you too. I've been looking around ALOT for this info. Very clear and concise.
Ei thank you for this codes, really helped me alot. Just subscribed.
HTML color codes are hexadecimal triplets representing the colors red, green, and blue. For example, in the the color red, the color code is FF0000, which is '255' red, '0' green, and '0' blue.
very interesting article! I will follow your themes. Can I subscribe to your posts on Twitter or on your Facebook profile?
thanks for the code man...
Your website having very different and interesting blog which you have made it success. I really like your blog which you have taught me well, thank you for sharing. Keep on posting a different blog...
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email