There are three different methods to apply Cascading Style Sheets (CSS) to your website:  External Stylesheet, Inline Style, and Internal Style.  The advantage of using one over the other is dependent upon how you need to style your web page. 

Comparing the Different Types of CSS

Inline Style An inline style applies directly to the code within an HTML document. The HTMl tag "style" is used to specify the formatting applied to HTML code in the webpage.  This method of providing CSS formatting is considered inefficient because the formatting must be done repeatedly through out the website.
Internal Stylesheet Internal stylesheets also add formatting directly into the web page, but instead of being present throughout the code, there is a central section at the head of the document for all of the style settings.  This is better than the inline style because it centralizes all of the CSS into one part of a web page, but still only affects the page into which the CSS code has been applied.
External Stylesheet The External Stylesheet uses a .css file specific for formatting that can apply to multiple pages.  Its main advantage is that affects all the pages in the website so that you centralize the formatting.


Examples of CSS Types

Inline CSS

Inline style formatting code is embedded in the HTML code using the "style" attribute.  Here's an example of STYLE in action:

<p style="color:blue;font-size:12px">Hello world! Look a this sample text!</p>

The style applied in the paragraph tag will change the color blue and the size of the font size to 12 pixels. 


Internal CSS

The <style></style> HTML tags will need to be in the Head section for each webpage. The CSS code will only be between the <head></head> tags on the web page.  All other CSS code would be considered inline. Here's an example of an internal stylesheet:

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


External CSS

An external stylesheet must be referenced in the HTML page that is using it.  Typically, you would see a file like style.css used to store all of the CSS settings.  The style.css page can be located anywhere in your files. You can name the file any name, but you will need to link to it so that all changes made through the style.css would globally change the formatting through the website.  Here's an example of the link that would used for the external CSS stylesheet:

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

 

This completes the tutorial on adding CSS to your website.  Consider what best works for the development of your site, or use a combination of the options in order meet your website development needs.

 

 

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!

Did you find this article helpful?

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!

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.