CSS Basics
Section 1: CSS Basics
Lesson 1: CSS Selectors
CSS selectors are patterns used to select and style HTML elements. This lesson covers various types of selectors, including element selectors, class selectors, and ID selectors, along with combinators for more specific targeting.
1.1 Understanding Element Selectors
Element selectors target HTML elements directly. For example, to style all paragraphs:
p {
color: blue;
}
1.2 Class Selectors
Class selectors begin with a dot (.) and are used to style elements with a specific class attribute.
.button {
background-color: #3498db;
color: white;
}
1.3 ID Selectors
ID selectors start with a hash (#) and style a single element with a specific ID.
#header {
font-size: 24px;
}
1.4 Combinators
Combinators are used to select elements based on their relationship to other elements. Common combinators include:
Descendant (space): Targets elements inside another element.
div p {
font-style: italic;
}
Child (>): Selects direct children of an element.
ul > li {
list-style-type: square;
}
Adjacent Sibling (+): Styles an element that is immediately preceded by a specified element.
h2 + p {
margin-top: 10px;
}
General Sibling (~): Styles elements that share the same parent and appear after the specified element.
h3 ~ p {
color: #555;
}
Lesson 2: CSS Properties
CSS properties define how elements should be styled. This lesson covers common properties and introduces the box model for understanding layout.
2.1 Common CSS Properties
Examples of common CSS properties include:
color: Sets the text color.
font-size: Adjusts the font size.
margin: Controls the outside spacing.
padding: Manages the inside spacing.
2.2 Box Model
The box model consists of the content area, padding, border, and margin. Understanding these properties is essential for precise layout control.
.box {
width: 200px;
height: 100px;
margin: 10px;
padding: 15px;
border: 1px solid #ccc;
}
Lesson 3: CSS Colors and Backgrounds
This lesson explores color specifications in CSS, including names, hexadecimal, and RGB values. Additionally, it covers setting background colors and images.
3.1 Specifying Colors in CSS
Color Names:
p {
color: red;
}
Hexadecimal:
h1 {
color: #4caf50;
}
RGB:
.bg-color {
background-color: rgb(255, 0, 0);
}
3.2 Adding Background Colors and Images
Background colors and images can be applied to enhance the visual appeal of elements.
.header {
background-color: #333;
color: white;
}
.section {
background-image: url('background.jpg');
background-size: cover;
}
Mastering CSS selectors, properties, and color techniques is foundational for effective web styling. In the upcoming sections, we'll delve into advanced CSS topics and responsive design principles.