What do the different CSS text colors mean?

  • Author
    Posts
  • #1924517

    windwhistle
    Member

    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.

    #1924694

    vinoddalvi
    Member
    #1924714

    windwhistle
    Member

    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.

    #1924780

    kathrynwp
    Staff

    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.

    #1924781

    vinoddalvi
    Member

    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

    #1924782

    windwhistle
    Member

    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.

    #1924783

    windwhistle
    Member

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

    #1924784

    kathrynwp
    Staff

    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. :-)

    #1924785

    windwhistle
    Member

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

    #1924786

    kathrynwp
    Staff

    Ah, gotcha – no, they’re not errors at all. It’s true that the colour does make them “pop” a bit. :-)

    #1924790

    kathrynwp
    Staff

    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.

    #1924791

    windwhistle
    Member

    K, thanks a bunch!

The topic ‘What do the different CSS text colors mean?’ is closed to new replies.