Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change default text color for entire site

Tags:

css

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

like image 953
buckeyestargazer Avatar asked Oct 23 '25 23:10

buckeyestargazer


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
}
like image 110
Linux4Life531 Avatar answered Oct 25 '25 15:10

Linux4Life531


* {
  color: #b6b6b6
}

If you are begineer, i add a precision:

"*" target entire website, you can change background-color for example and whatever property you want.

like image 27
ChdPE Avatar answered Oct 25 '25 15:10

ChdPE