Why can't I can't change the color of my text in CSS?

Question

I was making an overlay with a disclaimer, and I added a style to it. For some reason, the p element was showing up in a different color. It would refuse to change to black. How do I fix this?

I've already tried using !important and opacity: 1;

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Asap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
}

.overlay {
    background: rgb(20, 20, 20);
    opacity: 0.4;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    display: flex;
}

.disclaimer {
    background: white;
    opacity: 1 !important;
    width: 28%;
    height: 28%;
    align-items: center;
}

.heading-disclaimer {
    color: black !important;
    opacity: 1 !important;
    font-family: Poppins, sans-serif;
    width: 100%;
    z-index: auto;
    text-align: center;
}

.p-disclaimer {
    padding-top: 20px;
    font-size: 17px;
    z-index: auto;
    opacity: 1 !important;
    font-family: Asap;
    width: 100%;
    color: black !important;
    text-align: center;
}

<div class="overlay">
            <!-- Roblox Version -->
            <div class="disclaimer">
                <h1 class="heading-disclaimer">Disclaimer</h1>
                <p class="p-disclaimer">
                    Disclaimer!
                </p>
                <button class="ok">OK</button>
            </div>
</div>

I want the color to be black, but it doesn't change when I do color: black;

It turns out like a greyish color, possibly the same color as the overlay background.

Can you give us the full CSS ? I tried your example and it shows as black. https://jsfiddle.net/s25zqfjb/ — Menelaos, Nov 03 '19 at 13:08
the current example have no problems , but check again your full css maybe there is another css data override on `p` element color . also check z-index layers maybe anoyher element is showen above `p` element with opacity so you feel that `p` color not correct — Ahmed El-sayed, Nov 03 '19 at 13:15
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Nov 03 '19 at 13:17

score 1 · Accepted Answer · answered Nov 03 '19 at 13:32

p is a child element of overlay so it inherit the opacity of its parent. you need to change only the opacity of the parent background for this use rgba, Change

.overlay {
    background: rgb(20, 20, 20);
    opacity: 0.4;

to

.overlay {
    background: rgba(20, 20, 20, 0.4);

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Asap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
}

.overlay {
    background: rgba(20, 20, 20, 0.4);
    height: 100%;
    align-items: center;
    justify-content: space-around;
    display: flex;
}
.disclaimer {
    background: white;
    opacity: 1 !important;
    width: 28%;
    height: 28%;
    align-items: center;
}

.heading-disclaimer {
    color: black !important;
    opacity: 1 !important;
    font-family: Poppins, sans-serif;
    width: 100%;
    z-index: auto;
    text-align: center;
}

.p-disclaimer {
    padding-top: 20px;
    font-size: 17px;
    z-index: auto;
    opacity: 1 !important;
    font-family: Asap;
    width: 100%;
    color: black !important;
    text-align: center;
}

<div class="overlay">
            <!-- Roblox Version -->
            <div class="disclaimer">
                <h1 class="heading-disclaimer">Disclaimer</h1>
                <p class="p-disclaimer">
                    Disclaimer!
                </p>
                <button class="ok">OK</button>
            </div>
</div>

Why can't I can't change the color of my text in CSS?

1 Answers1