Creating new webpages using css

[ladyd]

Hello,

I am using a css generator to create my style sheet for my webpages. Can the script for the layout, navigation menu, forms ect. go into one file, or do you need to create separate files for each element. If it needs to be one file, is there any particular order it has to go in or can I just list all the code. Lastly how do you save the file or files with the correct extention at the end.

[djr33]

Any CSS file can be included into any HTML file.

Extra definitions (unused in some page) will not hurt anything.

There are also no rules about the order. (In some rare cases the order in which you declare things might override something else-- especially if you redeclare the same property, but this is unrelated to using it in many pages.)

This is the usual way to do it and it's a good idea.

You can either create a separate css file for each page (if they are very different) or you can create one page for your site.
In many cases it may make sense to do both: have a main css file for your site in general then have a special css file for each page that has a lot of different properties.



The main reasons for doing it one way or the other are organization and saving data sent to the user-- if you use a single css file throughout your site, then it will only need to be downloaded once. This saves time and bandwidth.
(The downside is that if you include ALL of your pages in a single file then you'll be wasting space that a single user may not use if they don't visit every page, but in general it's probably better.)


The only real "rule" (and it's not required, just smart) is that you don't want to redeclare any one property: if you are using the same style on two pages, you should be using the same css stylesheet.
The main reason for this (among others) is that this way you can very easily maintain your site: change it one time and one time only, and the whole site changes.

(If you have "header" defined in 2 css files-- or 10--, then you will have to change it that many times rather than just changing it once. There's no reason you can't do this, but this is the main advantage of CSS-- it extracts the properties to they're easier to use.)

[ladyd]

Thank you for your quick response to my question. I think I will use one css stylesheet that way the changes are made once throughout the site. Once this styles sheet is created how can I view it, so I know whether it is what I want?

[djr33]

I don't understand. To view the CSS file, open the file or go to its URL.

If you want to view the styling on all of the pages, just apply the stylesheet in your html for each page then reload any of them as you change the .css file.

[c_cicca]

I think I will use one css stylesheet that way the changes are made once throughout the site

What do you mean, i think this is wrong, like moderator says with many .css files attached to differend sections of your site you save bandwidth.

[djr33]

It's complex.
To save the MOST bandwidth, you will need to have two .css files for every page:
1. The whole site's standard .css file.
2. The specific styles only used on that page.

That way, you get both and it saves space. This also means you only need to edit one .css file to change the standard styles for the whole site, and you can change the other files for each page as needed.

In fact, this may mean creating many more than 2 files: 1 for the whole site, 1 for every section and subsection, and 1 for each page:
For example, if your page is site.com/1/2/3/page.htm
You will need site.css, section1.css, subsection2.css, subsubsection3.css, and page.css.


But the easy way around all of this is to be strategic and include all of some parts of your site into several files. For example, of the list above, only use site.css and section1.css [plus section2.css, section3.css, etc]
That way you can separate a little bit, but it will keep things organized.


If you have everything in a single file it will WASTE bandwidth on the first load, but after that you will never need to load anything again, so this is another efficient way to do it.


Basically there are many ways, but the most important part of CSS is keeping all of the identical properties in a single file so that everything is controlled/modified once and only once.