SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: body {} p {} ?

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    body {} p {} ?

    If I have text on an html page without a <p> </p> does the font declaration in the body {font-family etc.} format the text?

    Rick

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Southern Georgia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually I guess what I mean is does the body {} declaration in the external CSS stylesheet take precedence?

    rick

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you apply the font-family to the body element then it will be inherrited into all elements in the page (apart from a few special elements like form controls, pre, and a few others I can't remember at the moment).

    You don't then need to apply the font-family to p elements, heading tags , uls, divs spans etc. because they will all inherit automatically from the parent. That's the beauty of css.

    On the other hand if you want a different font-family for the p element then just apply it as per normal.

    p{font-family: etc.....}

    The rule will be more specific and over-ride the rule applied to the body element.

    Not all properties are inherited and setting a margin on the body won't be inherited into its children because that would be silly

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I'm trying that now to see if I can have text on an html page format without the <p>, saving that for other paragraphs.

    I think you wrote The Ultimate CSS Refeence - correct?

    Now I'm placing a 720px chart that I wish to have on the right of the page.

    Do I incorporate a float-right for this?

    How does that effect nearby text used to describe the chart?

    Rick

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Thanks Paul - I'm trying that now to see if I can have text on an html page format without the <p>, saving that for other paragraphs.
    It's best to have all text marked up with some kind of elementóbe it a <p>, <h1> or whatever. You can style various <p> differently by adding classes to them etc.

    I think you wrote The Ultimate CSS Refeence - correct?
    Yep, he is da man!
    Now I'm placing a 720px chart that I wish to have on the right of the page.

    Do I incorporate a float-right for this?

    How does that effect nearby text used to describe the chart?
    A lot will depend on the rest of the page. Normally, if you float an image, text and other element will flow around it. If that's not what you want, then you need a slightly different strategy. for example, if you want a caption for the image, you could wrap image and caption in a div which is then floated, so that they stay together.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Thanks Paul - I'm trying that now to see if I can have text on an html page format without the <p>, saving that for other paragraphs.
    As Ralph said there should be no other text on the page that is not inside some kind of semantic container. Having plain text as a direct child of the body would be invalid in strict anyway.
    Code:
    <body>
    test
    </body
    The above would be invalid and not allowed.

    If there is text on the page then it has some kind of meaning and there will be an appropriate html element into which it should be placed. Think about the text's purpose and then use the html that best describes it. It's likely to be a paragraph, or a heading of some sort.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK Paul . . I got that figured out.

    I haven't had much time to get back to this but I'm trying to now.

    Question . . . on the html page.

    I noticed that placing <p> text </p> and images and Headings all fall in "order" on the page that they are placed in using html markup.

    Is that correct?

    If so I have to learn how to size my <p>paragraphs</p>, images, blocks of text, CSS menus, and a slide show or flash for some pages.

    I have 80 some jpeg graphical charts that need to be designed to fit the page without resizing or the quality will suffer.

    How do I go about making everything fit the page and how do I set the Internet site page default width to 960?

    Thanks . . . Rick

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To center a block element you give it a width and then use margin:auto and it will center in the available space. Therefor to have a site centred you create a wrapper with the above rules and keep all your content inside.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
    }
    h1, h2, h4, h4, h5, p {
        margin:0 0 1em;
    }
    #outer {
        width:920px;
        margin:auto;
        border:1px solid #000;
        padding:10px;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <h2>Main Heading</h2>
        <p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
    </div>
    </body>
    </html>
    As to how to lay out the remaining page that is a far reaching question that encompasses all of html/css and couldn't be covered in a single post.

    You first need to study how to lay elements out on the page using floats and static positioning. Don't fall into the trap of absolutely placing everything as that's not viable for a fluid web page.

    Static (non positioned) elements can be nudged around using margins but when you need horizintal alignment you would usually use floats. However, floats are a complicated subject so you may want to read up on them first and get a hang on how they work.

    If you have a more specific request we can show you how to lay out certain things but would need to know more details.


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
  •