As we have discussed in a previous section, there are three different ways to insert CSS: external, internal, and inline.  Here we will go over how to create these three different styles in more detail.

How to Create an External Style Sheet

An external style sheet, as the name implies, means that the style is saved in a different file.  Then for each page that you want to use that style (or all your pages), you would simply add this code:

<head>
<link rel="stylesheet" type="text/css" href="/help/style.css" />
</head>

On each page you want to use the style sheet, insert style.css (this is the actual file that has your style, you can name it anything you want to) in the <head> as shown above.  But how do you create the .css file?  First, open up your notepad or word pad on your computer.  Next, only 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; }

Once 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 your cPanel File Manager.  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 only one or two is used for ease of use.

How to Create 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.

How to Create an Inline Style

This is perhaps the simplest, 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.

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 our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

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

News / Announcements

Update to SSL Certificates - Certificate Warnings
1969-12-31 11:00 am EST
Hits: 624
What is the Heartbleed bug?
1969-12-31 11:00 am EST
Hits: 233

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

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

Not a Customer?

Get web hosting from a company that is here to help.