How to change default text color for entire site

Viewed 2516

I built a website with a WYSIWYG website builder using a template provided by the program. I have since abandoned the template and use CSS to style everything, but for some reason I cannot change the default text color of the whole site.

I thought that simply changing the body color in the CSS would change the default color:

body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #ff9900;
background-color: #750204;

So I tried changing the color: #ff9900 to "b6b6b6" but that didn't work.

Then I literally replaced every instance of ff9900 in the CSS file to b6b6b6 and still the website shows the color ff9900. I don't get how that's possible.

Obviously I don't really know what I'm doing so be gentle. Thanks for any advice.

EDIT: here is what I see when I inspect the live page: enter image description here

2 Answers

Why your code is not working

Although your code logically is correct, you must take into account how CSS works, especially in how it sets styles. If you have a certain element with that has color: blaa;, then it will always set that after what it inherits. So when you use body {blaa...}, you will only be able to see the results if nothing else later on overrides that. Here is a diagram to show you this:

For an element with the ID of "ID" in something like: body > nav > #ID then the styles will be applied like this:

  1. BODY STYLES:
  2. NAV STYLES
  3. #ID STYLES or .CLASS STYLES
  4. * STYLES

In this, if you specify a rule like: body { color:red }, and then #id { color:blue } then the color will be blue as it is the latest out of the 2 in the list above.

Why dooj sahu's answer has been down voted

This is because !important is not the best to use when there are other ways to go without it.

The way to do it

The best way to solve your problem is by using;

* {
  color: #b6b6b6
}

Simply use !important:

    body {
        font-family: Lato;
        font-size: 14px;
        line-height: 1.42857143;
        color: #b6b6b6 !important;
        background-color: #750204;
    }
Related