askvity

How do I change the color of the heading in HTML?

Published in HTML Styling 3 mins read

You can change the color of a heading in HTML by using CSS, either inline or in a separate stylesheet, by modifying the color property for the heading element. Here's a breakdown of how to do it, incorporating the reference information:

Changing Heading Color with CSS

You can style headings (such as <h1>, <h2>, <h3>, etc.) using CSS. Here are the main methods:

1. Inline Styling

You can apply styling directly to the heading tag using the style attribute. This method is useful for quick, one-off changes.

   <h2 style="color: blue;">This heading is blue</h2>
  • Example: In the code above, the <h2> heading will be displayed in blue. You can replace blue with other color names, hex codes (e.g., #FF0000 for red), RGB values (e.g., rgb(255, 0, 0) for red), or other supported color formats.

2. Internal CSS (within <style> tags)

You can add CSS rules inside the `<head>` section of your HTML document within `<style>` tags. This is preferable for styling multiple similar elements on the same page.
   <!DOCTYPE html>
   <html>
   <head>
     <title>CSS Styling</title>
     <style>
       h2 {
         color: green;
       }
     </style>
   </head>
   <body>
      <h2>This heading is green</h2>
      <h2>Another green heading</h2>
   </body>
   </html>
  • Example: In this case, all <h2> elements on this page will be green.

3. External CSS (linking a separate .css file)

For larger projects, create a separate CSS file (e.g., `styles.css`) and link it to your HTML document. This is the most maintainable way to style web pages.

**styles.css:**

```css
  h2 {
     color: purple;
  }
```

HTML:

    <!DOCTYPE html>
    <html>
    <head>
      <title>External CSS</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h2>This heading is purple</h2>
      <h2>Another purple heading</h2>
    </body>
    </html>
  • Example: All <h2> elements will be purple because of the external CSS.

Using Other Elements

While the primary focus is on headings, the reference mentions that you can also change the color of other text elements such as paragraphs <p> and links <a>, and using <span> to style portions of text as well. The concept is similar: apply the color CSS property to the desired element.

  • Paragraphs:
     <p style="color: red;">This paragraph is red.</p>
  • Links:
    <a href="#" style="color: orange;">This link is orange.</a>
  • Span elements:
    <p> This is some text with <span style="color: blue;">colored portion</span> inside.</p>

Summary

Method Description Best for
Inline CSS Applying styles directly to HTML element with the style attribute. Single-use styling, quick changes
Internal CSS Defining styles in <style> tags within the <head> section. Styling multiple elements on one page
External CSS Linking a separate .css file for styling. Project-wide, maintainable styling

Related Articles