CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 1801

Setting multiple paragraph styles in css

This is a top level question and is more based on my ignorance of css than anything else. I am trying to create two paragraph styles in css, one with a 20px font size and another with a 14px font size. However, no matter what I seem to do, the fonts come out the same. Attached is an example of what I am doing right now, if anyone can point me to a solution I would great appreciate it. For brevities sake I am leaving out un-necessesary code.

the html code looks like this

<p>This is the html section with 20 px font</p>

<p class="new_font"> This is the html section with 8px font</p>
/* I have also tried this with a <div class="new_font"> and and <p id="new_font>"*/

the css code looks like this

p {
     /*text-indent: 1.5em;*/
     font: 20px Helvetica, Sans-Serif;
     color: white;
     overflow: hidden;
     padding: 15px;
     text-align: justify;
     background: rgb(0, 0, 0,0.3); /* fallback color */
     background: rgba(0, 0, 0, 0.7);
}
p new_font {
     /*text-indent: 1.5em;*/
     font: 14px Helvetica, Sans-Serif;
     color: white;
     overflow: hidden;
     padding: 15px;
     text-align: justify;
     background: rgb(0, 0, 0,0.3); /* fallback color */
     background: rgba(0, 0, 0, 0.7);
}

Upvotes: 1

Views: 16471

Answers (3)

Phil Cook
Phil Cook

Reputation: 2065

Your simply missing the class dot declaration in your CSS.

If your referencing classes in CSS it's a . otherwise if your referencing a ID it's a #.

p {
    /*text-indent: 1.5em;*/
    font: 20px Helvetica, Sans-Serif;
    color: white;
    overflow: hidden;
    padding: 15px;
    text-align: justify;
    background: rgb(0, 0, 0,0.3); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
}
p.new_font {
    /*text-indent: 1.5em;*/
    font: 14px Helvetica, Sans-Serif;
    color: white;
    overflow: hidden;
    padding: 15px;
    text-align: justify;
    background: rgb(0, 0, 0,0.3); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
}

Upvotes: 1

AtheistP3ace
AtheistP3ace

Reputation: 9691

Fiddle: http://jsfiddle.net/AtheistP3ace/dh9av5jj/

You want to make p new_font into p.new_font.

p new_font says there is a paragraph with a new_font element inside it. new_font is not an element type.

p .new_font says there is a paragraph with an element inside it with the class new_font.

But you have new_font class on the paragraph so that selector is:

p.new_font which says I have a paragraph with the class new_font.

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17457

You're CSS is invalid, which is why it isn't applying:

p new_font {
   /* ... */
}

That should be written as

p.new_font {
   /* ... */
}

p new_font reads in English as "select all new_font tags that reside inside a p tag".

p.new_font reads in English as "select all p tags that have a class attribute set to new_font"

Upvotes: 3

Related Questions