With external CSS files being the Web Standards approach and the correct way to style and layout a Web page - Should inline and embedded / header CSS techniques be taught anymore within courses, tutorials, and books?
I’ve been contemplating this in my head for a good few years now actually and now that I’m absolutely sure that inline and embedded / header CSS should never be used and doesn’t ever need to be used when styling and laying out Web pages I feel that when I’m reading beginners CSS articles, courses, and books that the author is wasting a lot of the readers time and their own time by writing / talking about inline and embedded / header CSS techniques. I realise that it is part of the CSS Technical Recommendation / Specification but Web Standards constitute that only external CSS files should be used to layout and style a Web page and that this is the way the professionals do it.
I feel the same way for example with the HTML Technical Recommendation where frames are included in the TR / Specification but Web Standards constitutes that frames shouldn’t ever be used and don’t ever need to be used within a Web page / site. It’s still included in the TR / Spec but there aren’t any good or half decent tutorials, courses, or books that even mention frames anymore. Will inline and embedded / header CSS go the same way soon when it comes to educational material on CSS? I hope so - I’m sick of seeing it in tutorials, articles, and courses when at the end of explaining all 3 techniques / concepts the author always says that the last of the 3 techniques - External CSS files, is the way to go. Why not just leave out the first 2 and go straight to the meat of it and how it should be done?
That’s how I feel about that, but perhaps I’m missing something out that is absolutely critical to a CSS beginners learning? Enlighten me please I only ever use external CSS files for laying out and styling a Web page although admittedly I do sometimes for quick experiments use embedded / header CSS but I could just as well use external CSS files for experiments as well.
What do you think about this? Has it ever frustrated you in any way or have you ever wondered why people bother with it when all you need to know about is external CSS files? I personally think that by teaching / explaining all 3 methods you are giving the reader the opportunity to do it the wrong and possibly lazy way and wrong way of doing it. Teach them the right way (external CSS files) and nothing will go wrong, right…?
I never use inline styles period, not even for testing. In regards to the OP’s question I say “No, it should not be taught at all”
Inline styles and Embedded CSS (aka internal) are not the same thing, I think everyone here has made that distinction.
Another one of my pet peeves is placing all the font-styles in a seperate font.css file. It is one the most annoying things that I have seen people do.
I was thinking more along the lines of using <style> tags in the head of a page to test the new CSS prior to moving it to the external stylesheet. That way you are not constantly switching between files while you are testing (and perhaps having problems with the browser deciding to use the cached copy without your latest changes.
I find it much easier to test with the CSS, HTML, and JavaScript all in the one file but with the CSS inside a style tag at the top of the page and the JavaScript in a script tag at the bottom of the page so that they don’t need to be rewritten in order to pull them out into the separate files where they belong once you finish testing.
Using a style= attribute in the HTML is as bad as using onclick= in the HTML. Neither one belongs there.
Of course if you can’t get your style to actually apply to the required element you might just decide to temporarily move it inline just to confirm whether the problem is specificity or that the styles don’t actually do what you expect. So the inline style is useful for narrowing down reasons why your CSS doesn’t work the way you expect.
If the people being taught will ever need to code HTML email campaigns, they absolutely MUST know how to properly style things using inline styles.
Our company has been doing more and more email campaigns for clients, and to make sure they work properly on as many email clients as possible, we had to forget most of the things we’ve learned in the last few years about properly coding and styling pages, and go back to using tables and inline styles on everything. We have to keep the CSS a bit more simple as well, as not all current styles are supported in all clients. It’s total old-school!
So for us, it’s extremely valuable to know how to properly style items using inline style techniques.
See I don’t agree with the inline CSS argument, if you test directly from the stylesheet you get an idea as to how the code will perform when it’s finalised. Having the code inline runs the risk that when you separate it from the structure that it may be overwritten by specificity. In regards to beginners, I think it’s worth mentioning that they exist (like frames), but using them as lessons of how you should do things properly (when it goes to the web) rather than including them as something useful for the general workflow. I’ve never been much of a fan of testing new code through inline style when you can just as easily throw it into the base of the stylesheet document and tweak it too your hearts content. I say keep the info in for it’s contextual value, but teach people the correct way of separation instead.
Yeah, it’s a part of CSS so does need to be mentioned at least. As you say, it’s good for experiments, and I would LOVE it if people who needed help in the forums would post their code with the CSS embedded in the HTML. And then there are one-page-sites etc… not much point in using an external sheet there, is there? An then there’s HTML email… which requires understanding of inline styles (sadly).
“When I am the one writing the code, I never use inline styles period, not even for testing.”
When I am writing my code I know which elements carry more weight and I keep track of my overrides in the cascade.
For example, I will not set a float on an inline-block and expect it to obey inline-block rules because I know the float carries more weight and wins.
Likewise I will not set AP on a float and expect it to follow float rules because I know that AP wins.
Yes I understand that inline css carries more weight than linked or embedded css. I agree that it can be helpful for troubleshooting css that has been written without any regards to weight or cascade. That is often the case with newbies who are not aware of those factors.
Now if I didn’t have Firebug showing me the overrides I might have to resort to writing inline styles to debug something. But I have never had to do it and when someone has a page full of inline css the first thing I tell them is to get it out of the html and move it to the stylesheet where it belongs.
Sometimes the styles for a multi level dropdown nav can get pretty hefty and I would not have any problem moving them to their own stylesheet. That alone could cut out quite a bit of weight from the main css and free it up for extra for page specific css. I would do that before I let a file exceed 12kb.
Any styles that are being shared on multiple pages need to be in an external file so the browser can cache them. As WebMachine suggested I would not have a problem using embedded css in the head on a form page. That alone can reduce the main css and feed the form styles to the only page that needs it.
Those two things (nav & form) could make or break the main css from exceeding 12kb on a large site. They can also keep the main css from getting overly complicated for someone else that may need to go through it other than the original author.
I really think that embedded styles still have an important use. For example, if you have a style change that is unique to only one of the pages on your site, it is better to embed it in the head where it can override any styles in the style sheet, and at the same time, help prevent the external stylesheet from getting overloaded with styles that may only be used once or twice on one of the pages. Maybe only keep the styles that carry throughout the entire website in the external stylesheet.
So how do you determine whether the style isn’t working because it isn’t specific enough or because it doesn’t do what it is supposed to be doing? Placing it inline temporarily is the quickest way to rule out that something else is overriding the styling and that it therefore needs to be rewritten or alternatively that it does work there and so something else is overriding it in its original spot and so it needs to be made more specific.
1st the general style sheet
2nd specific stile sheets
3. INLINE CSS which override linked sheets
4.a method of last resort, CSS in the tag.
Even tho you could have the LAST style sheet linked be unique to a html document, It really would not make sense to use a server request for something that is uniquely in one document.
Hmm, I’m not convinced by that. I’d rather have all those styles in one place. I doubt it would make the style sheet that much bigger. If you have styles for a form, for example, you could put that in a separate external style sheet, so it could at least be available to other pages with a form.
I use inline styling frequenlty when debugging and fine tuning because it is Oh so much easier to edit and view the results. Only when the browser is doing what I want it to do will I finally add an ID then cut & paste the style into the CSS stylesheet.
Inline styling is also much better for showing examples rather than a seperate style sheet.
Reminds me something about “if you only have a hammer in your toolbox…”
I think inline css is one of the major party of HTML it is not professional way to work out but as felgall said this is the most easy and efficient way for writing css.
I have found many condition where i have to put the inline css while implementing the design might be due to different reason.
There is no harm in having the knowledge of it, I think it is most useful think for debugging the css for multiple browser support too so it is very useful to have the idea of it.
I only ever use external CSS files for laying out and styling a Web page although admittedly I do sometimes for quick experiments use embedded / header CSS but I could just as well use external CSS files for experiments as well.