Mastering The Fundamentals of CSS
CSS stands for Cascading Style Sheets, and it helps us override the default browser styling, as its name suggests—"cascading" refers to how styles are applied in a hierarchy or layered manner.
Why Do We Need CSS?
Web development typically involves three phases:
Skeleton (Structure): Built using HTML.
Designing (Appearance): Achieved using CSS.
Working (Functionality): Implemented with JavaScript.
CSS is essential for designing and enhancing the appearance of web pages using its various selectors, properties, and attributes. It helps create visually appealing layouts and improves user experience.
How to Apply CSS to a Webpage
You can apply CSS to a webpage through three different methods:
Inline CSS: Used to style specific elements directly within the HTML tag using the
styleattribute.- Example:
<p style="color: red; font-size: 20px;">This is inline styling.</p>
- Example:
Internal CSS: Used when you want to style elements in the same file. Internal styles are defined within the
<style>tag in the<head>section of the HTML document.Example:
<style> h1 { color: blue; text-align: center; } </style>
External CSS: Used when you want to define styles in a separate
.cssfile. It is the most common and organized way to apply styling to a website. External CSS makes it easier to maintain and reuse styles.Example of linking an external CSS file:
<link rel="stylesheet" type="text/css" href="styles.css">
Example Code
Here’s a demonstration of all three CSS methods in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Examples</title>
<!-- Internal CSS -->
<style>
h1 {
color: blue;
text-align: center;
}
.internal-style {
background-color: lightgrey;
padding: 10px;
}
</style>
<!-- Linking External CSS -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p style="color: red; font-size: 20px;">This paragraph is styled using inline CSS.</p>
<div class="internal-style">
<p>This paragraph is styled using internal CSS.</p>
</div>
<div class="external-style">
<p>This paragraph is styled using external CSS.</p>
</div>
</body>
</html>
styles.css (External CSS)
/* styles.css - External CSS */
.external-style {
color: green;
font-weight: bold;
}
Key Takeaways:
Inline CSS is ideal for quick fixes or unique, one-time styling.
Internal CSS works well for single-page styling but can become cluttered for larger projects.
External CSS is the preferred method for scalable and maintainable styling.
