In this chapter, we will learn how to add CSS to HTML to style web pages. There are three main ways to add CSS to HTML: inline styles, internal styles, and external styles. Each method has its use cases and benefits.
Inline Styles
Inline styles are added directly to the HTML element using the style attribute. This method is useful for applying unique styles to a single element, but it can make the HTML code messy if overused.
Syntax
<element style="property: value;">
Example
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
</body>
</html>
Internal Styles
Internal styles are added within a <style> tag inside the <head> section of the HTML document. This method is useful for styling a single HTML document.
Syntax
<head>
<style>
selector {
property: value;
}
</style>
</head>
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Example</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal styles.</p>
</body>
</html>
External Styles
External styles are written in a separate CSS file, which is then linked to the HTML document using the <link> tag. This method is the most efficient for styling multiple web pages, as it allows you to maintain and update the styles in one place.
Syntax
<head>
<link rel="stylesheet" href="path/to/stylesheet.css">
</head>
Example
HTML File
<!DOCTYPE html>
<html>
<head>
<title>External Styles Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
</html>
CSS File (styles.css)
p {
color: blue;
font-size: 16px;
}
Combining Methods
You can combine inline, internal, and external styles in the same HTML document. However, it’s generally best to use external styles for consistency and maintainability.
Example
<!DOCTYPE html>
<html>
<head>
<title>Combining Styles Example</title>
<link rel="stylesheet" href="styles.css">
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is a heading with internal styles.</h1>
<p>This is a paragraph with external styles.</p>
<p style="color: red;">This is a paragraph with inline styles.</p>
</body>
</html>
CSS File (styles.css)
p {
color: blue;
font-size: 16px;
}
Cascading Order
CSS stands for Cascading Style Sheets, and the "cascading" part refers to the order of precedence in which styles are applied. The order of precedence is as follows:
- Inline Styles: Highest priority
- Internal Styles: Medium priority
- External Styles: Lowest priority
If there are conflicting styles, the style with the highest priority will be applied.
Example
<!DOCTYPE html>
<html>
<head>
<title>Cascading Order Example</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: green;
}
</style>
</head>
<body>
<p style="color: red;">This is a paragraph with conflicting styles.</p>
</body>
</html>
CSS File (styles.css)
p {
color: blue;
font-size: 16px;
}
Output:
The paragraph will be red because inline styles have the highest priority.
Conclusion
In this chapter, you learned how to add CSS to HTML using inline styles, internal styles, and external styles. You also learned about the cascading order of styles and how to combine different methods. Understanding these techniques is essential for effectively applying styles to your web pages.