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

  • 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 CS
  • 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 Comment

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

Need Help?