BRAHMA TECHNOLAB

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;
}

LET’S DISCUSS YOUR PROJECT

Comments are closed.