Applying CSS
« Previous: Introduction to CSS | Next: CSS syntax »
CSS can be applied to a page in 3 ways:
External styles
An external stylesheet is saved as a separate file from the html documents
to which it is applied. You can use the <link> tag inside the <head> element of a page to create a link to an external stylesheet:
<link rel="stylesheet" type="text/css" href="cssfolder/stylesheetname.css" />
The rel and type attributes should always have the values shown if the tag is linking to a stylesheet; the value of the href attribute is the location of the CSS file. CSS files should always be saved with a .css extension.
Internal styles:
An internal stylesheet is contained within an html document, and is defined in the <head> element of a page, inside <style> tags:
<style type="text/css">
… css goes here …
</style>
Inline styles:
Inline styles can be defined within individual HTML elements, using the style attribute:
<p style="color: #ff0000">paragraph text</p>
For a completed site, external stylesheets are undoubtedly the most useful, as they can be accessed by multiple pages; however, during production and testing it can be easier to use internal or inline styles to save having to work on two files at once.