SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Darren Lewis's Avatar
    Join Date
    Jul 2002
    Location
    UK
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re-defining a tag

    I'm still new (and slightly confused) with CSS.

    I want to re-define my <p> tag for part of the page. Most of the page (and my site) will use the standard <p> tag which has this css
    Code:
    p {  font-size: 10px}
    How could I get another definition for the <p> tag, eg for an area that I wanted to be a larger font?

    Should I use .news p {font-size: 16px} or p.news {font-size: 16px}

    Thanks.
    Last edited by Darren Lewis; Oct 1, 2002 at 10:55.
    Censura - Add reviews and ratings to your site

  2. #2
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .news p {font-size: 16px}
    will make every <p> within a tag with the .news class applied to it.

    eg.

    <div class="news">
    <p>this text will be 16px</p>
    <p>so will this</p>
    </div>

    whereas

    p.news {font-size: 16px} will only apply the style to paragraphs with the news class.

    eg.

    <p>this text will be unaffected</p>
    <p class="news">This text will be 16px</p>

    hope that helps

    cheers

    alastair

  3. #3
    SitePoint Zealot Darren Lewis's Avatar
    Join Date
    Jul 2002
    Location
    UK
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that makes sense. So I could have <td class="news"> and then define my tags for that table cell eg <p>, <img> etc by having:-
    .news p {font-size: 16px}
    .news img {float:left;}

    Or does it have to be within a <div> tag?

    Thanks.
    Censura - Add reviews and ratings to your site

  4. #4
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works with tables and such too.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  5. #5
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Darren Lewis
    Yes that makes sense. So I could have <td class="news"> and then define my tags for that table cell eg <p>, <img> etc by having:-
    .news p {font-size: 16px}
    .news img {float:left;}

    Or does it have to be within a <div> tag?

    Thanks.
    CSS is very powerful when used with standards-compliant browsers.

    There are problems with other browser such as NN4.7 with inheritance, but the ability to do stuff like:

    td form p { font-size: small }

    is fantastic. It means that every paragraph of text within a form that is within a td (table cell) will be small. Huge amount of things can be done with CSS!

    I hope that answers the question: does it just work with div elements. It works with all elements, .classes and #ids, and pretty much all elements can have a class and id.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •