CODEWITHSUNDEEP
htmlcss
mitchj
mitchj

Reputation: 623

Why is my css not being applied?

I have a simple html file that I want to apply some css to change the look but the css is not being applied to my content.

I know that I should probably put the css in an external file but I am just learning from an example in a book right now.

Here is the html. Can anyone help please? Thanking you in advance!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .content p{
        background-color:#C0C0C0;
        padding: 3px;
    }
    .heading p{
        display: inline;
        background-color:black;
        color: white;
        font-weight:bold;
        padding:3px;
    }
</style>
</head>
<body>
    <div id="heading">
        <p>Heading A</p>
        <p>Heading B</p>
        <p>Heading C</p>
    </div>
    <div id="content">
        <p>Paragraph A</p>
        <p>Paragraph B</p>
        <p>Paragraph C</p>
    </div>
</body>
</html>

Upvotes: 1

Views: 413

Answers (3)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

your css should be

# = id . = class

from

.content p{
    background-color:#C0C0C0;
    padding: 3px;
}
.heading p{
    display: inline;
    background-color:black;
    color: white;
    font-weight:bold;
    padding:3px;
}

to

#content p{
    background-color:#C0C0C0;
    padding: 3px;
}
#heading p{
    display: inline;
    background-color:black;
    color: white;
    font-weight:bold;
    padding:3px;
}

I would also add that ids should be unique on a page, meaning that you can't have more then one element with the same id, therefore its almost always better to use classes for styling.

Upvotes: 3

Johan Karlsson
Johan Karlsson

Reputation: 6476

.content p matches

<div class="content">
    <p>Paragraph A</p>
    <p>Paragraph B</p>
    <p>Paragraph C</p>
</div>

what you are looking for are: #content p

Upvotes: 1

ascorbin
ascorbin

Reputation: 111

You are applying your style to a class, not an ID. Change ID in HTML to class.

i.e. <div class="heading">

Upvotes: 3

Related Questions