SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Best Practices in CSS?

    Hi,
    I am new to CSS (and this board). I was learning for it for the past 2 days and I love it. My next site, http://AceWebNet.com , which is only HTML based now, will be made with CSS. So far, I did not have any problems with CSS. I was able to do most things I want, all worked.

    However, what are the best/bad practices with CSS?
    I was not able to find anything like that.

    Here are some questions that I have now, but please list more tips, if you can.

    1. What things are better to leave to HTML? What things to CSS?
    2. is CSS within the document better or an external file.css is? (Right now, I prefer the external one, since I will use it site wide.)
    3. How are CSS recognized amount browsers? I am on XP, the only minor problems I had been in NN 4.75. How is CSS in other OS?
    4. CSS is better for bandwidth, I believe? What have your experience showed you?
    5. In some cases, I saw sites (CNN.com a few times) that for some reason would not load the .css file, but after a refresh, it would.

    6. Any other tips would be great for me and other newbies.

    Thanks!

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :.:

    This is the perfect thread. I hope the elite will take the time to answer every question you proposed.

    Nicely done!

    Laters,
    Cosmic.

  3. #3
    SitePoint Wizard johnn's Avatar
    Join Date
    Mar 2001
    Location
    Southern California, USA
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the 8 master series at richinstyle.com for dos and donts.

  4. #4
    SitePoint Wizard johnn's Avatar
    Join Date
    Mar 2001
    Location
    Southern California, USA
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I kinda newbie to css too. From what I know is that do not use inline style because it will be deprecated in future browsers I believe. I think using external style sheet is the fastest way for browser. I think using css will cut your site's size in almost half so it's great for bandwidth

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Best Practices in CSS?

    Originally posted by AceWeb
    1. What things are better to leave to HTML? What things to CSS?
    I don't think you're fully understanding the concept of CSS. It isn't a competitor of HTML; both standards work in conjunction. HTML is the language you use to write the markup, and CSS is what you use to control how that markup gets displayed in the browser.

    Originally posted by AceWeb
    2. is CSS within the document better or an external file.css is? (Right now, I prefer the external one, since I will use it site wide.)
    I find that it's more convenient to link to external files, however, this is again an issue of the theory of CSS. The cascading part (CSS = Cascading Style Sheets) means that local style sheets (in the document itself) will take precedence over external sheets 100% of the time. So to answer this one, you need to examine what your needs are, and then go from there.

    Originally posted by AceWeb
    3. How are CSS recognized amount browsers? I am on XP, the only minor problems I had been in NN 4.75. How is CSS in other OS?
    All modern browsers have some form of support for CSS. Note that I said modern; Netscape 4 is now five years old. You might want to read a related page for some more information.

    Originally posted by AceWeb
    4. CSS is better for bandwidth, I believe? What have your experience showed you?
    In theory, an external CSS file only needs to be downloaded once, thus saving bandwidth (albeit a minimal amount). What you're really cutting down on is clutter; getting rid of all those stylistic markup tags makes your code cleaner. I'm not anal retentive enough to do any bandwidth comparisons for "before and after CSS" pages.

    Originally posted by AceWeb
    5. In some cases, I saw sites (CNN.com a few times) that for some reason would not load the .css file, but after a refresh, it would.
    Something hiccuped.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by johnn
    From what I know is that do not use inline style because it will be deprecated in future browsers I believe.
    That's incorrect. If that happened, one of the fundamental principles of CSS would be destroyed. Remember, CSS = Cascading Style Sheets. Where, then, would the cascading aspect come in?

  7. #7
    SitePoint Wizard johnn's Avatar
    Join Date
    Mar 2001
    Location
    Southern California, USA
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm kinda new to css. I read in a book, it says
    " ...the "style" attribute has been deprecated in the XHTML 1.1 recommendation, meaning that while it is still valid to use, it is marked for elimination in a future version of XHTML. The reasons for this are complicated, and have been hotly debated, but it comes down to the question of whether the "style" attribute is appropriate within XHTML markup, which is supposed to be a purely structural markup language. You may wish to consider phasing out the use of the "style" attribute in your markup in order to conform to the W3C vision of CSS and markup"

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Basically HTML and XHTML are structural markup languages... CSS is stylistic and preferably CSS should be linked externally but there are still swings and roundabouts as previously stated. The core themes being the aims are separating style from structure.

    Concerning inline CSS, within XHTML Basic; "the style element is not supported..." quote from XHTML Basic TR.

    However you could still use external CSS via the rel, and yes I do use a little XHTML Basic but that's for my WVYFC creation in another directory.

    One good method to use when applying CSS is to try to test your pages in different user-agents to try see if there are any quirks.
    Last edited by xhtmlcoder; Jul 3, 2002 at 04:19.

  9. #9
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attributes and elements are different. Attribute: <h1 style="">, element: <style type="text/css">.

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mattjacob

    Originally posted by johnn
    From what I know is that do not use inline style because it will be deprecated in future browsers I believe.
    That's incorrect. If that happened, one of the fundamental principles of CSS would be destroyed. Remember, CSS = Cascading Style Sheets. Where, then, would the cascading aspect come in?
    Actually, this is 100% correct. With CSS2 positioning being the recommended standard, the inline styles are deprecated (XHTML 1.1). The reasning is is that pages are supposed to be build for all sorts of purposes - always separating content from style. a page should ONLY have content with the bare structural needs so it can be displayed in multiple/various styles based on devices. If you write:
    Code:
    <span style="color: #000099;">Hello World</span>
    You are limiting that display to beoing displayed in the #000099 color. But what if the page is being viewed on a WML handheld? It can't display #000099. It would be better to write:
    Code:
    <span class="title">Hello World</span>
    and allow the stylesheet to be used based on what kind of device is viewing the page. You always want to separate style from structure. Ask yourself this question: If I got rid of my stylesheet, would my page make sense to a text browser? That's what you should design for!

    The world (and browsers) is not at this point yet, but this is where we are going. Somethings that are supposed to be supported by browsers as valid CSS (like some positioning things) aren't because of the browser wars. If you ask me, one should always code for standards and NEVER for the browsers. Fortunately, the browsers are rendering things pretty accurately these days. I browse with Mozilla, one of the most standards-accurate browsers around and most things display pretty good, but I hate it when I find a page that someone simply built for IE.

    I don't mean to turn this into a standards rant, but in essence, that's what we are dealing with.

    I love this article. It's probably my favorite on this subject. http://www.thenoodleincident.com/tutorials/design_rant/

    Good luck.
    Sketch
    Aaron Brazell
    Technosailor



  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I agree, that I used a poor quote , yes knew the difference between 'attribute', 'tag' and 'element' - the W3C XHTML Basic Technical Recommendation shouldn't have mentioned style near the word element; thus I presume they were referring to the modularisation and style within an XHTML element.

    To make better sense, of what I was rambling about this following Quote was form XHTML Basic Technical Recommendation:

    1.3.1. Style Sheets
    The style element is not supported. External style sheets are recommended. The link element can be used to include external style sheets. The div and span elements and the class attribute are supported to hook style information onto the structure. Separation between structure and presentation allows user agents to download the style sheets if they support style sheets; user agents that do not support style sheets can ignore the external style sheet.
    Actually as things stand there are three main types of markup with HTML 4.01; Structural, Stylistic and Descriptive (semantic) Markup.
    Last edited by xhtmlcoder; Jul 3, 2002 at 04:42.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot everyone!


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
  •