Use of a common css file for a 5 page website

I currently have a website that has 5 pages. Each page has it’s own css file approximately 4kb in size. They all have different layouts using flexboxes. I’d like to standardize text sizes, padding between elements, etc. by creating one css file which they all look at with individual sections for things like flexbox layouts for each page. Could I do this using id’s with classes within the id’s? Could I have common settings above the id’s?

I tried creating one using all classes but it didn’t work. Most pages didn’t format correctly.

Thanks in advance for your input.

You should only have one CSS file which is used on ALL pages in your website.
Then, use classes to set settings. You can have all margins and paddings for each item
set to the default. Then, for special handling add new CSS for ones you want changed or
non-default.

That is really what CSS is designed for. So, let’s say in general you want a 20 pixel margins and
padding for ALL div’s, you would start with " div { margin 20px; padding 20px; } And, then for a special
non-standard or non-default div, you might have large-div { margin 5px; padding 5px; } Smaller widths
inside and outside for a large div… There are millions of sites that cover this. But, we can sort it out
for you once you get it started…

Most problem, why it did not work for you is that you lumped everything together and it caused overruns
where one CSS came after a previous one. You need to set up the defaults first. Then, add the others
in as you alter them from the normal default.

I suggest making a list of all the standard versions on all five pages. Then, make a list of non-standard
versions on all five pages and then write the CSS for them. Or, show us the CSS file you made lumped
together to see what went wrong. Keep in mind, simple names are the best. Hope this helps…

Thanks for your explanation. I’m working on it and will get back to you.

I’ve done 2 pages but when I put it thru a css checker it’s complaining about " Unknown dimension" where I’ve set values in rem.

Why are you using ROOT-ELEMENTS? This means it will take the size of the element above it.
That is not always allowed in all cases. Is there a reason that you don’t just set the size you want?

It is much harder to set sizes if you don’t know the root size. It is easier in my humble opinion to just use
100% for the inside object and that way it will match the REM. Perhaps you should show us some of the
CSS where it is failing and we can help sort it out for you.

I’ve got 2 of the pages working correctly now. Working on the third now. Simple once I got your guidance. Thanks a bunch. I’ll get back to you if I have further problems.

Nice! That is what we are here for! Good luck with the other pages!

One more thing… Here is a tutorial with exercises that you can view if you want to learn more about CSS.
Also, on the left side of this page, they explain each type of CSS for various things you might use.
Might help you learn more tricks for the future… https://www.w3schools.com/css/css_exercises.asp

Got it all done, thanks again.

Great! See you in your next post…

The 5 css files that I started with totaled 30kb. After getting rid of all the duplicated stuff and some junk code, I ended up with an 8kb css file that includes a separate navbar.css that they all shared. Now all the pages link to the single css file.

I have another question though. It seems that each page is loading the css file, slowing load time. Is this normal? Or should I only link to the css file from the index.php?

Well, yes and no. An 8k file should not really slow down the server when it is loaded in each page.
Yes, it is bigger because not all of the CSS is used in the currently loaded page. But, 8k should not be
too slow at all.

Also, what I quite often do is create a header page which when you include that in your page, require it
once and the browser should hold onto it so it is already for the next page. I checked a large site I help
with and it has a 27k CSS file and it runs just fine with it’s hundred different pages.

Sounds like you are doing just fine with it so far… I would not worry much about an 8k file…

Can you give me an example of a header page and how to use it?

Well, this is common in websites. You create two files, header.php and footer.php. Each page on the site
would then include both of these, one at the top and the other at the bottom. They can be named anything
that fits your use. Some programmers use inc_header.php to indicate it is an included file, but, I just name
them header and foot. So, the base info in each would be like this… (loosely, just a base idea for you.)

Header.php:

<?PHP
session_start();
//  ...  ANY PHP code needed common to all pages...
?>
<html>
<head>
   ...  Header entries  ...
</head>
<body>
<div>
   ...   ANY general layout code to display your header that is the same on every page.
   ...   Usually this area contains your top menus which are the same on every page.
</div>

--------------------------------------------- end of file… Ends without finishing the page of course…

Footer.php:

<div>
   ....   Your copyright footer including links to outside pages, or company info or whatever you want
   ...    at the bottom of every page ...
</div>
</body>
</html>

--------------------------------------------------------------------End of file ending like any normal page…

In ALL other pages, you would create them like this…

ANY-OTHER-FILE.php

require_once("header.php");
<div>
   ...   Some code displaying whatever is needed for each separate page...
</div>
require_once("footer.php");

--------------------------------------- This will let every page have the exact same header and footer.

It also makes it super easy to alter the header of footer for EVERY page with just one simple edit.
Let’s say you need to alter your copyright notice in the footer, just change it once in the footer.php file.
You can also add other includes if you need the same code in several files. Like if your project includes
the same data displays on 3 or 5 or 20 pages, you can put that into a separate included file, too.

Hope this example helps…

Wow! I didn’t know anything about that. Thanks for teaching me this, it will make it much easier to maintain the site.

Glad I could help you understand it. There is a lot more to learn, of course. Normally the header and footer files are PHP files. Therefore, they can hold calls to code, database, etc, whatever is needed. For example,
in the footer, you normally place your Javascript links or live JS code so that it is loaded on each page. Not
code that is unique to the one page you are creating, but, to all pages in general. In the header, you would put all of your library calls for Bootstrap or other tools. Normally JS, JQuery is put in the footer areas.

It does make life a bit, well, simpler… LOL Good luck with your changes…

Before I start on this I have a few more questions. All the pages use the same navbar so could I put it in the header.php file? Also, how do you handle meta tags that are common to all the pages vs those that are page specific?

Well, yes, of course. Put the navbar in the header file. Put everything in there that is above the content.
Think header-navagation-content-footer… The header and navigation is in one header file. The content
is the real display of data, input forms, etc. The footer mostly contains the links to JS code scripts and your
site’s copyright info. In my NFL football pool site, I also placed icons and links to famous sports sites so my
members can move to those sites if they wish to.

As far as meta, they are almost always small and simple. Seldom do you need to have them split up
into separate files. That makes it complicated. If you wish to not have some meta’s on some pages,
just use conditional code on it. It is easy in PHP. Just check the page name and if a meta is not needed
there, do not load it. PHP and HTML intermingle as needed very easy. For instance:

<?PHP
  $test = "xyz";
  if ($test!="home-page") {
?>
   <meta some meta you want on all pages except the home-page>
<?PHP
  }
?>

As you see if the $test variable is not set to “home-page” then it will show that meta… Otherwise,
it does not show it… Just one way you can do that. But, for meta’s I would not bother since they take
little overhead and I do not think it matters much…

Thanks so much for taking the time to explain all this and for sharing your knowledge. Although the site is currently active and working well, I’m always looking for ways to improve it and learn at the same time.

This 72 year old guy has a lot of time on his hands and I like to keep my brain active.

I’m an old fart, too… Hee! Hmmm, hope that wasn’t politically incorrect! Ha!

I frequent here just to help out passing on any knowledge I might have. Glad to help you!

Right now, I am studying Neural Networking to have my super computer I just built to be able to converse
with me. It’s sort of working. Always learning! Any other question, just ask… Or create a new post if it is
a different subject…

Sponsor our Newsletter | Privacy Policy | Terms of Service