Better Practice?

[NuCoder]

Sorry - through studying - I unfortunately have questions and this is the forum to get the answers...

 

Sometimes looking under the hood of a web page, I will sometimes see external style sheets and sometimes I will see embedded styles right in the HTML page. Through your experience, which is better practice?

[Wickham]

Always try to use an external stylesheet; it simpifies editing if you have a website with many pages and also reduces the file size of each page.

 

Use a class or id if you have a special situation which requires a different style, like a sentence in red text. You could put this class or id style in the main stylesheet if the same isolated situation occurs on several pages or in head section style tags if it just occurs on one page.

 

Use inline styles (in the html body markup) only as a last resort.

[PicnicTutorials]

In the beginning, I have done exactly as John (Wickham) has described. But, as I move forward, I'm getting a little more lacks about things. I'm doing it like this now I think - seems better for me. Putting all the site wide styles in the external style sheet. And I'm now putting any styles that are completely unique into the head of each document. After all, if your editing a unique page, 99% of the time you have that page open for testing already. I'm even throwing in some inline styles now and again lately. I only use inline CSS when it's the only time I'm using it (same rule not repeated). Seems better in some circumstances than creating a new class only for that one thing.

[LSW]

Answer the question yourself...

 

Is it better to:

1. Place styles "inline" where you have to repeat it 5 times in a page and 500 times in 100 pages?
   
2. Place it in the head where you have to repeat it 1 time per page and 100 times in 100 pages?
   
3. Place it externally where you use it 1 time in 1 page, 100 pages or 1,000 pages. You need to update it only in one place.
   

 

External is always the prefered method as why do things multiple times when you can do it one time.

 

That said, the others are not worthless. If one page is to be different... using inline or header CSS will over ride the external CSS and that one element on that one page will be different than on every other page.

 

Then you have to ask yourself what do you like best. If some thing is to look different 1 time on one page, inline is fine. If it is to show more times on a page, then header would be the better choice. If it is to be the same on more than one page in my mind then coding it is the external is more logical. To use inline/header CSS in my mind is really only useful on a single page, any more than that and I think it should be in the external.

 

Inline I use least of all, it is harder to find, so easier to look in the header for it. Another thought is towards the future. On my last state project different people created pages and they would use inline CSS... but then when my pages needed to look the same as theirs suddenly what they saw as a 1 time use began being used more often... so by placing it in the head or better yet externally... if you decide to use it again at a later date even though meant as a one time thing now... it will be easier to use in the head or better externally. That is why I say everything should be external, even if used but once.

 

The only real reason to use block or inline CSS is to overwrite something defined externally on that page. But there is no real right or wrong, it is really aboput what is best for you... and the person who one day takes over the work maintaining the site.