Expertrating - CSS Tutorial, Linking Style Sheets

Home > Courses, Tutorials & eBooks > CSS Tutorial > Linking Style Sheets

CSS Tutorial - Linking Style Sheets

Page 1 of 2

Overview

In this chapter you will learn:

Methods of linking a style sheet to a web page
Benefits of using an external style sheet
SPAN and DIV tags

This chapter will describe the methods of linking style sheets.

There are 3 ways to link styles with your document. You can do this with the help of:

1. Inline style sheets

2. Embedded style sheets

3. External style sheets

Inline Style Sheet

While using Inline Style Sheets the following points have to be kept in mind-

The style attribute is used with the relevant HTML tag.
The style attribute can contain any CSS property.
Inlining style is not a very flexible tool while working with style sheets because it mixes
the content with the presentation.
It should only be used when different styles are to be applied in a document.

Example

This paragraph is now of red color with left margin of 200px.

Internal Style Sheet

While using Internal style sheet the following points have to be remembered-

Internal style sheet is also known as embedded style sheet.
It is used when a single document has to follow a unique style.
It uses the style tag and is defined in the head section of a document
If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

Example

<html>
           <head>
            <style type = "text/css">
                    body { background color : red ;}
                    p { color : white ; margin-left : 100px;}
                    h1 { font-size : 18 px ; font-color : black; text-align : center;}

           </style>
           </head>
            <body>

            <h1>Internal CSS</h1>
            <p>This HTML document uses internal CSS. With this style sheet we can
                    achieve uniformity in our page.</p>

</body>
</html>

The output would look like :

Internal CSS

This HTML document uses internal CSS. With this style sheet we can

achieve uniformity in our page.

External Style Sheets

When using External Style Sheets the following points have to be noted-

An External Style Sheet is used when the style is to be followed in more than one page.
If there has to be changes in the style of the entire document, then changes are done at one place only.
The style sheet uses the link tag to link with each page in the document.
The link tag is included inside the head tag.

Every page which has a link to this style sheet will follow the same formatting rule.

ExpertRating CSS Certification - Get Certified Now!!