SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do I create a CSS form for every page in site?

    It seems if you have a site with different content and positioned differently, or even in same place but different that you would need a new CSS page for each area is this right?

    what is usual way? to have a global CSS for type and color, and then individual CSS for each page?

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Ideally you will manage to keep the CSS in one file and reuse as much CSS code as possible. That way you can take advantage of caching and speed up the loading of your pages. You may want to consider separating a page's CSS file if it contains a very large amount of unique CSS rules. In a case like that it may benefit your users to separate them.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If there are only a small number of differences between pages, then you could give the body element a unique id for each page, and then match that id with the element's id/class name to provide a variation for that page.

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    manage to keep the CSS in one file and reuse as much CSS code as possible.
    Reuse it how? I don't quite get it?

    Centauri do you mean name the body for each page a unique ID and then within each unique div have all the elements named after that ID?
    such as
    #body about, #about ul, #about li etc?

    portolio page
    #portfolio about, #portfolio ul, #portfolio li etc?

    what do ppl do in terms big websites like say 20 pages?

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by keano View Post
    what do ppl do in terms big websites like say 20 pages?
    It depends. If the pages all look completely different then I'd reuse what I could and then use an ID on the body as Centauri suggested and just redefine new styles that were required.

    If there's only a few differences then an extra class or ID can usually do the trick.

    In most situations though you can think of CSS as a template, create global rules which will style all elements across the site the same and then simply use a containing element (<div>,<span>) to position the semantic markup as required.

    I don't usually require more than one CSS file though so you should be fine just using one CSS file even for sites with thousands of pages.

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz I am a united supporter too... almost to top.... next few weeks will say a lot.

    Ok just so I am getting this right for example say I have different thing going on the about and contact page would you write it like following (at the bottom -again just a sample)

    Code:
    html,body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #BBBBBB;
    	background-color: #FFFFFF;
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	background-repeat: repeat-x;
    	text-align: left;
    	line-height: 15px;
    	background-position: 0px 0px;
    	background-attachment: scroll;
    }
    .text {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: capitalize;
    	color: #000000;
    }
    
    /* this would be ABOUT page */
    #about header { position: realative;}
    #about header ul {font: Arial; font-size: 1e,;}
    
    /* this would be Contact page */
    #contact header { position: absolute;}
    #contact header ul {font: Tahoma; font-size: 1.5e,;}
    
    /* and so on */

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sort of. You would define all the common stuff, and any changes to this can be targeted using the body id name, for instance :
    Code:
    /* general common styles */
    #header { height 200px; padding: 5px; background-image; url(images/back1jpg);}
    #header ul {height 30px; color: #CCC;}
    
    /* this would be ABOUT page */
    #about #header { background-image; url(images/back2jpg);}
    #about #header ul {font-size: 110%;}
    
    /* this would be Contact page */
    #contact #header { height: 160px; background-image; url(images/back3jpg);}
    #contact #header ul {color: #FFF;}

  8. #8
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using one .css file, but in it I separate my content by comments...
    example:

    #tabl33 {
    height:20px;
    width:60px;
    float:left;
    border:1px solid;
    border-color:#000;
    padding-left:14px;
    padding-top:2px;
    }


    /* PHOTOMONTAZH */ - this means that it is new page.



    .textphotom {
    padding-right:300px;
    font-size:100%;
    font-family:Arial;
    text-align:justify;

  9. #9
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys got 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
  •