CSS… External? Inline? Embedded? Which one should matter to you?
Posted on | July 30, 2010 | No Comments
There are three ways to use cascading style-sheets within your HTML or XHTML documents. Each one varies slightly in use within your documents. If you are planning to produce documents that are easily machine read and spiderable by search engines you will want to lean more towards using the external type of CSS styling. By using external style-sheets you are affectively moving the pages style definitions off page and out of site of the documents markup. As mentioned previously in “JavaScript and jQuery content movers” you will want to do whatever is possible to get your pages copy within the first five hundred lines of code 0r not far from it in which case moving all styling off page is an excellent idea. Whatever you are doing during the writing or generation of your sites markup be stingy with your available character space and only use what you need. Not over-nesting your divs, inline, or block items is something else you need to pay attention to as it can easily take up valuable space and cause your site to load slower than it should.
Another way to include CSS style definitions within your documents would be to use the embedded method. When embedding you will encase your CSS within an open and close type assignment tag much like you do with JavaScript. You should typically try to declare all of your CSS styling within the header of your document although most of the time you can get away with having it scattered throughout your markup. Using the embedded method within a document that also has an external style-sheet will allow you to over-ride the style assignments that have been declared within the external document. This is only true if the external CSS document is linked before your embedded code within your markup. This method can be used if needed but it takes up valuable space within your markup.
The final type of included CSS is that of the inline type. Inline CSS is assigned within your elements tag itself. This can typically be viewed as sloppy and make the overall markup very hard to read. The one thing that using inline CSS has going for it is that it takes precedence over any other CSS styling assignments. If you absolutly must overwrite an existing style assignment I guess you could use this method but I advise against it and suggest that you simply create a new class or id for the newly required styling.
::Examples::
External:
<link rel='stylesheet' type='text/css' media='all' />
Embedded:
<style type="text/css"> /* styling goes here */ </style>
Inline:
<div style="your styling here"></div>
Comments
Social
My Tumblr
Medium rare filet mignon topped with melted butter.
Sweaty mushrooms.
