Need help? Check out our Support site, then


What do the different CSS text colors mean?

  1. Could someone tell me what the different text colors in my CSS mean? I know comments/annotations are brown. Almost everything else is either black or blue (I have trouble telling the two apart). Then there's the occasional red. I assume the red is important, perhaps errors that need to be fixed, but don't know. I haven't been able to find a key to the colors anywhere. Could someone please explain what they mean (especially the red)?

    The blog I need help with is piedtype.com.

  2. Thank you, but that's not what I was asking.
    If you look at your CSS stylesheet editor (assuming you've done some editing there) for your own blog, you'll see the text contains several different colors. It's not just all black type. I'd like to know what the different colors indicate.

  3. The various colours in the Customizer's CSS editor help define each part of the CSS.

    Some of the colours are reused for more than one thing, but the main elements are:

    • blue indicates an ID or a hex colour code
    • grey indicates a class
    • green indicates a selector
    • black indicates a CSS property
    • dark green and bright orange generally indicate a CSS value

    You can learn more about what the different components of CSS are here:

    http://en.support.wordpress.com/custom-design/css-basics/

    http://www.htmldog.com/guides/css/

    Just let me know if you need further help.

  4. Hi @windwhistle,

    Sorry for misunderstanding.

    @kathrynwp has provided very good answer for your question in her last reply.

    As @kathrynwp mentioned there are some colours which are reused for more than one thing and she has listed the main elements but i want to add one more following main element which is not listed in the list.

    • Brandy Punch color ( #a50 ) indicates a CSS comment

    Cheers,
    Vinod Dalvi

  5. Thanks, both of you. That explains almost everything. So what does the red mean? For example, in my current code there's a line "text-transform: uppercase;" and "uppercase" is red. Or "font-weight: bold;" and "bold" is red. Does the red mean those items need to be changed or corrected in some way? Maybe the font-weight should be expressed as "700" instead, but I don't know what the alternative to "uppercase" would be.

  6. Oh, and just for future reference, are these colors standard for all CSS or are they unique to WordPress?

  7. Things like "uppercase" and "bold" are just CSS values - the red colour (which I expressed earlier as bright orange) doesn't mean that they need to be changed or corrected. :-)

  8. Thanks, kathryn. I've been concerned that those were errors.

  9. Ah, gotcha - no, they're not errors at all. It's true that the colour does make them "pop" a bit. :-)

  10. Oh, and just for future reference, are these colors standard for all CSS or are they unique to WordPress?

    They are just part of our CSS editor, not standard anywhere, I don't think.

  11. K, thanks a bunch!

Topic Closed

This topic has been closed to new replies.

About this Topic