CODEWITHSUNDEEP
htmlcss
webdad3
webdad3

Reputation: 9080

CSS override using same name?

I'm playing around with HTML5 and CSS3. As you can see below I want a site wide <p> tag style but then in the footer I would like a <p> tag in there as well but to have a different color and no rounding.

p {
    background-color: #1a315f;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
    color:#ffffff;
    text-align: center;
    box-shadow:5px -5px 10px #000000;
}

footer {
    width:100%;
}

footer p{
    background-color: #FEAF48;
    display: -webkit-box;
    -webkit-box-orient:horizontal;     
}

As you can see in this link I get the different color, but the rounding still occurs. What do I need to change to the footer p{ so I don't get the rounding?

Upvotes: 0

Views: 163

Answers (2)

pricco
pricco

Reputation: 2783

Try:

footer p{
    background-color: #FEAF48;
    display: -webkit-box;
    -webkit-box-orient:horizontal;     
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

Upvotes: 2

mixm
mixm

Reputation: 531

add this footer p {-moz-border-radius: 0; -webkit-border-radius: 0; }

Upvotes: 2

Related Questions