SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 58
  1. #26
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    Essex, UK
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1 sheet, style.css. I am yet to produce a website where printing the content would be common practice.

  2. #27
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    California, US
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Typically three or four. This way I can swap either one and change the sites specific look and feel based on the content of the stylesheet.

    layout.css
    text.css
    color.css
    iehacks.css

    If needed I'll add print.css and handheld.css but css driven sites typically print rather well.

  3. #28
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gibberish, your example seems similar to that of wwb99. I guess you guys simply use comments to identify which styles apply to which pages?

    This looks like a good idea if i find that i have a lot of styles for individual pages.

    I'm still pondering the section idea. This is interesting. Thanks.

  4. #29
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,633
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I don't use comments, but put things into a folder structure where each section has its own template properties. Note that I am doing very heavily database/server driven applications these days so I have some better options than one would in a static site.

  5. #30
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    California, US
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jacobpressures,

    Most pages I create tend to not have more then 100 lines of style code specfic to that page. Because of this comments seem to be better then importing a new css each time. I comment everything css, php, html.

  6. #31
    SitePoint Addict
    Join Date
    Feb 2005
    Location
    Maine
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use one main stylesheet (if there is something that applies to a couple pages, I'll put it on there), and then for a bunch of individual pages, I use their own separate stylesheets.

    This works well because it decreases loading times. If some obscure page needs its own stylesheet, that's a lot better than combining the whole thing into the main stylesheet.

    No matter what, though, I would suggest you comment thouroughly (mainly by denoting different sections of the page within the CSS). It really helps when you go back later.


  7. #32
    Codehead. hamidof's Avatar
    Join Date
    Dec 2005
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use two, one for layout -what goes where- and one for general look -what is red or what the size of font it is-

  8. #33
    SitePoint Guru Nick Carlson's Avatar
    Join Date
    Aug 2003
    Location
    Denver
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    I always use two style sheets.

    1. Primitive.css - This sticks to the absolute basics of style. body {}, p {}, img {}, h1 {}, h2 {}, etc.

    2. Style.css - This has the rest of my style elements. Sometimes, if there is a particular section of my style sheet thats taking up an enormous amount of space, I'll move it to it's own style sheet.

    For example, I have a site I'm launching soon that has some pretty complex css for it's navigation tabs. That part of the code doesn't really interact or affect any other part of the style sheet, so I moved it to its own style sheet called tabs.css.
    ncarlson.net - a programmer's dystopia

  9. #34
    SitePoint Wizard
    Join Date
    Jul 2004
    Location
    Minneapolis, MN
    Posts
    1,924
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured I would share this if anyone wants to know. I have a separate style sheet for each page, but this is only loaded on that page. It is very easy to do. I have PHP automatically include it. It checks to see if the controller has a set CSS file (in a separate folder) and then adds a <link> tag to it.

    The global CSS files contain things for the structure and layout. Then an extra page CSS file is included for any specific page stylings.

    It works rather well. I do believe some browsers may load multiple style sheets slower, but Opera and FF seem to handle it well.

  10. #35
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is a tendancy for some newbie coders to dump everything in one stylesheet and just keep adding to it. a few graphic designers i know use the same stylesheet over and over, adding to it each time. i once deleted 9k of spacebars from one stylesheet that had grown to almost 30k.

    you use multiple web pages so it's worth thinking about multiple styesheets. this allows you to use them as modules (as someone mentioned above). If you've got a page with a form in it then you can load that stylesheet for that page or perhaps you'll have a stylesheet for your product catalog pages only. i sometimes separate the template items from the content.

    also there is probably something to be said about modular stylesheets and SEO. if you have less css to download before you get to the content then it's got to be better.

  11. #36
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    But a SE won't download CSS files, will they?

  12. #37
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Immerse
    But a SE won't download CSS files, will they?
    My question too! I can't imagine Google spidering millions of style sheets?
    fisherboy
    Web Site Design

  13. #38
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jacobpressures
    LinhGB and charmedlover and others who use multiple pages, I like your idea of having a separate style sheet for colors and text. I would hate to have to go through each style sheet just to make sure a change was consistent throughout the website. How do you implement this without having a page full of vague and unrelated styles? It also sounds like a change in the name of a rule such as .page-content would require a change in that rule's name in two different places. I guess it would be only 2 which isn't so bad, but it is worth considering when you separate the colors out of the sheets. Another question is suppose it has basically the same structure with same rules but different color schema for that section? Any thoughts on these? Sounds like things can still get a bit confusing.
    It is something like this:

    Code:
    In classes.css:
    
    div.class-newsline 
    {
    margin, padding, position, float etc.
    }
    
    In colours.css (I should call it something else like themes.css because there are images and fonts too - just an old habit):
    
    div.class-newsline 
    {
    color, background, font
    }
    If I change .class-newsline to .class-blogline, for example, I'll have to change it in one more places than if I have everything under one css file, but that's only a very minor disadvantage compared to losing the ability to change the entire look and feel (keeping the same layout) by just switching from one themes.css to another.

    As for search engines, view your website in Lynx. That's what (most) SEs "see" your website as.
    "I disapprove of what I say,
    but I will defend to the death my right to say it."

  14. #39
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think using multiple stylesheets is probably better, but I generally use one. Using multiple makes the simple header/footer less simple.

    I think on jonhehir.com I use something like
    PHP Code:
    <?php
    $page 
    = new Page();
    $page->AddCSS('main.css');
    $page->AddCSS('someothersheet.css');
    $page->AddJS('wtf.js');
    $page->EtCetera();
    ?>
    I'm too lazy to do that all the time, though. I have to be in the mood for it.

  15. #40
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using multiple stylesheets doesn't mean that you have to include all of them on the page. I only include one (per media type) and the rest are imported by that main spreadsheet itself.
    "I disapprove of what I say,
    but I will defend to the death my right to say it."

  16. #41
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But what if you have, say, a page with a form on it. So on that page you want forms.css. On the others, of course, you don't, since you don't need it and don't feel like making users download additional crap. Then you have to include it on the page.

  17. #42
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't do it that way. CSS is cached by the browser so your user doesn't have to download it again and again. I use multiple stylesheets for management at my end, not to save bandwidth (which is hardly any).
    "I disapprove of what I say,
    but I will defend to the death my right to say it."

  18. #43
    SitePoint Wizard
    Join Date
    Jul 2004
    Location
    Minneapolis, MN
    Posts
    1,924
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But what if you have, say, a page with a form on it. So on that page you want forms.css. On the others, of course, you don't, since you don't need it and don't feel like making users download additional crap. Then you have to include it on the page.
    What I do is import forms.css in the page style sheet. So, for example, articles.css may import style sheets for forms, tables, and list, whereas blogs.css only imports tables and list stylings.

    My process for structure and layout styling (global CSS) is the same as LinhGB, where structure contains positional styling and style is things like colours and fonts.

    I also do this only for administration. It keeps only the CSS needed loaded and separates everything, which is very helpful when you have larger scale websites.

  19. #44
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One for each media="*" to be supported.
    If a page has a handfull of "special" elements, define them in a small style element on that page.

    Anything else is wrong, don't argue with me.

  20. #45
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i always use:

    structure.css
    appearance.css
    iehacks.css

    i find this the easyest way to control all my css styles.. and just add comments to the more detailed stuff.

  21. #46
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! LinhGB, thanks for the code and explanation and also for what you said about bandwidth not being a problem. That was helpful.

    joebert, sounds like embedded style would cause a lot of duplication, if there is at least one other page that needs similar styles. Seems like it will cause more work in the long run.

    Typically, i try to avoid embedded and inline styles.

    What I'm thinking is that i will use multiple stylesheets based on section, since i expect the website to get bigger over time. To me, having tons of rules in one main stylesheet is confusing and makes things hard to find and remember. If i don't go through all the "garbage" and correct necessary changes in comments it can become even more confusing.

    - I rather keep my stylesheets short
    - create structure pages based on sections
    - place all my colors in one stylesheet and in the comments state which SS the rules reference
    - if individual particularities are short, i may just place all individuals in one (like with colors)
    - If individual pages actually get long, which i don't suspect, i may put them all in their own SS.

    These last two are either/or.

    Another things i do, which to me sounds vain since i've never heard of anyone else doing it, but i put my rules in alphabetical order to help me search. I never seem to need to override something. In the themes.css or colors.css i would of course separate them by section and then put them in alphabetical order.

    So these are some of the things i gather from your comments. Let me know if you think i will run into problems. But this is the conclusion i've come to.

    Thanks very much!

  22. #47
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joebert
    Anything else is wrong, don't argue with me.
    Why not?

  23. #48
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Young Twig
    But what if you have, say, a page with a form on it. So on that page you want forms.css. On the others, of course, you don't, since you don't need it and don't feel like making users download additional crap. Then you have to include it on the page.
    You could use server-side scripting in an import file, couldn't you? Say, for example:

    PHP Code:
    @import 'base.css';
    @
    import 'typography.css';

    <
    php
    if $page whateverwhatever {
    * echo 
    '@import 'forms.css'';
    }
    ?> 

  24. #49
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sort of new to CSS styling, and Lovin' It!!

    Right now the company that I am freelance for uses 3-5 style sheets per site.

    1. Universal hacks.css for the Internet explorer and other browser issues...mostly with Micro$oft.
    2. master.css - like previous users mostly for content that is found on every site like #container, #content, #footer, etc.
    3. vertical_menu.css - uses a standard set of <ul> and <li> styling and padding and such.
    4. horizontal_menu.css - similar to above but horizontal (go figure!)
    5. print.css - basically removing the styles
    6. - more - Havent worked on any of these yet, but I have seen some sites having multiple styles for when some pages in the site follow 2-3 column and other pages are just a main column with a sidebar.

    I guess Im doing things right. I used csszengarden and their books as well as sitepoint books to develop my copied style from those resources.

  25. #50
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    love the print .css thing jonathanober!


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
  •