There are three main types of CSS Rules. Each is characterized by its placement within your document. Let's go over each one.
Internal Styles: These are style rules that are defined in the <head> section of your document. So far all the style rules we created were internal.
Inline Styles: Inline styles are defined within the HTML markup of a particular page element. We haven't taken a look at inline styles so let's go over a quick example.
Type a sentence into the current document. <p>This text will be formatted using inline CSS rules</p>
Now change the color of this paragraphs' text. <p style="color:blue;"> This text will be formatted using inline css rules.</p>
We have placed our CSS declaration directly in the same line as the html element <p> that we wanted to format.
You might recall that when we developed our first table based web page layout, we kept specifying the font face in a similar fashion. Remember that this was an inefficient method, and the same can be said for inline CSS rules. It is always a better practice to use internal styles, or the best option: External styles.
External Styles: This is when the style rules are defined in an external style sheet and linked to the web page. Let's go ahead and convert our existing inline style sheet to an external style sheet. The process is simple, we just need to take the style rules in our <head> section and save it in a .CSS file.
Once you have pasted in the CSS rules, save the file as styles.css. Make sure it is in the same folder as your web page.
Now go back to the original document, and create a link to the style sheet.
Insert the following line in the <head></head> section.