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="/support/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 parctice 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.

For more information on this course please visit Using & Understanding CSS.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 201673

Related Questions

Here are a few questions related to this article that our customers have asked:
Pictures and CSS on my website do not load
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!