Lesson 1: Introduction to CSS
CSS (Cascading Style Sheets) is a language used to style HTML documents.
It controls the layout, colors, fonts, and overall presentation of web pages.
A CSS file ends with .css and can be imported in the <head> tag with the following code:
<link rel="stylesheet" href="RELATIVE PATH TO YOUR FILE e.g. ./style.css"> <!-- ./ means the folder the html file is in! -->Example:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
Explanation:
- body: This is a selector that targets the <body> element.
- font-family: Arial, sans-serif;: This property sets the font for the entire page to Arial.
- background-color: #f0f0f0;: This property sets the background color of the page to a light gray.
Lesson 2: CSS Syntax
CSS syntax consists of a selector and a declaration block.
Example:
selector {
property: value;
}
Explanation:
- selector: Targets the HTML element to be styled.
- property: A CSS property (e.g., color).
- value: The value assigned to the property (e.g., red).
Lesson 3: Selectors
Selectors are used to target HTML elements.
Common Selectors:
- element: Selects all elements of a specific type (e.g., p for <p> tag).
- #id: Selects an element with a specific id (e.g., #header for an element with the id attribute
with the value "header"). - .class: Selects all elements with a specific class (e.g., .container for an element with the class attribute
with that includes container).
Example:
p {
color: blue;
}
#header {
background-color: #333;
color: white;
}
.container {
padding: 20px;
}
Lesson 5: Box Model
The CSS box model is used to design and layout elements.
Components:
- margin: Space outside the border.
- border: Border around the padding and content.
- padding: Space inside the border.
Example:
div {
width: 300px;
padding: 20px;
border: 10px solid #000;
margin: 30px;
}
Lesson 6: Text Styling
CSS provides properties to style text.
Example:
h1 {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
color: #333333;
text-align: center;
text-decoration: underline;
}
Explanation:
- h1 : Styles all <h1> elements.
- font-family: 'Arial', sans-serif : Sets the font to Arial and if it doesn't
exist it uses sans-serif (which always exist because it's as standard). - font-size: 24px : Sets the font size (aka. text size) to 24 pixels.
- font-weight: bold : Makes the text bold (aka. thic).
- color: #333333 : Sets the text color to #333333 (darkgray).
- text-align: center : Moves the text on the horizontal axis in the center.
- text-decoration: underline : Makes a line under the text.
Congrats!
Now you understand the important foundamentals for styling websites!