In Codingville you learned how to use CSS to make your webpage appear more aesthetically pleasing and interesting. There are a few things that Codingville doesn't explain.
# CSS can be Inline, Internal, or External
Your CSS can appear in many places in your code. It can appear as an attribute in an HTML tag, it can be included in your HTML file within `<style></style>` tags, or it can be called from an external file.
## External CSS
This is how it was with Codingville. In Codingville it explained the need for a new `<link>` tag in your HTML's `<head></head>` section.
```
<!DOCTYPE html>
<html>
<head>
<title>CSS File Example</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>...</body>
</html>
```
You would then need to have a separate file called `mystyle.css` with all your CSS information within it.
### Best Practice Not in Codingville
1. A best practice is to make a new folder in your server for styles, called `styles`. Then, when you link it, make sure you include the folder name in the `href` attribute of your `link tag`.
`<link rel="stylesheet" href="styles/mystyle.css">`
2. If any file you link to your website (images, css files, movies, etc.) are not working, check to see if the reference is accurate. For example, if you use the `styles/mystyle.css` reference as above, double-check to make sure your file is actually where you told the HTML it would be.
Oftentimes when taking over a website from someone else, it might be worthwhile making every reference an *absolute reference*, where the whole URL is included;
`<link rel="stylesheet" href="https://coding.ndcfinearts.ca/styles/mystyle.css">`
## Internal CSS
The great news about Internal CSS is that it is no different in syntax to External CSS. The main difference is that your CSS is not included in a separate CSS file, but rather directly in the HTML file.
```
<!DOCTYPE html>
<html>
<head>
<title>CSS Internal Example</title>
<style>
h1 { color: red; }
div { margin: 1em; }
</style>
</head>
<body>...</body>
</html>
```
If you use the `<style></style>` HTML tags, everything between those tags will be treated as CSS.
### Why use External CSS then?
|External CSS|Internal CSS|
|-|-|
|The same CSS can be applied to multiple pages, great for branding|Only affects the page it is inside|
|Doesn't mess up your HTML with lots of text|Great for if you only have a few things to style quickly|
Many sites use a combination of both; an External CSS file that can be applied to every page on the site, and Internal CSS that only styles the few specific things a page has.
## Inline CSS
When you have a single HTML element that needs styling, but will likely be styled differently than every other element like it, you can style it directly in the HTML tag as a `style` attribute.
```
<h1>This is a header</h1>
<h1 style="color:red;">This is a red header</h1>
```
Inline CSS should only be used when you have a unique circumstance for an individual HTML tag. Otherwise it is best practice to make everything look the same by way of Internal or External CSS.
# External CSS from Other Sources
If anyone has created an External CSS file, you can use it without ever writing your own CSS. Google has done this on purpose to allow people access to hundreds of fonts. All you need to do is `<link>` it to your HTML
*In your HTML:*
`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">`
*In your Internal or External CSS*
`<h1 style="font-family:Oswald;">Oswald is a great name.</h1>`
You can do this with any Google font, or any other External CSS source you know about.