To create a cohesive site one would expect the styling to be uniform throughout. As we all know, external style sheets can greatly facilitate this since every item with the same class can quickly be changed; in addition, since external style sheets are cached, the pages will load quicker. We’re also told that inline styles aren’t so good to use.
However, doesn’t every single forum use inline styles (including this one)?
For example, on this page, I’m using this font, then this comic fontand then [CENTER]centering my text.[/CENTER]: all defined in-line.
With this in mind, would it be “sooooo bad” to have a website that has a “healthy” combination of external style sheets and some inline styles on each page?
Inline styles are just really inefficient. If you have to write the same one twice, you’ve kind of missed the point of CSS. You might as well just be using presentational HTML (from the 1990s). If you only use a style once, then fair enough. But using the same inline style more than once means that, if you want to change the style, you’ll have to change it in many places.
I completely agree with ralph, while this forum and others like it are using inline styles for certain things it’s not a huge impact compared to if you put inline styles on 100 elements that all did the same thing. Personally the way i do things these days is with dedicated CSS selectors in my stylesheet, if I have any custom modifications i need to make to specific elements I use JavaScript to either change the style inline if there is no one pattern i can use again again or i simply just add another class to the element.
Thank you for your input! My plan was to have my basic set of styles with a little wiggle room at the individual level (similar to how a basic forum such as this one is set up). Might you elaborate on a specific example of using javascript to change the style inline? (I fear that I don’t see the advantage of writing the javascript versus just having an inline style)
You may occasionally need to use inline styles if you have content say that comes from a database and you need to size the element depending on the amount of content that you need to show. The easiest way would be to calculate the width serverside and then insert an inline style with serverside code to set the appropriate dimensions.
On one site I did there was a progress bar that was styled with css and to update the width of the progress bar the width from 1% - 100% was written directly into the tag using an inline style <div style=“width:50%”>Progress bar</div>. The width was only known at runtime when the progress data was received from the database. The inline style was thus easier than setting up 100 classes for every width from 1% to 100%.
However, barring those types of scenarios there is little need to use inline styles. (The ones you see in the forum code are probably because of dynamic changes and inserted when run and not by default or because of functions similar to the ones that I described above.)
Nothing is absolute… but ralph’s point about inefficiency is is key reason. Paul’s example echoes that, in reverse… there are rare cases when inline is more efficient than 100 classes. In addition, there are specificity issues it might cause if you were to mix box techniques will-nilly. There is also the idea of ease of maintenance, its easier to make a stylistic change w/o having to sift through all your markup.
