CSS Inclusion

Inclusion in CSS

CSS Inclusion : There are three ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.


Embedded/Internal CSS :

Internal styles are defined within the <style> element, inside the head section of an HTML page.

Example:

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Inline CSS:

Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element.

In order to use an inline style, add the style attribute to the relevant tag.

Example:

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

External CSS:

With this method, all styling rules are contained in a single text file, which is saved with the .css extension.

 CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section.

Example:

<html>
<head>
   <link rel="stylesheet" href="example.css">
</head>
<body>
    <p>This is my first paragraph. </p>
    <p>This is my second paragraph.  </p>
    <p>This is my third paragraph. </p>
    p {
   color:white;
   background-color:gray;
}
</body>
</html>

Recommended Psots :-

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *