CSS in HTML colour

Question

I want to make a heading in a certain colour but only that one heading and nothing else but it isn't working for me.

<html>
    <head>
    <title> website </title>
    <style type="text/css">
  body {
    color: #0066FF;
    background-color: #66FF33 }
  </style>
    </head>
    <body>
    <h1> heading </h1>
    <h3> sub heading </h3>
    <p> abcdefghijklmnopqrstuvwxyz

    </body>
</html>

I only want the heading to change colour. If you can also tell me how to individually change the text and sub heading colour it would be nice.

I dislike referring to this site, but it comes up first when you do a google search for "css", it does have decent tutorials even if they aren't always 100% accurate, and it does hold the answers you seek. On page 1. w3schools.com/css — DACrosby
– DACrosby, Commented Mar 13, 2013 at 23:56

Adam Plocher · Accepted Answer · 2013-03-13 23:57:33Z

4

Try this:

<style type="text/css">
    h1 {
        color: #0066FF;
        background-color: #66FF33 }  /* this will change all h1 tags (heading) */

    h3 {
        color:red; } /* this will change all h3 tags (sub-heading) */

    p { 
        color:blue; } /* this will change all paragragh (P) tags */

    /* And a few more examples: */

    .someClass { color:green; } /* this will change all elements with the attribute class="someClass" to green */

    #someID { color: purple; } /* this will change an element with the id of someID to purple (there should only be one) */
</style>

This will change the style of the <h1>, <h3>, and <p> tags. Also you're missing a closing paragraph tag (</p>)

edited Mar 13, 2013 at 23:57

answered Mar 13, 2013 at 23:51

Adam Plocher

14.3k6 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Treps · Accepted Answer · 2013-03-13 23:55:12Z

0

<html>
    <head>
    <title> website </title>
    <style type="text/css">
  body {
    color: #0066FF;
    background-color: #66FF33 }
  #own_color {
    color: #FFFFFF;
  }
  </style>
    </head>
    <body>
    <h1 id="own_color"> heading </h1>
    <h3> sub heading </h3>
    <p> abcdefghijklmnopqrstuvwxyz

    </body>
</html>

The code above is for just ONE header. If you want the same CSS-style for two or more headers you'll need to change the # to a dot(.) which representing a class. And type for example: heading .

answered Mar 13, 2013 at 23:55

Treps

7983 gold badges13 silver badges29 bronze badges

5 Comments

Adam Plocher Over a year ago

If he's changing it to a class, then he also needs to add a class attribute to the element (instead of using id)

Treps Over a year ago

I created a ID called #own_color. And it just says that the font color should be white. If you type .own_color (a class) and write <h1 class="own_color">Test</h1> it will we white. You can use this (or rename it) class on almost every tag in your HTML-file. ID (#): Is used to specify a style for a single, unique element. CLASS (.): The class selector is used to specify a style for a group of elements. Unlike the ID selector, the class selector is most often used on several elements.

Treps Over a year ago

Yes indeed Adam Plocher. Use a CLASS for several specified elements. And a ID for a unique element. You can also add CSS to every tag as Adam described before.

Popnoodles Over a year ago

But since there should only ever be one h1 on a page it doesn't really need an id.

Treps Over a year ago

Yeah, if it's just one <h1> you can style the tag.

Collectives™ on Stack Overflow

CSS in HTML colour

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related