We’ve mentioned previously that there are three methods of using CSS: external, internal, and inline. In this tutorial we will go over each method with more detail.
Creating an External Style Sheet
An external style sheet, is a separate file storing all of your formatting. Then for each page that you want to use that style (or all your pages), you would simply add this code if your stylesheet is a file named style.css:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
On each page you wish to use the style sheet for, insert style.css (this is the actual file that has your style, you can name it anything you want to) in the <head> section of your webpage. We still have not discussed how to create the actual CSS file. Open up your notepad or any other text editor you have on your computer. Next, type in the style that you want that CSS file to have. For example, if you wanted to set the background color as red, the main text (paragraph text) as black, and the header as blue, you would type in:
body{ background-color: red;}
p { color: black; }
h1{ color: blue; }When you have finished the styles you want in this CSS file, click on “Save As” and save the file as style.css. Now it is a css file. To use the stylesheet, you will need to upload the .css file to your server either by FTP or through file manager in cPanel. After you have created your css file and included it using the code above, all of the styles you specified in the file will be applied to your web page. You can add as many different style sheets on one page as you need, but generally it is best practice to use only one or two.
Creating an Internal Style Sheet
To have a style only be used on one page, you will add the properties within the <style> </style> tag in the head. Unlike the External Style Sheet, you do not have to create a separate file as it will all be contained on the page. Open the page that you want to add a style sheet for and go to the <head> section. The internal style sheet must be placed in the <head> section or they will not work. For example, if you want all your paragraphs to have black text and the background to be red, you would place the following in your head tag:
<html>
<head>
<style type="text/css">
p {color: black; }
body {background-color: red; }
</style>
</head>Remember for the text to be the color specified, it will only take effect if you use the <p> tags within the page as that is the only text that will be effected. If you have a <h1> tag and want to change the color of those as well for example, you will need to add another line to the style:
<html>
<head>
<style type="text/css">
p {color: black; }
body {background-color: red; }
h1 {color: black }
</style>
</head>Now all the text on that page with a <p> or an <h1> tag will be changed. Remember this will not effect other pages, but only the page that has the <style> changes in the header.
Creating an Inline Style
This is the simplest method to using CSS, but since it has to be done to each tag individually it is also the most time consuming. You will us an Inline Style if there is just one element that you want to change, for example if all the paragraphs on your page are black but you want one to be red, then you can add an Inline Style to that paragraph:
<p style="color: red;">I want this paragraph to be red instead of black.</p>
Now on your page, the other paragraphs will still be black but any text within the <p> </p> tags as shown above will now be red. This can be repeated as many times as necessary on the web page.
