This is part one of How To Add Style Sheets To Your HTML. We will cover the basics mostly, but the idea is that there are always multiple ways to do something, and many web designers do in fact vary their methods of how they add CSS to their html code.
Method 1: In the beginning…
This is by far the most common and the default way to add style to your html document. You simply link to your stylesheet in the HEAD section of your html document.
<head>
<link rel="stylesheet" href="http://www.domain_name.com/style.css" type="text/css" media="screen" />
</head>
<body>
The optional media specifies the medium or media to which the style sheet should be applied to. The most commonly supported media type is “screen”, which is meant for computer screens. There are other options though, like print, for output to a printer, and aural and braille for speech synthesizers and braille tactile feedback devices.
Method 2: Embedded Style Sheet
Perhaps not the most efficient, because it makes your html document larger, and you lose the benefit of being able to effect other html documents, but still a popular method is to simply add your style information to the html HEAD section.
<head>
<style type="text/css" media="screen">
body {
background: #a9ac99;
font-size: 13px;
font-family: 'Trebuchet MS', Verdana, 'Lucida Sans', Helvetica, sans-serif;
}
</style>
</head>
<body>
</body>
This method is helpful too, in cases where your html document has a unique section which other html docs will not have, and you do not want to change your main stylesheet.css file. You can add just the css you need after the normal linked style.css like so:
<head>
<link rel="stylesheet" href="http://www.domain_name.com/style.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
#special_section {
font-size: 12px;
}
</style>
</head>Method 3: Inlining Style
Sometimes, you have worked all day on getting something to look great and then you find out that your style looks awful in Internet Explorer, so you cheat and use inline style. This is where you add the style information to the element itself, like so:
<p style="color: #666666; font-family: serif;"> This means I'm too tired to fix it in IE.</p>
This is not very flexible but it does fix some problems very quickly. However you should not rely on inline style very often because it makes the html document not very readable in other media, like braille, or even print.
Inline styles are userful in troubleshooting stylesheet problems, but just remember not to implement them as an actual solution.