Grow your CSS skills. Land your dream job.

how many CSS files?

  • # October 2, 2008 at 2:49 pm

    Gosh this is going to be such a newby question. I am REALLY catching on to CSS and HTML, so far I have studied alot but what I have no experience doing is making multiple pages.
    My question is.. do you make a new CSS document for each page of your website? or do you put ALL the coding for every page in one document. Also, is it best to embed the CSS file to the HTML file or external? So far I have been doing external.

    I tried studying some sites and when I look at their CSS for each page within the site it looks like there is some different code or order in each. So Im wondering do you make your home page, take that CSS file, rename it then use it and tweak it for say.. your about me page, and save it with a new name linked to that page.

    Hope Im not confusing, any tips on this subject would be great.. or links to info on the subject.

    med
    # October 2, 2008 at 3:23 pm

    1 is usually enough for most sites. Those that are larger may have multiple css files to help de-clutter everything. You can usually keep all of your css code in that one file and just pull it from within html. Again to keep everything organised it’s best to have an external css file. Though if your css consists of only a few lines then it’s easier to put it in the header.

    Yeah you can tweak it. For example if you want particular styling for text on one page and different on another then you would tweak that section of the css and upload with a different file name and link to that instead. Otherwise that one css file would influence two different pages when you don’t want it to.

    # October 3, 2008 at 9:21 am

    The power and beauty of CSS is that you DON’T have a different CSS file for each page. Let’s say you have a website with ten unique pages, all that link to the same CSS file. You are then able to make sweeping changes to all ten pages by making changes to a single CSS file. This makes life much easier, believe me =).

    The question does pop up then about how to handle styling that is completely unique to one page. Let’s say you have a table of events on one page that uses table styling. It’s a pretty big chunk of CSS and no other page on the site uses that styling. In this case, you might be good to break off that into a different CSS file and link to both CSS files from the events page.

    vee
    # October 3, 2008 at 10:32 am

    You can mark the different styles for each page by a small comment: /*…..*/

    If you got different styles on the pages (eg. different backgrounds) you can give id’s on the body tag:

    <body id="startpage">…</body>

    stylesheet:

    #startpage
    {
    …styles}

    # October 3, 2008 at 11:47 am

    Thanks for all the great feedbacK! I thought that it was just one but.. a few things like larger sites etc threw me off. Now I know there may be some cases to have more than one but otherwise one is good.

    I had thought about using comments to organize/label them for each page. that is a good idea. I need to also learn how to indent or stagger the code to organize for easy locating. I am using dream weaver to write code and havent figured that out.

    vee
    # October 3, 2008 at 1:52 pm

    I work with Aptana, cos at first it’s open-source and second fact is that it’s easy to browse the CSS files: there’s a search window where u can type in the name of the id or class and it’ll find it for u. In addition it shows u a list of all id’s and classes, so u can easy navigate to them..

    vee
    # October 3, 2008 at 1:54 pm

    That’s cool I’m not the only woman…here in Germany it’s pretty rare that there are women who work on sth like that..

    # October 3, 2008 at 2:00 pm

    Personally, I love using SASS (http://haml.hamptoncatlin.com/docs/rdoc … /Sass.html) While it’s a little tougher to use outside of the Rails framework, it makes a cinch of writing CSS. Furthermore HAML is a true gem (no pun intended) when it comes to writing markup. You can be the judge. What looks prettier, this

    Code:


    My Site

    Lorem ipsum yadda yadda


    or this?

    Code:
    %html
    %head
    %title My Site
    %body
    #page
    %h1 My Site
    %p Lorem ipsum yadda yadda

    More on topic, SASS handles the "encapsulation" you usually have to do manually in a CSS file. So instead of writing

    Code:
    div#page {
    width: 800px
    }
    div#page p {
    padding: 10px
    }
    div#page p a {
    color: red
    }

    you can write

    Code:
    div#page
    :width 800px
    p
    :padding 10px
    a
    :color red
    # October 3, 2008 at 3:09 pm

    The only issue with having TONS of information inside a CSS file is a speed issue for people with 56k modems and all that. Personally, I’m really not concerned if my CSS file is bigger than 8kb (suggested size to give 56k connections a good experience), because it’s really high-time they get better connections (sorry to all those people who can’t help it, and damn those who can :P).

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".