SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Where do you put your CSS properties ?

    I'm fairly certain that I have recently read the following about placement of CSS properties

    1. If possible all CSS should be in external Style Sheets
    2. If absolutely required some CSS can be in the <style>...</style> tags at the top of your pages
    3. You should make every effort to avoid using style="" in your html markup.


    Now I understand that method 1 is the most efficient because if you are using just 1 or 2 external style sheets then they will be download once for the first page using them and then not downloaded again saving on bandwidth.

    And personally I can't see much use for 2, it you are doing it that way why not just add the styles to your style sheet.

    And I can see the reason for 3, since it makes changing style a nightmare that they are supposed to help avoid.

    However my question is if you want to hight light just a couple of words on a page in a way that is unique to you website is it really the most efficient method to create a class or id selector in a style sheet and appliy the to the text using a <span> ?

    Is that really the best way of doing things and what was intended ?

    I have currently ended up with a few style classes each with a single property textBold, textItalic and textRed. I then apply one or more of these to span tags to highlight any bits that need highlighting using the class property of the html tag (i.e. class="textBold textRed"). But it just doesn't feel slinky and correct ( I'm a great believe with computer related stuff that if it doesn't feel slinky and correct then either it isn't or it's a work around for a bug of some sort).

  2. #2
    SitePoint Addict
    Join Date
    Mar 2002
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA

    1. If possible all CSS should be in external Style Sheets
    2. If absolutely required some CSS can be in the <style>...</style> tags at the top of your pages
    3. You should make every effort to avoid using style="" in your html markup.
    It is easier to maintain a site if you use external style sheets as you don't have to change every page to make a change.

    It may be easier if one particular page is different from the rest of the page to just have the CSS at the top of the page.

    Putting inline styles is IMHO essential to override some settings otherwise you'll end up with dozens of classes that are only slightly different from each other.

    Nick
    All4YourPC for all your PC needs. Custom software.
    Websites. Web marketing. Training.
    http://members.aol.com/nickjc67

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

    I think your list and assumptions are more or less correct. There are always exceptions of course.(If you have a one page site then theres not much point to having a separate style sheet.(silly example really).

    If you have a page that uses an external stylesheet
    then you might want to change a couple of items on that page only, then you could add a the new styles to the head of the document to overrule your external stylesheet.

    However this will not allow you to make sitewide changes from one file but it may suit the purpose.

    I'm of the opinion that inline styles should be avoided however an inline style with have more specifity (is that a word?) than an external stylesheet (or styles in the head). So you could use an inline style to overide any other style placed previously on that element, if you have the need. However good coding practices can usually offset the need for this and I would usually use a new class.

    class="textBold textRed"
    This is quite acceptable but there may be other ways of achieving the effect.

    e.g.
    Code:
     
    <style type="text/css">
    div {
     color: #FF0000;
    }
    div span {
     color: #0000FF;
    }
    </style>
    </head>
    <body>
    <div>
    <p>Hello this is red <span>and this is blue </span>and this is red again</p>
    </div>
    But it does depend on the situation. I would however, avoid using classes or id's like "textRed" as further down the line you may decide to change that text to another colour. Then you could simply change the external stylesheet property but all your classes throughout your site would still say textRed when in fact they may now be blue.

    A more generic name may be useful such as "highlight" or whatever you can think of that applies to the situation but isn't specific. In that way your code will still make sense.

    Hope that all makes sense.

    Paul

  4. #4
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For things like bold and italics you can use the <strong> and <em> tags. Then you can have a highlight class for the color change.
    Also, if bold and red always go together, you can chanage the CSS of <strong> to something like:
    Code:
    strong{
    font-weight:bold;
    color:red;
    }
    and avoid using a class.

    By manipulating selectors and taking advantage of inheritance and the cascade you can reduce the use of classes even further.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    All of mine are in external files. The only time I have them in the document is when I'm initially building a template. After I finish most of the template, I move the styles into another file and link it.


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
  •