Go from a newbie to a pro!
Follow Us!
Guides
CSS: Adding CSS to your HTML Documents
There are three methods of adding CSS to your HTML documents: external, internal and inline. This section will go through the pro's and con's of each of these.
External Method
The external method is used when you store all of your CSS in another file such as “external.css”. You would then create a link within your HTML document that says: “use the external.css file to style my document”. In order to link your CSS file to your web page, you will need to use the <link> tag:
<head> <link href=”external.css” rel=”stylesheet” type=”text/css” /> </head>
This tells the browser “find the file external.css (in the same folder as this document) and style this page using those CSS rules."
The benefit of using the external method is that you can link the “external.css” file within all of your web pages. This allows you the maximum amount of flexibility when updating and maintaining your web site.
With this increased flexibility comes one main pitfall. The external method has the last priority in being applied to your documents. This means that if you link your external CSS file to a web page, but still use either the internal or inline methods, those methods will take higher priority than the external method.
Internal Method
The internal method is used when you store all of your CSS within the <style></style> tags inside your HTML document's <head> tags.
You would create your HTML document as you normally would but instead of linking your document to an outside file, you would place all the code at the top of your document.
<head>
<style type=”text/css”>
p {color: blue;}
div.content {background-color: #BB2233;}
</style>
</head>
The benefit of using this method is you are able to keep your CSS within your HTML documents without cluttering up your content. Using this method allows you to separate the content from the style but keep them all in one file.
The drawback of Internal CSS is that it only applies to that particular page. You will not get the benefit of having your style “cascade” across all of your documents (hence the purpose of Cascading Style Sheets).
Inline Method
The inline method is used when you store your CSS within your HTML tags. You would add a style=”CSS goes here” attribute within your HTML tags.
A simple inline tag example:
<p style=”color: red;”>A red paragraph.</p>
The benefit of this method is that it has the highest priority. Even if your HTML document links to an external CSS file (and it contains a rule for the specified tag), the external CSS file will not style the tag.
Let's say you created 10 paragraphs within your document and you created an external CSS file that has a CSS rule to make all the text the color red; you can add an inline style to one of those paragraphs to make the text blue. What do you think will happen? Every paragraph will be colored red except the one you added the inline CSS for.
The drawback to inline CSS is that it reverts your document to the old ways of adding style to your site. CSS was created to separate content from presentation. Using inline CSS defeats this purpose.
Summary
- External Style Sheets: Allows the most flexibility and is the most popular form of adding CSS to your HTML documents.
- Internal Style Sheets: Great if you want to design one page differently than all your others (I.e landing pages). You don't get the benefits of having your CSS cascade across all your web pages.
- Inline Style Sheets: Good if you want a quick fix or you want to have one or two (X)HTML tags styled differently. This method should be used sparingly (if at all) since it defeats the true purpose of CSS.
Comments
Post new comment