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