Types of CSS Styles

Home » CSS » CSS3 » Types of CSS Styles

Posted by 20Fingers2Brains on Tags: CSS , CSS3

In this article we will see how to insert CSS in an HTML Document.

We can use a CSS style sheet with an HTML document by learning how to link the CSS code with the HTML document.
A CSS style sheet can be linked to an HTML document in a variety of ways, where each way has its own advantages and disadvantages.
The following are the three ways to aplly CSS style to your HTML document:

1. The internal style sheet
2. The external style sheet
3. The in-line style

DEMO

The Internal Style Sheet:
The internal style sheet is written within the HEAD element of the HTML document. This style is applied only to the document in which it is defined. The syntax of internal style sheet is written as follows:

    <style type="text/css">
        selector {property : value;}
    </style>

The preceding syntax contains the starting and ending tags of the STYLE element. The STYLE element contains a type attribute with value text/css. The opening and the closing tags of the STYLE element embeds the style declaration. The declaration consists of selector followed by curly braces. The curly braces hold a property followed by a colon, which is further followed by a value, and finally that value is followed by a semicolon.

    <head>
    <style type="text/css">
        p{font-family:Comic Sans MS;color:Blue;}
        #target{font-family:Comic Sans MS;color:Red;}
    </style>
    </head>

In the preceding code snippet, the STYLE element is placed inside HEAD element. The CSS statements are written within the STYLE element.

Advantages:

Affects only the page in which they are placed. You can use this style if the CSS is page specific.
Allows you to change the style of the same HTML file in which you are working.

DisAdvantages:

Affects only the page to which they are applied. If you want to use the same styles in other documents, you need to repeat them for every page.
Increases the page load time because the entire CSS file needs to be implemented first to apply CSS.

The External Style Sheet:

The syntax to create an external style sheet is same as that of creating an internal style sheet. In case if internal style sheet the style is placed in the HTML document; whereas, in case of external style sheet, the CSS file is written outside the HTML document and the reference of the CSS file is placed in the HTML document. In an external style sheet, the style sheet rules are saved into a text file with the .css extension. Once you have created your CSS file, you can link with web pages. The CSS file can be linked with HTML document in two ways explained below:

Linking - This way refers to the HTML LINL element, which is used to link a style sheet. This LINK element has three attributes - rel, type and href. The rel attribute specifies what you are linking (stylesheet as value in our case). The type specifies the MIME type for the browser, and the href attribute specifies the path of the .css file.
```
    <link rel="Stylesheet" type="text/css" href="test.css" />
```
In the preceding code snippet, the value of the rel attribute is set to stylesheet, value of the type attribute is set to text/css, and that of the href attribute is set to test.css.
Importing - This way helps you in accessing the style rules from other CSS style sheets. The @import keyword is used followed by the Uniform Resource Identifier(URI) of the stylesheet to which you want to import the style rules.
```
    <style type="text/css">
        @import url("targetStyle.css")
        p{color:Red;}
    </style>
```
In the preceding code snippet, we have used the @import keyword followed by the URL of the stylesheet. In addition to the import rule, the @media rule of CSS helps you in applying the styles to the media device depending on the type of the device a page is displaying. Some of the media devices supported by CSS are computer screens, printers, televisions, handhelds, speech synthesizers, and projectors.

Advantages:

Allows you to control the look and feel of several documents in one go and do not need to define a specific style for every element.
Allows you to easily group your styles in a more efficient way.

DisAdvantages:

Increases the download time as the entire CSS file has to be downloaded to apply the style to the HTML document. When the styles are less in number, applying external style sheet can make the document complicated.
Displayes the Web page only after the entire style sheet is loaded.

The Inline style:

The inline style properties are written in a single line separated by semicolons. These properties are placed inside the style attribute of the HTML element, on which you want to apply the CSS.

        <div>
            <p style="color:Red;font-family:Comic Sans MS;">This is paragraph element.</p>
        </div>

In the preceding the paragrah element is styled.

Advantages:

Provides the highest precedenceover internal and external style sheets. Therefore, if you want some styles to be compulsorily applied, use inline style or else override CSS styles.
Provides an easy and quick approach to add a style sheet in a web page.

DisAdvantages:

Makes a document difficult to download and increases the download time.
Does not allow to style pseudo-elements, which are used to add special effects to the selectors. For example: you provide different styles or colors to differentiate between active, visited or non-visited links.