CODEWITHSUNDEEP
htmlcss
Valeriu92
Valeriu92

Reputation: 118

Override paragraph size in CSS

I have 2 paragraphs in a div, and I need one of them to be 14px, and the other one 16px. I've tried to put the first one into a class but it doesn't take the 14px value... As a resume, I need "12 mei, 2014 | Sport" to have font-size 14px, and the other one 16px.

Here's my code:

#kolom4 {
    width: 1440px;
    height: 718px;
    background: #222222;
}
#kolom4 h2 {
    margin-bottom: 40px;
    padding-top: 29px;
}
#kolom4 p {
    color: white;
    font-size: 16px;
}
#kolom4 h3 {
    color: #fdd400;
    font-size: 20px;
}
.kolom4Date {
    font-size: 14px;
    color: white;
}
#section1 {
    float: left;
    text-align: left;
    margin-left: 249px;
    margin-bottom: 62px;
}
#text_img1 {
    float: right;
    width: 383px;
    height: 220px;
    margin-left: 20px;
}

#text_img1 a {
    float: right;
    text-decoration: none;
    color: #fdd400;
    font-style: oblique;
}
<div id="kolom4">
            <h2>Nieuws</h2>
            <div id="section1">
                <img src="images/kolom4Image1.jpg" />
                <div id="text_img1">
                    <h3>Lorum ipsum</h3>
                    <p class="kolom4Date">12 mei, 2014 | Sport</p><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam [...]</p><br>
                    <a href="#">Lees meer ></a>
                </div>
            </div>
        </div><!-- end kolom4 -->

Upvotes: 0

Views: 137

Answers (3)

Reinier Kaper
Reinier Kaper

Reputation: 1129

Change:

.kolom4Date {

to:

#kolom4 .kolom4Date {

Now the problem is you use ID's for styling, which are way too specific and you'll run into other problems in the long run. try using classes instead and it will become much easier.

Upvotes: 3

EricBellDesigns
EricBellDesigns

Reputation: 965

You are overriding the style font-size: 16px because of the way you're targeting the elements. Instead of using 

#kolom4 p{}

use:

.kolom4p{ font-size: 16; }

then add the class kolom4p to the paragraph.

Upvotes: 0

Bioto
Bioto

Reputation: 1117

Try this:

.kolom4Date {
    font-size: 14px !important;
    color: white;
}

Upvotes: -1

Related Questions