How to Add CSS
Three ways to insert CSS in HTML documents:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS:
Inline CSS is used to apply CSS on a unique style for a single line or element.
The inline CSS is also a method to insert style sheets (CSS) in the HTML document. This method mitigates some benefits of style sheets so it is advised to use this method sparingly.
Example:
<!DOCTYPE html> <html> <body> <h1 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h1> <p>paragraph is not affected.</p> </body> </html>
OUTPUT:
Disadvantages of Inline CSS:
- You cannot use quotations within inline CSS(end of your style value).
- These inline styles cannot be reused anywhere else.
- These inline styles are tough to be edited because they are not stored in a single place.
Internal CSS:
The internal style sheet is used to add a unique style for a single document(file). It is defined in <head> section of the HTML page inside the <style> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
color: Red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet.</h1>
<p>paragraph will not be affected.</p>
</body>
</html>
OUTPUT:
External CSS:
External CSS is used to apply CSS on different pages or all pages. All the CSS code in a CSS file. Its extension must be .css for example style.css.
It uses the <link> tag on every page and the <link> tag should be put inside the head section.
Example:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
style.css :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Index.html:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
OUTPUT:
