Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. In this section, we will explore the basics of CSS, its syntax, and how it can be used to style web pages.
Key Concepts of CSS
- Selectors: These are patterns used to select the elements you want to style.
- Properties: These define the aspects of the elements you want to change, such as color, font, or layout.
- Values: These are the settings you apply to the properties.
Basic CSS Syntax
CSS is composed of rulesets, which are made up of selectors and declarations. A declaration block contains one or more declarations separated by semicolons.
Example:
In this example, h1 is the selector, color and font-size are properties, and blue and 20px are values.
Practical Example
Let's apply some basic CSS to an HTML document to change the appearance of a webpage.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First CSS Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my website.</p>
</body>
</html>CSS Stylesheet (styles.css)
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.5;
}Explanation:
- The
bodyselector styles the entire page with a light gray background and sets the default font to Arial. - The
h1selector centers the heading and changes its color to a dark gray. - The
pselector styles the paragraph text with a medium gray color and increases the line height for better readability.
Exercises
Exercise 1: Basic Styling
Create an HTML file with a heading and a paragraph. Use CSS to style the heading with a different font size and color, and style the paragraph with a different font family and text color.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 1</title>
<link rel="stylesheet" href="exercise1.css">
</head>
<body>
<h1>My Styled Heading</h1>
<p>This is a styled paragraph.</p>
</body>
</html>CSS (exercise1.css):
Exercise 2: Multiple Selectors
Style multiple elements using a single CSS rule. Create a list and a paragraph, and apply the same text color to both.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 2</title>
<link rel="stylesheet" href="exercise2.css">
</head>
<body>
<p>This is a paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>CSS (exercise2.css):
Common Mistakes and Tips
- Forgetting the Semicolon: Each CSS declaration should end with a semicolon. Omitting it can cause errors or unexpected behavior.
- Specificity Issues: When multiple styles apply to an element, the one with higher specificity will take precedence. Understanding specificity is crucial for effective CSS.
- Using External Stylesheets: Always link your CSS files correctly in the HTML
<head>section to ensure styles are applied.
Conclusion
In this section, we covered the basics of CSS, including its syntax, how to apply styles to HTML elements, and some practical examples. Understanding these fundamentals is essential for creating visually appealing and responsive web pages. In the next module, we will delve deeper into the CSS Box Model, which is crucial for layout and design.
Responsive Design Course
Module 1: Introduction to Responsive Design
- What is Responsive Design?
- History and Importance of Responsive Design
- Basic Principles of Responsive Design