'Default Color in CSS

Pretty new to this. Let's say define the following in my CSS file (no color attribute)

.time {
    border: 1px solid #666666;
    background: #555555;
    text-align: center;
    cursor: pointer;
    transition: all linear 0.3s;
    padding: 1px 2px;
    font-size: .8em;
}

and then use it like this

<div class="time" ...

Where does the text color come from? Is there a default, does it use on defined in a previous tag, ...?

htmlcsscolors


Solution 1:[1]

There are 3 cases in this situation:

  1. It will take the first color of a parent if a parent has defined a color
  2. If the parent has no defined color then it will take the body or html color
  3. If html and body elements have not defines color after that it will take browser default color.

Solution 2:[2]

There are two parts to this:

  • Some CSS properties are inherited from their parent. color is one of those. Technically, inherit is color's default value.
  • The browser defines various initial values. The initial value for color is usually set on the <html> element, via a browser-internal CSS stylesheet, and can be different from browser to browser, but is usually black, a color similar to black, or a color designed to contrast with the default background color (in dark mode, for example).

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/color

Note that my description isn't 100% technically accurate, but it's pretty close. color has been around for a long time and has inherited a bit of baggage over the years.

Solution 3:[3]

You can do

body {
 color: "white"
}

Change white to any color you want.

Then if you want to override in specific tag, you can set it in class like your .time class.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yudiz Solutions
Solution 2
Solution 3 halfer

Related Questions