Introduction to CSS
Welcome to the CSS Introduction lesson! Cascading Style Sheets (CSS) is a fundamental technology for building modern websites. While HTML provides the structure and content of a webpage, CSS is responsible for its presentation and visual appeal.
What is CSS?
CSS stands for Cascading Style Sheets. It's a stylesheet language used to describe the look and formatting of a document written in a markup language like HTML. With CSS, you can control:
- Colors
- Fonts
- Layouts
- Spacing
- Backgrounds
- And much more!
Why is CSS Important?
CSS is crucial for several reasons:
- Separation of Concerns: It separates the presentation (CSS) from the content (HTML), making your code cleaner, more organized, and easier to maintain.
- Consistency: You can apply the same styles across multiple pages, ensuring a consistent look and feel for your entire website.
- Accessibility: Well-structured CSS can improve the accessibility of your website for users with disabilities.
- Responsiveness: CSS allows you to create responsive designs that adapt to different screen sizes (desktops, tablets, mobile phones).
- Faster Page Loads: By externalizing CSS, browsers can cache the stylesheet, leading to faster loading times for subsequent pages.
How CSS Works: Selectors, Properties, and Values
At its core, CSS works by selecting HTML elements and applying styles to them. This is done through a simple rule structure:
property: value;
property: value;
}
Let's break this down:
- Selector: This targets the HTML element(s) you want to style. Examples include element names (
p,h1), class names (.my-class), or IDs (#my-id). - Property: This is the specific style attribute you want to change (e.g.,
color,font-size,background-color). - Value: This is the setting for the property (e.g.,
blue,16px,#f0f0f0).
Example: Styling a Paragraph
Let's say we have the following HTML:
We can style this paragraph using CSS to make its text red and change its font size:
color: red;
font-size: 18px;
}
Example Output:
This is a paragraph.
Ways to Include CSS
There are three main ways to add CSS to your HTML document:
1. Inline Styles (Not Recommended for Most Cases)
Applied directly to an HTML element using the style attribute. This is generally discouraged for large projects as it mixes content and presentation.
2. Internal Stylesheets
Defined within the <style> tags in the <head> section of your HTML document.
<html>
<head>
<title>Internal CSS Example</title>
<style>
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External Stylesheets (Recommended)
CSS rules are placed in a separate file with a .css extension. This file is then linked to your HTML document using the <link> tag in the <head> section.
styles.css:
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: purple;
}
index.html:
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Next Steps
This lesson provides a foundational understanding of CSS. In subsequent lessons, we'll dive deeper into specific CSS properties, selectors, the box model, layout techniques (like Flexbox and Grid), and responsive design principles.
Keep practicing and experimenting! The best way to learn CSS is by doing.