How many ways you can include CSS in the HTML page. With Example

Pushpa Raj Dangi September 01, 2020
How many ways you can include CSS in the HTML page


There is three-way of including stylesheet on the webpage. They are discussed below

1. Inline
2. Internal
3. External 

1. Inline style is used to style a single element on a web page. To use the inline CSS we define the style attribute to the HTML element.

Example 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Css</title>
</head>
<body>

    <h1 style="color:blue;text-transform:uppercase">This is Inline CSS Heading.</h1>
    <div style="width:80px;height:80px;background:red">.</div>
</body>
</html>


2. The internal style sheet used in the HTML page and is defined inside the <style> element, inside the head section. Using internal CSS makes the code ugly and unmanageable.

Example 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Css</title>
    <style>
        h1 {
            color: blue;
            text-transform: uppercase
        }

        div {
            width: 80px;
            height: 80px;
            background: red
        }
    </style>
</head>

<body>

    <h1>This is Internal CSS Heading.</h1>
    <div>.</div>
</body>

</html>

3. Including external CSS makes code organize and easier to maintain. By including the external  style sheet we can change the style of the whole website by changing one file that is another benefit.

of including external CSS. An external style sheet written in .css extension.

Example

To include the external CSS file we use the <link> element inside the head part of the page. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Css</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1>This is External CSS Heading.</h1>
    <div>.</div>
</body>

</html>


Our style.css looks like 

h1 {
    color: blue;
    text-transform: uppercase
}

div {
    width: 80px;
    height: 80px;
    background: red
}

Summary: 


-> Inline style is include inside an HTML element
-> External and internal style are include inside in the head section

Reactions

Post a Comment

0 Comments

If you have any question please ask?