CSS

Types of Style Sheets

Cascading Style Sheets adjust the properties of existing HTML tags. All Web Browsers depend on a built-in style sheet. It instructs the browser how to display different elements on a web page. Types of sheets are as follows:

External Style Sheets

We defined an external sheet as a separate file stored with a .css extension. It styles more than one page. An external style sheet specifies the style of the entire Website in one file. An external style sheet is then linked to the web page using the <link> tag. This tag is in the head section.

Example

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="Mystyle.css">
    </head>
    <body>
        Learning Axis
    </body>
</html>

In the above example, the browser will peruse the style definitions from the file Mystyle.css and format the document accordingly. We can edit external CSS in any text editor. The file must not contain any HTML tags.

Internal CSS

An internal style sheet is present in the head section of a website page. It just affects the web page in which it is present. It is inserted in a site page using the <style> tag.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1{
                color: blue;
            }
            h5{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <h1>Learning Axis</h1>
        <h5>The Solution You Need</h5>
    </body>
</html>

The above example displays heading h1 and h5 in blue and yellow color.

Inline Styles

Inline styling applies to a single tag. It modifies the characteristics of a tag in the current occurrence of that tag. If the same tag repeats, it uses the default style of the tag. The attributes are in the opening tag.

Example

<!DOCTYPE html>
<html>
    <body>
        <p style="color: blue">
            Learning Axis
        </p>
    </body>
</html>

The above model displays the contents of the paragraph in blue color. But this attribute is applicable for current occurrence only. If the <p> tag is used again in the document, It will show the contents in the default color.