Full Stack Camp

🎨 Week 2 Day 1: Introduction to CSS (Cascading Style Sheets)

💡 Topic:
What is CSS? Why It Matters, How It Works. 
🎯 Goal:
➡️Understand the basics of CSS, 
➡️how to apply styles to HTML,
➡️ and try your first styles. 

🌍 Welcome Back to Fullstack Summer Camp!
You survived HTML week — now let’s make those plain web pages look awesome using CSS! 

Imagine HTML as building a house: walls, rooms, and windows. CSS is painting, decorating, adding curtains, choosing colors, shapes, and sizes. 

✅ 1️⃣ What is CSS? 

CSS stands for  Cascading Style Sheets. 
It’s a language that tells the browser how things should look on a web page. > 
HTML = Structure > 
CSS = Style / Design
Example:

<p>This is a paragraph.</p>

Without CSS → Looks plain.
With CSS → You can change:
➤Color
➤Font
➤Size
➤Spacing
➤Borders
➤Background

✅ 2️⃣ How to Add CSS to HTML
There are 3 main ways:
a) Inline CSS (inside an HTML tag)

<p style="color: red;">Hello!</p>

👉 Used for very small, one-time changes. Not recommended for full websites.

b) Internal CSS (inside <style> in the HTML file)

<!DOCTYPE html> <html> <head> <style> p { color: blue; font-size: 20px; } </style> </head> <body> <p>This is blue text!</p> </body> </html>

👉 Good for small projects. Easy for practice.
c) External CSS (linked as a separate file)
HTML file:

<link rel="stylesheet" href="style.css">

style.css file:

p { color: green; }

👉 Best practice for real websites. Keeps things organized!

✅ 3️⃣ CSS Selectors: How CSS Targets HTML
Basic Rule Format:

selector { 
        property: value; 
}

Selector → Which element (like p, h1, or a class)
Property → What to change (like color, size)
Value → How you want it (red, 20px)

We can:
➤select by type/element:
P, h1, h3, img , span ....

p {
color: blue;}

➤select by class
We use " . "before the name of the class.
Html➺

<p class="highlight">Don't forget this</p>

css➺

.highlight {
background-color:yellow;}

➤select by ID
We use "#" before ID name

Html➺

<button id="main">click</button>

css➺

#main {
background-color: green;}

➤you can also target elements that are inside (nested)
➺Html

<div>
<h2>Menu Today</h2>
<p>We have coffee and tea.</p>
</div>
<h2>Thank You</h2>

➺Css

div h2 {
color: orange;
}

✅ 4️⃣ Common Properties with Examples
1. Color

h1 { color: purple; }

2. Background Color

body { background-color: lightgray; }

3. Font Size

p { font-size: 18px; }

4. Font Family

p { font-family: Arial, sans-serif; }

5. Text Align

h2 { text-align: center; }

6. Width and Height

div { width: 300px; height: 150px; background-color: yellow; }

7. Border

p { border: 2px solid black; }

8. Padding (space inside element) and Margin(space outside element)

div { padding: 20px; margin: 30px; }

9. border-radius:
Rounds corners

img {
border-radius: 10px; }

10. box-shadow:
Adds shadow around boxes

div {
box-shadow: 2px 2px 8px gray; }

11. opacity:
Makes things transparent

img {
opacity: 0.8; }

12. cursor:
Changes mouse cursor

button {
cursor: pointer; }

13. text-decoration: (underline)

a {
text-decoration: none; }

14. display:
Controls layout

div {
display : block; }
span {
display: inline; }

15.position:
Controls exact placement

div {
    position: absolute;
    top: 10px;
    left: 20px; }

✅ 5️⃣ Combining Multiple Properties

p { color: white; background-color: black; font-size: 20px; text-align: justify; }

✅ 6️⃣ Real Life Analogy
Think of CSS as designing your injera restaurant menu:
The structure is the menu paper (HTML)
The font color, layout, and sizes are CSS.
When someone looks at it, they notice the style first!

✅ 7⃣ Summary
✔️ CSS = Design and Style
✔️ 3 Ways to add CSS (Inline, Internal, External)
✔️ Use selectors + properties
✔️ Common styles: color, background, font-size, width, border

#Week2 #Day1 #Css #introductionCss #lesson

83 viewsedited 15:14

68 views15:15

Assignment:
Adding css➤
https://youtu.be/uzF1Doc3cZQ?si=wpeZYkJgrjEoiLMI
Fonts
➤https://youtu.be/MnyCbILmtOY?si=SJc39ucr29EYGwyr
Colors
➤https://youtu.be/LwbKb2J8iy8?si=dS_qmuBZF5Y7i596
Borders
➤https://youtu.be/pkNdQ7TmxIw?si=EyfEaWAV8fiqW_5d
Margin
➤https://youtu.be/rBWA_t-KnKk?si=0v65S6nUwXrmhF6V
Display
➤https://youtu.be/9T8uxp5hQ60?si=bXQ_P7Z55Yodre9Y

#Week2 #Day1 #Css #introductionCss #resources

YouTube

Get started with CSS in 8 minutes! 🎨

#CSS #tutorial #course

CSS tutorial example explained inline internal external

00:00:00 introduction
00:00:26 inline
00:01:46 internal
00:03:05 external
00:04:27 id
00:05:26 class
00:06:29 linking more than 1 document
00:07:40 conclusion

74 viewsedited 15:15

Full Stack Camp

💪 Week 2 Day 1 Challenges: Css

Today’s task isn’t about writing a new HTML page —
Instead, we’ll go back to all the HTML files we already created (restaurant page, bookstore, scholarship form, cover page...) and add CSS styles using what we learned so far!
✅ What to do:
1️⃣ Open all your old HTML pages.
2️⃣ Apply as many CSS styles as possible:
➺Colors
➺Font sizes
➺Borders
➺Backgrounds
➺Padding and margins
➺Div layout and positioning
➺Media elements (images/videos) styling
3️⃣ Use external or internal CSS (not inline only!).
4️⃣ Make them clean, readable, and stylish.
✅ Reminder:
Use all methods we learned — even the selectors like:
div p {} or ul li {} or classes and IDs.

🔥 When You Finish:

➤ Share screenshots or code samples in the group.
➤ Invite your friends to join and learn with us.
➤ ✌️Stay well and keep practicing!

#Week2 #Day1 #Css #introductionCss #challenge

82 viewsedited 15:16

About

Blog

Apps

Platform