Adding CSS to your web page

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:

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:

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:

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!