BRAHMA TECHNOLAB

Reading Time: < 1 minutes

How To Link CSS File To HTML

There are three ways

  • Inline CSS
  • Internal CSS
  • External CSS

1. Inline CSS

Inline CSS contains the CSS property in the body section attached with element is known as inline CSS.

<p style="color:red;">This is paragraph.</p>

Here

  • CSS added within the HTML tag (p), color of text will be red. used to apply a unique style for a single element.

2. Internal CSS

The internal style is defined inside the <style> element. inside the head section.

  • Internal CSS used if one single HTML page has a unique style.
<!--Within a head section -->

<head>

  <style>
   
    body {
      
        background-color:linen;
          
    }
    
    h1 {
    
       color:maroon;
         
       margin-left:40px;
    }
    
  <style>
    
</head>

Here

  • In this example body & h1 styled using a internal CSS
  • Within a head section
  • With <style> tag

3. External CSS

The external CSS defined outside HTML page with separate file of .css extantion.

  • File .css link to html page’s with reference <link> tag in the head section, html
<head>

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

style.css linked with link tag

Separate .css file linked to external.html

body {

    background-color:linen;
}
    
h1 {

   color:maroon;
   
   margin-left:40px;
}

Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.