SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this good practice? Body CSS to stl

    Code:
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:14px;
      background:url(image.jpg);
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center top;
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this good practice? Body CSS to style text

    Hi,

    I am currently using the below body CSS. This means when I write content in the website I do not need to use p tags (<p> and </p>).

    Code:
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:14px;
      
    }
    Should I not do this. Is there a reason why? Do you recommend something else? I just find this easy. Obviously if I need a new paragraph I do use p tags.

    Thank you for your comments.

    Matt.

  3. #3
    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,

    What does ''stl" mean ?

    You would be better off using shorthand for background properties as it saves a massive amount of code.

    e.g.
    Code:
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:87.5%;/* 14px unless user has changed it*/
      background:url(image.jpg) no-repeat fixed 50% 0;
    }
    It's best practice to use percentages for your font-size as that honours users preferences. Some user set their font-size larger (in browsers preferences ) to make it easier to read and they will get 87.5% of their larger font-size. Other users who haven't changed defaults will most likely get the 14px you wanted.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - not all of my post was posted for some reason. Should have read "Is this good practice? Body CSS to style text".

    I find that if I use the body CSS to style text, when I write content on the website I do not need to use P tags (<p> </p>) until I need a new paragraph. Is this good practice?

    Matt.

  5. #5
    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 MatthewBOnline View Post
    Hi,

    I am currently using the below body CSS. This means when I write content in the website I do not need to use p tags (<p> and </p>).
    The css rule above has nothing to do with what tags you use as you are just describing a base font size for the document. The p tag will inherit that font-size automatically (see your other post as I explain why you should use percentage font-sizes anyway).

    What you intend doing (not using p tags) is very bad practice as all content in an html document must be in the appropriate tag to satisfy all manner of devices.

    If you have a paragraph then use a p element as that is what it is designed for and is the semantically correct element to use. A lot of devices are semantically driven (search engines, screen readers, accessibility tools, human readers) and all look at the html document to decide what's important and what is not important which they do by looking at the tags that you have used. (It is also invalid to have inline elements as direct children of the body in some doctypes).

    A documents structure must be complete and exact and describe the document as semantically correctly as possible. Notwithstanding the above the actual process of doing this invariably leads to better and more easily maintained and stylable documents by the simple act of having it described correctly from the start.

    Never skimp on semantics

    If you don't use a p tag then what do you do when you want a new paragraph? Breaks are not meant to create new paragraphs and can't easily be styled and should never be used just to make space.

  6. #6
    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)
    Threads merged

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - I will always use p tags.

    I do not need to define p in CSS do I. It will just use the body tag, correct?

    Matt.

  8. #8
    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 MatthewBOnline View Post
    OK - I will always use p tags.

    I do not need to define p in CSS do I. It will just use the body tag, correct?

    Matt.
    Font-size is inherited automatically into elements like p, span, div etc so when you set it on the body they will automatically honour that size so you don't need to set it. Generally, that is the approach I take and I look at the document/PSD and see what size most of the text is supposed to be and then I set that size in the body. I then only need to set the font-size for elements that are different.

    Elements like heading tags are defined by the UA (user agent) stylesheet so you would need to define their size explicitly.

    You may want to look at using a reset (or normalise) stylesheet though as you still need to cater for the default margins of the p element which vary between browsers on what default is actually set. This applies to most elements.


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
  •