How to Apply CSS in HTML
About CSSIn this lesson, we will learn the various way of applying CSS in an HTML document.
Applying CSS in HTML
You can apply CSS in an HTML document in three ways and they are:
- Inline CSS
- Internal CSS
- External CSS
Let's discuss each of them in detail with examples.
Inline CSS
One of the simplest ways to apply CSS is by using inline styles. Inline CSS involves adding style directly to the HTML elements using the style attribute. However, this method is generally not recommended for large-scale styling, as it can lead to code repetition and maintenance issues.
<p style="color: red; font-size: 20px">Applying inline CSS on paragraph tag.</p>Internal CSS
Internal CSS, also known as embedded CSS, allows you to include CSS rules within the head section of an HTML document. By using the <style> tag, you can define styles that apply only to that specific HTML page. This method keeps the styling separate from the content, promoting better organization and reusability.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Internal CSS Example</title>
<!-- Internal CSS -->
<style>
p {
color: green;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
</body>
</html>External CSS
For more extensive projects, it is beneficial to use external CSS. With external CSS, you create a separate CSS file containing all the styling rules and link it to your HTML document using the <link> tag. This approach offers better maintainability and allows you to apply the same styles across multiple pages. The CSS file must have a file extension .css. For example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
</body>
</html>p {
color: green;
font-size: 18px;
font-weight: bold;
}