CSS can be used in three different locations in your HTML.
If you choose to use an external style sheet, you must save your style sheet with a ".css" extension. For example, "styles.css" or "main.css". To do this in a program such as notepad, simply click File->Save as, and change the extension from ".txt" to ".css". Once you have done this, you are ready to link your css page to your HTML page!
This page can be linked to your HTML page using a <link> HTML tag in the head portion of your HTML page. For example:
The above example links to a stylesheet in the same folder directory named "styles.css". If, for example, you would like to add a stylesheet that is in the folder "stylesheets" then you could do this:
NOTE: To go up one folder we use "../" like this:
An internal CSS page is helpful if you want to add CSS styles to different tags and classes for ONE SPECIFIC HTML PAGE. In other words, if your CSS rules have any possibility of being used on a different HTML page, it is strongly recommended that you add your CSS rules to an external CSS page. In fact, some programmers suggest that you only use external CSS pages. By doing this, you can keep all of your CSS rules together and separate from your HTML code.
To add a CSS internal style sheet, we will add the <style> tag and </style> tag to our HTML HEAD section. However, it may be helpful to note that you can add these tags anywhere in the body as well, though this is not as common. Good practice usually means keeping both your CSS and your JavaScript in your HEAD tag.
Once you add your style tag, your page may look something like this:
Writing a style within an HTML tag is rarely the way to go when styling your tags. Although this can be helpful for a quick "let's figure out how to get this to work" type of deal, it can prove extremely tiresome when you want to make a change. Most programmers suggest to never leave any inline styles in, and to create a rule for every change using an external style sheet. Some even say you should create an external style sheet with basic simple CSS styles you may use multiple times.
To add an inline style to one of your HTML tags, we use the "style" attribute within the tag. This attributes value is all of the CSS styles you wish to add to this tag. Unlike a CSS rule, we leave out the curly brackets, leaving only the CSS property and CSS value. For example:
Once loaded within a browser, this line of code will appear like this:
hello!
As mentioned multiple times throughout this page, it is STRONGLY recommended that you use an external style sheet. Without using an external style sheet, your CSS may quickly become increasingly difficult to maintain!