How To Add CSS in HTML? 3 Ways to Add CSS in HTML
3 Ways to Add CSS in HTML
There are three simple ways to insert CSS into an HTML document.
- Internal Style Sheet
- External Style Sheet
- Inline Styling
- Internal Style Sheet
An internal style sheet is useful when a single HTML document has its unique styles.
With this, CSS rulesets/rules should be included in the <style> element.
The <style> element should only be enclosed inside the <head> element.
For following best practices, we can use the type attribute to define the MIME type of the <style> tag.
The text/css value indicates that the content is CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title> Internal Style Sheet </title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p> Lorem ipsum dolor sit amet. </p>
</body>
</html>External Style Sheet
An external style sheet can be very useful when multiple HTML pages have the same styles.
This can be achieved by having an external style sheet file.
An external style sheet file must be saved with a .css extension e.g. filename.css.
Then we need to use the <link> element to include the file in our HTML page.
There should be no <style> element inside a CSS file!
5+ HTML CSS Projects With Source Code
Example:
The style.css file contains the following codes.
body {
background-color: brown;
}
p {
color: white;
}Now that we have our external style sheet file. The next step is to include it in our HTML page.
We can simply do it by defining its file path using the <link> element with its href attribute.
<!DOCTYPE html> <html> <head> <title> External Style Sheet </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p> Hello World</p> </body> </html>
In the example shown above, the style.css file and the HTML file are saved in the app’s directory.
You can try it in your storage as well. Just follow these steps.
- Create a folder in your root directory.
- Save the HTML file in that folder.
- Save the style.css file in that folder.
- Run/Open the HTML file using any browser.
50+ HTML, CSS & JavaScript Projects With Source Code
Inline Styling
Inline styling is useful for styling a single element.
It is done by using the style attribute.
ADVERTISEMENT
Its value contains CSS declarations.
ADVERTISEMENT
<p style="font-size: 50px; color: blue;"> CodeWithRandom</p>
Guys hope you like this article and learn how to add css in html. Also if you are a beginner so check out the project on our website we published 500+ frontend projects for practice and learning new things that we use in projects.
ADVERTISEMENT
