Where to put your CSS Code?

There are three ways to call for a CSS attribute. Using classes, you can put the code either in a separate document, or in style tags in your header. You can also put the CSS attributes directly in the HTML elements. We will talk about which you should use and how they should be used.

First, lets think about what a good programmer will do, at least in theory. A good programmer will want clean, easy to read code. That programmer will also want to have code that can be changed very quickly and effectively. Keep these ideas in mind when you are coding, because they will help you determine the best way to play your CSS code. Most of the time it is a personal preference, but there are some rules that you may want to follow.

The first rule you may want to follow starts with the separate CSS file. Any common class or element you may use across multiple pages put in this file. That is the main reason to link to a CSS file. If you want to style every th element on every page you create the same, put the th element’s CSS code in a separate file. That way if you want to change your th element’s font size, you can do it across all of your pages by editing one file. This is a strong point in CSS and makes your code effective and easy to change.

Place CSS code in your header, only if the class you are using will only be called on one page, or you want to change the style of an element on onlyone page. This will make your CSS file smaller, and less code you have to look through just to change the one class or element that is used only one one of your sites pages. If you know that you are changing a class called myClass, and that is only use on your index page. Then you know exactly where to look. There are some downfalls to this rule. If someone else comes to edit your code, they will most likely look in the CSS file, instead of the index file. Thus it maybe a little confusing.

The last option is to put the CSS directly in the element with the style attribute. Only use this option if you are wanting to change that element alone. You may have a th element that you want to be 50% of the tables width, instead of the normal 20%, but you want to keep the same font, border, and background color attributes. That is where you will put the style in the element. It you are changing more then one or two attributes, you may want to look at creating a class for the element, then either put that class in the header, or the separate style sheet. More then one or two attributes will start to make your element look longer, and messier. Only use this option if you have to, and there isn’t another way to get the effect that you want.

There some rules that you should keep in mind when styling code. Just remember that these coding rules or most coding rules will not apply in all situations. There are scenarios that may require that you put the CSS attributes directly in the element, rather then in the header or style sheet. One example that comes to mind is working with the display attribute toggle if an element is shown or hidden on your page. That is something you want in your element, not in a class or a style sheet. If you remember the KISS method (Keep is Simple Silly), where you put your CSS attributes should come to you naturally and easy.

Leave a comment