Welcome to the world of CSS! In this module, we'll explore the fundamentals of CSS, including its syntax, selectors, and properties. You'll learn how to write CSS rules, style HTML elements, and create visually appealing web pages.
What is CSS?
CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages. It's used in conjunction with HTML and JavaScript to create visually appealing and user-friendly web applications.
CSS Syntax
CSS syntax consists of three main parts:
1. Selector: Identifies the HTML element(s) to style.
2. Property: Specifies the style attribute to apply (e.g., color, font-size, etc.).
3. Value: Sets the value of the property (e.g., red, 16px, etc.).
Basic CSS Rule Structure
Here's a basic CSS rule structure:
selector {
property: value;
}
Example 1: Styling a Paragraph
Let's style a paragraph element with a red color and font size of 16px:
p {
color: red;
font-size: 16px;
}
In this example:
- p is the selector (targeting all paragraph elements).
- color and font-size are properties.
- red and 16px are values.
Example 2: Styling a Class
Let's style an element with a class of header:
.header {
background-color: #f0f0f0;
padding: 20px;
}
In this example:
- .header is the selector (targeting elements with the class header).
- background-color and padding are properties.
- #f0f0f0 and 20px are values.
CSS Selectors
CSS selectors are used to target specific HTML elements. Here are some basic selectors:
- Element selector: Targets elements by their name (e.g., p, h1, etc.).
- Class selector: Targets elements by their class attribute (e.g., .header, .footer, etc.).
- ID selector: Targets elements by their ID attribute (e.g., #header, #footer, etc.).
CSS Properties
CSS properties control the style attributes of HTML elements. Here are some basic properties:
- Color properties: color, background-color, etc.
- Text properties: font-size, font-family, etc.
- Layout properties: width, height, margin, etc.
This is just a brief introduction to CSS. In the next modules, we'll dive deeper into advanced selectors, properties, and techniques to help you master CSS.