External CSS
- It involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing
<head> tags with a self-closing <link> element:
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
div {
color: white;
background-color: black;
}
p {
color: red;
}
- The
href attribute is the location of the CSS file.
- The
rel attribute specifies the relationship between the HTML file and the linked file.
Internal CSS
- Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file.
- You place all the rules inside of a pair of opening and closing
<style> tags, which are then placed inside of the opening and closing <head> tags of your HTML file.
- We don't need a
<link> element.
<head>
<style>
div {
color: white;
background-color: black;
}
p {
color: red;
}
</style>
</head>
<body>...</body>
Inline CSS
- Inline CSS makes it possible to add styles directly to HTML elements.
<body>
<div style="color: white; background-color: black;">...</div>
</body>
- We don’t require use of any selectors here, since the styles are being added directly to the opening
<div> tag itself.
- Any inline CSS will override the other two methods.