Embedded Files
Module 2
2.2 CSS fundamentals
This module introduces the fundamental concepts of CSS, including syntax, color properties, inheritance, and best practices. By the end of this module, you will have a strong foundation to style web pages effectively.
CSS Syntax and Rules
A basic CSS rule consists of:
selector {
property: value;
}
Example :
p {
color: blue;
font-size: 16px;
}
Here, p is the selector, color and font-size are properties, and blue and 16px are their respective values.
🎨 CSS Color Tutorial for Beginners
🎨 CSS Color Tutorial for Beginners
CSS colors make websites beautiful and fun! Let’s dive into different ways you can add color and see how they work.
1️⃣ Named Colors (Easy & Readable)
1️⃣ Named Colors (Easy & Readable)
Named colors are simple and easy to remember.
🔹 Example:
🔸 What It Does: The text will turn red!
🌟 Fun Fact: There are 140+ named colors in CSS (like blue, green, yellow, etc.).
Try it Yourself!
Try it Yourself!
Change the color of the text on a webpage using any named color you like.
2️⃣ Hexadecimal Colors (#RRGGBB)
2️⃣ Hexadecimal Colors (#RRGGBB)
Hex colors are a bit like secret codes! They start with a #, followed by 6 digits/letters.
🔹 Example:
🔸 What It Does: This changes the text color to orange!
🔹 Hex Color Breakdown:
# is the start.
The first two digits ff represent Red.
The second two digits 57 represent Green.
The last two 33 represent Blue.
Try it Yourself!
Try it Yourself!
Choose your favorite color and find its hex code online. Then, use it in your CSS!
Background-color Property
Background-color Property
The background-color property sets the background color of an element. This affects the area behind the content of the element (like the space around the text).
Syntax:
Like the color property, you can use a color name, HEX, RGB, or HSL for background-color.
Examples:
3️⃣ RGB Colors (rgb(red, green, blue))
3️⃣ RGB Colors (rgb(red, green, blue))
RGB means Red, Green, Blue. You pick numbers between 0 and 255 for each color.
🔹 Example:
🔸 What It Does: This makes the text red!
🔹 How It Works:
255 is the max value for red.
0 means no green or no blue.
Try it Yourself!
Try it Yourself!
Create your own color by mixing Red, Green, and Blue values between 0 and 255.
4️⃣ RGBA Colors (rgba(red, green, blue, alpha))
RGBA is like RGB, but with a cool twist – it adds transparency! The last number (alpha) goes from 0 (transparent) to 1 (solid).
Example:
🔸 What It Does: The background becomes blue with 50% transparency.
Try it yourself!
Try it yourself!
Add transparency to any color by changing the last value from 0 (fully transparent) to 1 (fully visible).
5️⃣ HSL Colors (hsl(hue, saturation, lightness))
5️⃣ HSL Colors (hsl(hue, saturation, lightness))
HSL stands for Hue, Saturation, and Lightness. It's more intuitive than RGB!
Example:
🔸 What It Does: It makes the text green.
🔹 How It Works:
Hue (0-360°) represents the color. (0 = Red, 120 = Green, 240 = Blue).
Saturation (0-100%) adjusts how intense the color is.
Lightness (0-100%) adjusts how light or dark the color is.
Try it yourself!
Try it yourself!
Make your own custom color by changing the hue, saturation, and lightness.
For a better understanding, watch the video below:👇
Why Semicolons Matter
Why Semicolons Matter
Each property must be followed by a semicolon, except the last one (optional but best practice).
Example:
INHERITANCE :
1️⃣ What is Inheritance?
1️⃣ What is Inheritance?
When a parent element has a style, child elements often inherit that style.
Example:
In this case, the h1 will inherit the font-family from body, but will use its own color (blue).
2️⃣ Which Properties are Inherited?
2️⃣ Which Properties are Inherited?
Inherited properties include things like:
color
font-family
font-size
line-height
Properties like margin or padding do not inherit by default.
3️⃣ Interactive Challenge
3️⃣ Interactive Challenge
Try it: Set a background color on the body, and see how all child elements inherit it.
🎯 Interactive Challenge:
🎯 Interactive Challenge:
Now, let’s put everything together! Create a simple webpage with a heading, paragraph, and background. Try using named colors, hex, RGB, and HSL in your CSS!
👏 Great Job!
Page updated
Google Sites
Report abuse