CSS Lesson 3: Insert a Style Sheet

0
14

Insert a CSS Style Sheet

In the previous lessons, you learned the basics of CSS. In this lesson you will learn how and where to insert the CSS style sheet in an HTML document. Usually, there are 3 ways to insert the CSS style sheet:

  • Internal style sheet
  • External style sheet
  • Inline CSS

Internal Style Sheet

Internal CSS Style Sheets are placed in <head> </head> tags. To insert the Internal Style Sheet you will use the <style> and </style> tags.

Source Code Output

This is Wikiprogramming CSS Tutorial

As you can see, the CSS code is placed within the HTML document.

External CSS Style Sheet

Usually, CSS sheets are used as an External style sheet and linked with an HTML document. It is highly recommended to use the External Style sheet for an HTML document, because CSS can be 1000s of lines, so it would be confusing and frustrating to make changes. Also, if you have one CSS for multiple pages then you can just link a CSS file with each page. Its syntax is:

When to use External Style Sheet

  • To keep website design and content separate.
  • To link multiple website pages with one CSS Style Sheet.
  • To make quick changes in webpages without spending too much time.

Inline CSS

Inline Sheet means to put the CSS style into HTML Elements to separate content from Internal and External Sheets. You can do it by putting style=”property:value;” in any HTML Element. A webpage gives high priority to Inline CSS. It overrides the styles used in Internal and External CSS sheets. Therefore, you should use it properly. Overuse can affect your design and confuse you while debugging.

Source Code Output

This is Wikiprogramming CSS Tutorial

Style Sheets Order

As you’ve been learning about the three types of style sheets, you might be wondering how to arrange them in HTML or which style sheet should come first or have highest priority in the browser. Here is the sequence to use!

  • Browser default sheet
  • External style sheet
  • Internal style sheet
  • Inline CSS

Summary

There are three types of CSS Style sheets: External, Internal and Inline CSS Sheet. <style> tag is used to place External and Internal Sheet within <head> tag. Inline Sheet is use with HTML Elements.

Next Lesson

In the Next lesson you will learn how to format the Text in CSS.

Leave a Reply