Inline, internal or external CSS?

When writing CSS for your web pages you have the option of where to put it. You can either place the CSS directly into your HTML markup alongside the HTML elements, group all the CSS together at the top of the document or store it as an external CSS file for inclusion into your pages. Which approach you take depends on a few reasons as explained below.

Inline CSS

Inline CSS is the term used to describe when CSS is applied to an element as one of the elements attributes. You can apply any CSS properties within the style attribute of any HTML element.

[html]
<div style="height: 100px; background: #000;">
<h1>Site Name</h1>
</div>
[/html]

In the above example we’ve applied two CSS properties to the header div, height and background. You can include any CSS properties you like here; simply list them one after the other but make sure to include the terminating semicolon at the end of each property.

Internal CSS

By making use of the class and id attributes of your HTML elements you’re able to style them using CSS and have all of your CSS properties grouped in a single location in the head section of your web page.

[html]
<!– Within the head of your HTML document –>
<style type="text/css">
#header {
height: 100px;
background: #000;
}
</style>
[/html]

[html]
<!– Within the body of your HTML document –>
<div id="header">
<h1>Site Name</h1>
</div>
[/html]

In the CSS used in this snippet we’ve applied a couple of CSS properties to the element with an id of “header” as defined by the #header section. Now, whenever we make changes to the CSS properties the div with id “header” will reflect those changes. The advantage of this approach is that all of your CSS can be found in a single location. Also, by using the class identifier you can apply the same CSS properties to multiple elements by making just a single change.

External CSS

If your CSS is starting to become quite lengthy you may want to consider breaking it away from your HTML markup. This can be done by defining your CSS styles in a completely separate file, let’s say style.css. You then make a call to that file and the browser will load up your stylesheet and apply it to the HTML document.

Assuming you’ve placed your CSS within a file called style.css you simply use the following tag within the head section of your web page.

[html]
<link rel="stylesheet" type="text/css" href="style.css" />
[/html]

This allows you to consolidate all of your CSS into a single file which you can then include into all of your web pages. Another advantage of this approach is that it reduces the size of your HTML web page making it much easier to read and navigate when editing its code.