How to insert CSS in the page

When we add a CSS to the webpage, the browser automatically reads the style and format the HTML elements as defined the rules in style sheet.
ways to insert CSS

Ways to Insert CSS

There are three ways to add CSS in the web page.

  1. External Style Sheet
  2. Internal Style Sheet
  3. Inline Style

1. External Style Sheet

An External Style Sheet is a separate text file in which we have defined CSS rules and have .css extension.

Using External Style Sheet, we can change the web page look by just including and changing the text file that we have created.

To include the external style sheet file, we have to use <link> element in our web page or HTML document under <head> tag.

The page must include the reference to the external css file in the <link> element.

How to include External Style Sheet
----------------------------------------------
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

In the above example, we can see many attributes of <link> element. Here is the explanation of them.

 rel attribute defines the relation of the external file. This means that the document we are referencing is style sheet.

 type attribute specifies the language of file as a content type that is CSS. This attribute need to be defined.

 href contains the url of the css file along with name we have created. This attribute is required to define. 

2. Internal Style Sheet

We can use an Internal Style Sheet if we want to apply the style rules to particular page. 

 Using Internal Style Sheet we can style the elements of the page in which the rules are defined.
Internal styles are defined within the <style> element between the <head> tags of the HTML page.

 Here is the example of Internal Style Sheet.

 <head>
    <style type='text/css'>
         body {
            background-color: #ffffff;
         }

        h1 {
          color: #27ae60;
          margin-left: 40px;
        } 

    </style>
</head>

3. Inline Style

The Inline Style is used to give a unique style to the single element. If we want to style a element differently from the css rules we have created, we can do that using Inline Style.

 Rules applied to the element using Inline Style will affect that element only. To use the Inline Styles, we have to give style attribute to the element we want to change. In the style attribute, we can use any of the CSS property.

 Here is the way to use Inline Styles. If we want to change the color and font size of the particular h1 element then we can write it in following way.

 <h1 style="color:red; font-size: 30px;">This is a heading.</h1>

Comments

Post a Comment