To add CSS styles to your website, you can use three different ways to insert the CSS. You can Use an "External Stylesheet", an "Internal Stylesheet", or in "Inline Style". The benefit for using each depends on what you are doing with the Style.The following table explains the difference between them.

Different CSS style linking
Internal Stylesheet An internal stylesheet holds the CSS code for the webpage in the head section of the particular file. This makes it easy to apply styles like classes or id's in order to reuse the code. The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into.
External Stylesheet The External Stylesheet is a .css file that you link your website to. This makes it so that what ever you change in the .css sheet, will effect every page in your website. This prevents you from having to make many code changes in each page. This is for "global" site changes.
Inline Styles The Inline style is specific to the tag itself. The inline style uses the HTML "style" attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The Inline style is good for one an individual CSS change that you do not use repeatedly through the site.

Below are examples of what the code looks like for each type of CSS.

Internal CSS Stylesheet

When creating a stylesheet internally in the web page, you will need to use the <style></style> HTML tags in the Head section of your webpage. All the code for the Internal CSS stylesheet is contained between the <head></head> section of your websites code. Below is an example of what an Internal stylesheet looks like.

<head>
<style type="text/css"> h1 {color:blue;} h2 {color:red;} p {color:green;} </style>
</head>

External CSS Stylesheet

When using an external stylesheet you must reference the stylesheet in the HTML page that is using it. You would add the code below to your HTML document to reference a stylesheet in the same location as the HTML page called "style.css". You can upload the "style.css" page can be located anywhere in your files. You can name your stylesheet whatever you like and link to as many as you like. You can simply link to it in your head section and every edit your make to the "style.css" sheet will be globally changed through out the site. Below is what teh code looks like.

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

Inline CSS Styles

The inline style uses the HTML "style" attribute. This allows CSS properties on a "per tag" basis. The following is an example of how the inline style is used.

<p style="color:red;font-size:18px">This is a paragraph!</p>

This inline style will change the color of the paragraph to red and make the font size 18 pixels.

This concludes the article on How to link your CSS to your webpage. Please check the next article on Using CSS in your Website. 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.

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!
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!