css-types

There are four ways to interact styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS – The <style> Element

You can put your CSS styles into an HTML document using the <style> element. This tag is placed inside the <head>…</head> tag.

<!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 – The style Attribute

You can use the style attribute of any HTML element to define style rules. These rules will be applied to that element only.

 <h1 style="color:blue;margin-left:30px;">This is a heading</h1>

External CSS – The <link> Element
The element can be used to include an external stylesheet file in your HTML document.

<head>   
  <link type = "text/css" href = "style.css" rel="stylesheet" /> 
</head>

Imported CSS – @import Rule
@import is used to import an external stylesheet in a manner similar to the element. Here is the generic syntax of @import rule.

<head>  
   <@import url("style.css"); 
 </head>

Leave a Reply

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