Styles can be added to an HTML document in 3 ways: external style sheets, embedded style sheets and Inline styles.
External style sheets allow a set of styles to be shared across multiple pages, they completely separate content from presentation.
The most common method is a simple link element within the document <HEAD>:
<link rel="STYLESHEET" href="../main.css" type="text/css">
The media attribute can be used to specify screen, print or all, print style sheets will apply only when the document is printed.
<link rel="STYLESHEET" href="../main.css" type="text/css" media="print">
Alternate style sheets allow the selection of multiple sets of styles either via options built into the browser or more commonly built into the HTML page by the author, to specify an alternate style sheet simply change rel="STYLESHEET" to rel="ALTERNATE STYLESHEET"
Import directives can be placed at the very beginning of a style sheet to @import a second style sheet:
@import url(../promotion.css);
The majority of user agents (web browsers) will load all linked style sheets including alternate style sheets, so splitting code across different files will not save bandwidth.
A style sheet can be embedded in the <HEAD> of a single HTML page, this is useful for styles that will only apply to a single page.
<style type="text/css">
/* add rules here */
h1 { font-size: 16pt; }
</style>An embedded style sheet can also import an external style sheet:
<style type="text/css">
@import "/styles/default.css";
body { background-color: #FF0000; }
</style>
Any HTML element <p>, <H1> etc can have style information embedded inline <H1 style="background: blue; color: white;">
Not all CSS properties are available inline and this is the least efficient method of styling text, but it can be useful, for example when generating styled content dynamically with Javascript.
“I'm black, I don't feel burdened by it and I don't think it's a huge responsibility. It's part of who I am. It does not define me” ~ Oprah Winfrey
Related:
Inheritance - Cascading styles