Use of a common css file for a 5 page website

[larry29936]

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.

[Koray Tugberk Gubur]

Using ID's with classes within the IDs? What do you mean?

<div id="example" class="header"><p>Div Element</p></div>
Something like this?

[larry29936]

html more like:
<div class="header">
<h1> some text </h1>
</div>

<div id="contact">
<div class="container">
<div class="flexbox">

[NickMNS]

I'd like to standardize text sizes, padding between elements, etc. by creating one css file

This the way it is typically done. One uses one CSS file with all the styles for all the classes and id defined. When a user loads the first page, the user's browser downloads that file from your server, thereafter when the user changes page the user's browser already has the resource cached, so the browser no longer needs to download that file, making the subsequent page loads faster.

As far as the how to part of your question, for elements that will be same from page to page, you define the tags with same class names, the elements that are unique get their own class names.

ID's are unique identifiers, that is there can only be a single tag using an ID name. Class names can be assigned to many tags. So you can use ID's for the unique elements. Also, it is perfectly acceptable to use both a class and an id. For example say you had series of cards on a page that summarize your blog posts. You obviously want these card to look the same, same font background etc... But say you wanted the latest post to appear slightly differently, say a different background color. Instead of repeating all the styling in two separate classes, you could simple add an id #new-post and set it's background to the color you want. That would overwrite the class background but only for that single instance.

There is more to it than my simple example, but it is beyond the scope of a forum thread. I would strongly recommend that you read the attached linked that explains the basics of CSS.
[developer.mozilla.org...]

[tangor]

Fortunately this is a perfect time to set up a sitewide css file (only five pages at present).

ASIDE: Look to semantics when setting up your css as a starting guide. This will make it easier to follow through with your styling, and make the end result more professional. IOW, reserve h tags for outlining your content and NOT visual layout!

[lucy24]

Tangentially... Having an external CSS file that is used by only one document does not make a lot of sense, unless you have a significant number of users who (a) are on dialup or satellite--meaning that every byte counts--and (b) have set up their browsers to ignore a site's styles--meaning that an external stylesheet wouldn't be loaded at all. (At least, I hope that's how browsers interpret the instruction.) This in turn, is hard to envision unless you've made a site especially for your grandparents and their friends ;)

On the other hand, it is perfectly OK to have a class that only occurs once on a page. Save ID for when it is absolutely certain something will never occur more than once. (Personally, I use ID only for elements with background images.) And you can always have a supplementary
<style>
blahblah
</style>
for things that only occur in one document, or that are different in that document. The moment the same thing happens on more than one page, shift it to a shared stylesheet.

Most pages didn't format correctly.

Did you remember to refresh the browser repeatedly? If a page has formerly existed with different external styles, the browser is going to remember that.

[larry29936]

Thanks to everyone who replied. Got them all included in one css file. Tested and working.

[tangor]

Hoorah!

Now back it up so you don't lose it!

[tangor]

Now you can start both pretty and function.