Html/ css coding standards

Question

Hello, I'm building my first website for an internship. My instructors always told me to never embed any styles on my html page.Now that I'm actually creating a site I find it annoying that, if I want to change the color of my font for a span tag - I have to I.D. it and reference it in a css file. Is there some other reason then organizational purposes for using CSS? Would embedding a single style be such a convention breaker? Thanks for reading this and I'd appreciate any feedback.

Answer 1

The reason you want to offload the CSS into a different file is so the browser can cache it. Otherwise, the browser has to load all the CSS as well as all the markup on every page. If you keep it in a separate file, the browser only has to load the CSS once.

Answer 2

There are a couple of reasons.

Times when you want to change the style of a single element on a single page should be exceedingly rare, so it shouldn't be such a hardship. Any other time, it is going to be more efficient (from an HTTP caching perspective) and easier to maintain (from a separation of style and structure perspective) to externalize the style information.

Since there is a good chance that you'll want to style it differently for different media (e.g. screen and print), you'll need a proper stylesheet for that too.

Answer 3

If you embedd a style to several HTML pages, and want to change it later, you have to go file by file changing it. That is one good enough reason for me.

Answer 4

The key word here is maintainability. Organized code is maintainable code! It is far better to add an id to a tag and reference it in the global css file than to do it inline, because if you want to change that style later, you know where to find it, and you only have to change it in one place.

Answer 5

The basic argument for this is that HTML's purpose is to provide structure while CSS's job is to provide styling, by embedding CSS in HTML you're breaking this basic rule. Plus, you'll have a tough time in maintaining pages.

Answer 6

Even if it's "just 1" you should still do it because it helps you get in the habit of it.

Answer 7

Ideally, a design should be consistent enough that you can use generic rules for such situations. If you want to emphasize something, then <em> or <strong> is likely the way to go. After styling your <em> or <strong>, you can easily add the same emphasis to other areas of the site.

It's not simply about performance or style, it's also about consistency and ease of maintenance.

Find the similar elements in your design and mark them up similarly. It's as easy as that.

Answer 8

Hi, embedded css has the following problems:- 1. It has browser compatibility problem. Example Ie has problem understanding inbuilt styling. 2. If you want to use the same css style again , it is better to have a class for it.