#How to Use Inline, In-Document, and Linked CSS
###3 Main Ways to use CSS
####Inline Styles Inline styles are the most basic way of applying styles to an element, in that you apply the styles directly to the tag in your HTML. For example, this is an inline style:
<p style="font-size: 200%;">
This text will be twice the size
of your other paragraphs.
</p>
####In-document ("Embedded") Styles
In-document (AKA “embedded”) styles make use of the
<style> </style>
tags within the HTML document’s head, like so:
<style>
p {
font-size: 200%;
}
</style>
####Linked Stylesheets Linked style sheets are the preferred method for applying CSS to a website. Here, your CSS resides in a separate document, outside of your HTML entirely. You then link to it in your document’s head like this:
<head>
...
<link rel="stylesheet" href="style.css" media="screen" />
...
</head>
There are three important pieces here:
- Rel: Stands for “relationship.” Tells your browser that this is a stylesheet.
- Href: Stands for “hypertext reference.” This is how your browser knows where to find the stylesheet. If it’s in a different directory, you’ll have to show that in your href.
- Media (optional): Says that this stylesheet should be applied to the screen. If you leave this off, it will still be applied to the screen.