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.
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.
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.
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.
| Email: | support@WebHostingHub.com | Ticket: | Submit a Support Ticket |
|---|---|---|---|
| Call: |
877-595-4HUB (4482) 757-416-6627 (Intl.) |
Chat: | Click To Chat Now |
We value your feedback!
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.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!