Just a general question how you structure your CSS? Right now I am a bit indecisive. In my case I want to put all the general CSS in a main .css. Now for each subpage I have different background-image and different <h1> colors. I am thinking of the following solutions: A/----------------------- switch($page) { case page1: include('inhoud/page1.php'); break; case page2: include('inhoud/page2.php'); break; case page3: include('inhoud/page3.php'); break; } Code (markup): and within each page I have <link href="/css/page[x].css" rel="stylesheet" type="text/css" /> I know <link> tag should go into our <head>, so I don't know for sure. B/-------------------- Or something like this in the <head> switch($page) { case page1: echo '<link href="/css/page1.css" rel="stylesheet" type="text/css" />'; break; case page2: echo '<link href="/css/page2.css" rel="stylesheet" type="text/css" />'; break; case page3: echo '<link href="/css/page3.css" rel="stylesheet" type="text/css" />'; break; } C/------------ Or put everything in one big .css file?? Like to know your solutions, advice??
Put everything in one big CSS file. Making seperate downloads for each will mean a user will have to download the files numerous times, causing slower pages and more bandwidth used. If you do want to split it up, add the style information to the page itself in the head element. i.e. <style type="text/css"> your unique page styling options </style>
Here's the best solution I could think of. You should put all of the css in a single file, and just put a unique identifier into the div's that you're using to load the backgrounds. For example: page1 = <div class=header id=page1header> </div> Code (markup): page 2 = <div class=header id=page2header> </div> Code (markup): That way if at any time in the future you want to make all the headers the same or say you want to make three headers the same, and all the rest different, it can all be edited from a single css file. You could even go one step further, (since you're using php) and have each page generate the id automatically, and that way you don't ever need to wonder which page you called it in the css, and you could copy your template without having to worry about changing each page number. This would look something like this, (I'm not being exact here, it's just to give you an idea...) <?php if (!isset($_SERVER['REQUEST_URI']) && isset($_ENV['REQUEST_URI'])) { $_SERVER['REQUEST_URI'] = $_ENV['REQUEST_URI']; } if (!isset($_SERVER['REQUEST_URI'])) { $_SERVER['REQUEST_URI'] = $_SERVER['SCRIPT_NAME'].(isset($_SERVER['QUERY_STRING'])?"?".$_SERVER['QUERY_STRING']:""); } $dirandfile = $_SERVER['REQUEST_URI']; ?> <div class="header" id="<?php echo $dirandfile ?>"> </div> Code (markup): Then your unique identifier would be automatically created for each page, and it would be the directory and file name of the page. Thus you would never have to play with your template. Just copy and paste. BTW, Your css would look like this... #YourDirectory/index.php { background: url('your-image.gif'); } Code (markup): Though, I'm not 100% sure it will work with slashes, so you may need to edit the code.
Tx guys, @adamsee, I don't have the <head> tags in my page1, etc. Just some generated content. I know it works by just putting <style type="text/css"> your unique page styling options </style> Code (markup): Above the content, but it isn't valid @slickricky, #YourDirectory/index.php never seen that I am going to look into your suggestion. In general my thought was for page 1 and don't have to load css for page2, page3 etc and the other way around. But to keep the project going I think I go for the one file css until I stumble upon a nice solution. Regards
Another option is to create a php file to act as a CSS file. Just set the header correctly, and you are free to use all the php you want. That way you can have your main page pass it variables with get (e.g. ?headerColor=green) and it can manipulate the output.
I would advise using the Import functionality - and having a server-side emulated switch css file. Say you did it in asp. in your homepage (/default.asp) you link to /assets/styles/global.asp?style=default - this asp page could give a content-type of a CSS file but still be dynamic. So this ASP file would look like Select Case request.querystring("style")... Case "contactus" response.write("import(/aaaa.css);" & vbcrlf & "import(/bbbb.css); etc... Case Default response.write("import(/global.css);") This way you can add/remove styles and stylesheets on the fly dynamically without touching the pages - just the css loader server-side file
You're thinking about this the wrong way. It's inefficient to keep downloading new stylesheet data everytime you load a new page. If you were going to import, then you'd attach another stylesheet, but keep the default one (with the main styling) ALWAYS present.
all stylesheets are cached that are loaded (except dynamic sheets). so if you had 1 "base.css" that @imported 5 sheets -> these imported 5 sheets are cached after first load (generally) so it is no problem
Yes indeed. The best method to approach it is to have a CSS file with most sitewide defaults in and then an extra import for less-visited, page specifics.
I disagree. Wouldn't this method require that you have a unique identifier on each page? Like page1, page2, page3 etc... For this to work you'd have to manually keep track of all of those. Thus the php option of creating a unique identifier based on the name of the page would be the best option.
The best solution would be not to use any PHP, or scripts at all and include page indentifiers. On the home page <body id="home"> <h1>Test</h1> </body> Code (markup): On an article page <body id="articles"> <h1>Test</h1> </body Code (markup): The following code would produce verdana as the default 'h1' font and on the homepage, it would be in times new roman. h1 {font-family: verdana} #home h1 {font-family: times new roman} Code (markup): Your PHP method wouldn't work as is, because '#YourDirectory/index.php' isn't a valid selector name. It's not semantic either, as in, the id name doesn't indicate what content the page contains. Adding behaviour to a part of the page (php) when it could be be left in the structure (body id="home"), isn't very flexible if the site structure changes or he decides that he'll eventually want to move to another programming language (different extensions). My personal solution: set a semantic page identifier in the body, forget the php and use CSS to control the styling.
Sorry, but you're just wrong. If the site grows to a hundred pages, just try keeping track of all those pages, and making changes if you have to. It'd be ridiculous. The whole point is to make a template that doesn't require anything but a copy and paste to make a new page. Just edit the php, so that what shows up as the "class" is the file name without an extension.