HTML- font color not chaning

Web Development Front-End
1

Hi all,

I’ve recently started dabbling in HTML and have found myself in a problem. I am trying to change the font color in the green box to from red to blue. However, once I put this piece of code in .body-text{} it does not change.

I understand that the further you go down the css document, the rule at the end wins, then why is my font color not changing to blue. Any help would be really useful! This is my code below:

The CSS Code is:

body {
background-color: #315cd4;
font-size: 18px;
color: green;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}

h1 {
font-size: 30px;
color: blue;
font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times ‘New Roman’,serif;
margin-bottom: 0px;
}

h2{
margin-top: 0px;
}

p{
color:#ed3b18 ;
margin-bottom: 0px;
margin-top: 20px;
line-height: 1.4;
font-size: 15px;
font-style: italic;
font-weight: normal;
}

.body-text{
background-color:#4388a1;
padding:50px;
color: green;
font-weight: lighter;
}

Corresponding HTML code:

My First Website

CSS Selectors

An important thing to know

<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<div class="body-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <p>Lorem ipsum <a href="#" class="important-link">fhdkd</a> dolor sit amet, consectetur adipiscing elit, do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
2

How well do you know HTML, by itself, without CSS? My long time advice has always been to learn HTML well, and be comfortable with what to expect from each element in terms of behavior* (presentation) before starting to learn CSS. Try for one week to just work with raw HTML, no style sheets. What can you share with us of what you will have seriously learnt?

  • behavior is not an applicable term in HTML since that implies some sort of logic. HTML is not logic.There is no program, only markup. Granted, a program will parse and render it (the HTML engine), but it will be handling everything as declarative. There is no conditional aspect, whatsoever.

In the context of relating presentation to behavior, for this purpose, what is the default behavior of a <p/> element? What is the default behavior of an unordered list, and/or of an ordered list? What about <blockquote/>?

Take this time to explore the W3C HTMLElement page and put your nose into it. Don’t skip this opportunity to actually start in the right place.

3

Hi,
Let me see if I can help explain.

In your code, you have declared a color property and value for your paragraph elements using the p type selector.

In your HTML, you created a div element with a class name, which you have targeted in your CSS to try to change the color of the paragraph text inside the div to green.

My understanding of the problem you’re having is that you don’t know why the color property declared using the div classname isn’t overriding the color property declared using the p selector further up -because you believe that the last rule declared in a stylesheet overrides rules higher up.

Unfortunately this is not always the case! CSS specificity and inheritance also decide which rules apply, and it doesn’t always follow your current understanding of the cascade and the “last rule wins”.

In this case, the color rule of your div does not apply because a color property applied to paragraphs is always more specific than a color property applied to the paragraphs parent div element, no matter if the div rule is declared last, or if it is using a class name.

The color property applied to a div will only work based on inheritance, which means everything inside the div will inherit the color property until a more specific rule is written. The paragraph rule is more specific, so even though it is declared earlier in the stylesheet, it still overrides the div color property.

Applying a color property to your div is actually still working to change the color of text directly inside your div - you can write text directly into the div in your text-editor without wrapping it in a paragraph to see that this is true. In that case, the text would be green, but as soon as you have paragraph elements inside a div, they will always inherit the color declared using the paragraph selector (or a class on the paragraph element).

Eg:

<div class="body-text">
This is text written directly into the div and will be green using your body-text ruleset.
<p> This text will not be green because the p rule is more specific </p>
</div>

If this doesn’t make sense, you will just need to trust that color applied to a paragraph is more specific than color applied to a div, until you learn more about specificity, the cascade and inheritance.

If you want the paragraph color of your divs to change to green, you need to be more specific and target the paragraphs inside the div more directly like this (as one option):

.body-text p {
color: green;
}

Now I am using a descendant selector to say I want all paragraphs inside elements with a class of .body-text (in this case it means your div) to be green. This is now more specific than your general paragraph rule above it.

2 Likes