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

Full Stack Camp

📚 Week 2 Day 2: CSS Intermediate — Layout, Selectors, and Rules

🎯 Topics for Today:
1️⃣ Pseudo Classes and Elements
2️⃣ Sibling Combinators: ., >, +, ~
3️⃣ Box Model Deep Dive
4️⃣ Margin, Border, Padding — Full Control
5️⃣ CSS Conflicts: Cascading, Source, Specificity, Inheritance

✅ 1️⃣ Pseudo Classes and Elements
➤ What Are They?
They target specific states or parts of elements.
✨ Pseudo Classes Examples:
➡️ :hover
→ When mouse is over.
➝Imagine a button in an app , when you hover your mouse over it , the color changes.

button:hover { background-color: yellow; }

➡️ :focus → When an input is active/selected.

input:focus { 
        border-color: blue; }

➡️ :first-child → First element inside parent.

ul li:first-child { color: red; }

➡️ :nth-child(2) → Second child.

p:nth-child(2) { font-weight: bold; }

✨ Pseudo Elements Examples:
➝they are used when you want to add decoration with out changing the html

➡️ ::before

p::before {
      content: "👉 "; }

➡️ ::after

p::after { content: " ✅"; }

➡️ ::first-letter

p::first-letter { font-size: 30px; }

✅ 2️⃣ Sibling Combinators in CSS
➤ Why Use Them?
To style elements based on their position relative to others. This helps you control exactly where and when styles apply.

✔️ Examples:
➡️ .class1 .class2 {} — Any .class2 inside .class1.

div p { 
     color: green; }

➡️ > (Child Selector)

div > p { color: blue; }

Only selects direct children, not grand children 😁

➡️ + (Adjacent Sibling Selector)

h1 + p { color: orange; }

Selects the very next <p> after <h1>.

➡️ ~ (General Sibling Selector)

h1 ~ p { color: purple; }

Selects all following siblings.

✅ 3️⃣ Box Model Deep Dive

All HTML elements have:
➝Content = what's written/shown
→ Padding = space inside box , around content
→ Border = the edge of the box
→ Margin = space outside the box , around other boxes
➤ Display Types
✔️ display: block;
✔️ display: inline;
✔️ display: inline-block;
✅ Example:

span { display: block; }

➤ Box Sizing
✔️ box-sizing: content-box; (default , width doesn't include padding or border)
✔️ box-sizing: border-box; (includes padding + border)
✅ Example:

div { width: 200px; padding: 20px; box-sizing: border-box; }

✅ 4️⃣ Margin, Border, Padding — Sides
You can control:
margin-top
margin-bottom
margin-left
margin-right
✅ Example:

div { 
    margin-top: 20px;
    margin-right: 10px;
    border: 2px solid black;
    padding: 15px; }

Or shorthand:

margin: 20px 10px 15px 5px; /* Top, Right, Bottom, Left */

✅ 5️⃣ CSS Conflicts: Cascading, Source, Specificity, Inheritance

When two styles target the same thing, which one wins?

➤ Cascading Order
Inline styles (strongest)
Internal CSS (in <style> tags)
External CSS (weakest)

➤ Specificity
More specific selectors override simpler ones.
3⃣type selectors(p, img, div)==weak
2⃣class selectors(.highleight, .topic)==stronger
1⃣ID selectors (#main, #sec)==Strongest

➤ Source Order
The last rule in the CSS file usually wins if specificity is equal.
➤ Inheritance
Some properties like color, font-family, line-height inherit from parent.
But layout properties like margin, padding , border don’t.

✅ 6️⃣ Quick Summary Checklist
✔️ Pseudo Classes = :hover, :first-child, :nth-child()
✔️ Pseudo Elements = ::before, ::after
✔️ Sibling Selectors = >, +, ~
✔️ Box Model = Padding, Border, Margin
✔️ CSS Conflicts = Understand specificity, cascade, inheritance

#Week2 #Day2 #Css #CssLayout #lesson

72 viewsedited 06:48

Full Stack Camp

Assignment :
➤pseudo classes
https://youtu.be/Nrsy_2ogRfQ?si=dKtM_vb_cLt_JM8Q
➤pseudo elements
https://youtu.be/_LxYNxeWpBo?si=KlUEPdiRLDa0jpoY
➤nav-bar
https://youtu.be/f3uCSh6LIY0?si=44Yh4TVl8IB19ybn

#Week2 #Day2 #Css #CssLayout #resources

YouTube

Learn CSS pseudo-classes in 7 minutes! ☟

#css #course #tutorial

CSS pseudo classes hover link active tutorial example explained

75 viewsedited 06:49

Full Stack Camp

🎨Week 2 Day 2 Challenges:

💻 Today’s CSS Styling Challenge!
From all the HTML projects we did before —
✅ Cover Page
✅ Restaurant Website
✅ Bookstore Catalog
✅ Scholarship Application Form

👉 Now it’s time to make them look beautiful using today’s CSS lessons!
🔧 What to Include:

✨ 🎯 Style all lists and menus → Add background colors, borders, padding, spacing!

✨ 🎯 Use Flexbox to arrange sections → Menus, book items, form fields neatly side by side or centered.

✨ 🎯 Add borders, margins, and boxes → Around each important section (like menus, profile pictures, buttons).

✨ 🎯 Apply hover effects → Change button colors, link styles when someone moves their mouse over them.

✨ 🎯 Use pseudo-elements like ::before and ::after for decoration!

✨ 🎯 Try sibling combinators → Arrange things depending on position (like styling every <p> after <h1>).

✨ 🎯 Control the box model → Use margin, padding, width, and height smartly.

🌟 💡 Bonus Reminder: Use even the tags or methods we might have forgotten to mention before.
👉 Be creative — mix colors, shapes, and layouts!
📸 ✅ When You’re Done:
➤ Share screenshots or the code in the group!
➤ Invite your friends to join Fullstack Summer Camp 💻🔥
➤✌️ Stay well, enjoy your styling, and see you tomorrow! ✨

#Week2 #Day2 #Css #CssLayout #challenge

85 viewsedited 06:50

Full Stack Camp

📚 WEEK 2 DAY 3: CSS DEEP STYLING

🎨 Topic: Backgrounds, CSS Units, Replaced Elements

============================================

✅ 1️⃣ BACKGROUND PROPERTIES IN CSS

👉 Why background matters: It sets the mood and layout of your web page.
Think of it like painting your restaurant walls, putting posters up, or setting up banners.

------------------------------------------
🔸 1.1 background-image:
Adds an image as a background.
Example:

body {
background-image: url("coffee.jpg");
}

🔸 1.2 background-repeat:
Controls if and how the image repeats.

Options: repeat, no-repeat, repeat-x, repeat-y.
Example:

div {
background-image: url("pattern.png");
background-repeat: no-repeat;
}

🔸 1.3 background-size:
Controls image size in the background.

Options:
- auto
- cover (fills the whole area)
- contain (makes sure the full image shows)

Example:

div {
background-image: url("sunset.jpg");
background-size: cover;
}

🔸 1.4 background-position:
Where the background starts from.
Example:

div {
background-position: center center;
}

🔸 1.5 background-attachment:
Controls scrolling behavior.

- scroll (default)
- fixed (image stays while content scrolls)
Example:

body {
background-image: url("forest.jpg");
background-attachment: fixed;
}

🔸 1.6 background-gradient:
Uses two or more colors as background without images.
Examples:

div {
background: linear-gradient(to right, red, blue);
}

div {
background: radial-gradient(circle, yellow, green, blue);
}

=====================================

✅ 2️⃣ CSS UNITS + MEASUREMENTS

Units help make things the right size.

🔸 2.1 px: Pixels
- Fixed unit. Small screens might look too big/small. It is not responsive.
Example:

p {
font-size: 16px;
}

🔸 2.2 em: Relative to parent element
Example:

div {
font-size: 1.5em;
}

🔸 2.3 rem: Relative to root element
- Keeps sizes consistent across page.
Example:

body {
font-size: 16px;
}

h1 {
font-size: 2rem;
}

🔸 2.4 % (Percentage)
Width or height relative to parent.
Example:

div {
width: 50%;
}

🔸 2.5 vh & vw (Viewport height/width)

- 1vh = 1% of viewport height.
- 1vw = 1% of viewport width.
Example:

section {
height: 100vh;
width: 100vw;
}

🔸 2.6 min-width / max-width
Limits size changes.
Example:

img {
max-width: 100%;
min-width: 200px;
}

🔸 2.7 overflow
Controls content that goes outside the box.

Options:
- visible
- hidden
- scroll
- auto
Example:

div {
width: 200px;
height: 200px;
overflow: scroll;
}

🔸 2.8 object-fit
Applies to <img>, <video>, etc.
Options: cover, contain, fill, none.
Example:

img {
width: 100%;
height: 300px;
object-fit: cover;
}

------------------------------------------

🔸 2.9 COLORS (FUNCTIONS + SYSTEMS)

✅ rgb():
color: rgb(255, 0, 0);

✅ rgba(): (With transparency)
color: rgba(255, 0, 0, 0.5);

✅ hsl(): (Hue, Saturation, Lightness)
color: hsl(120, 100%, 50%);

✅ hsla():
color: hsla(120, 100%, 50%, 0.3);

✅ hwb(), lab(), lch():
Advanced color systems for modern browsers. Mostly for professional design systems.

===============================

✅ 3️⃣ REPLACED ELEMENTS: Styling

Replaced elements = Content controlled by the browser but styled by CSS.
Examples:
- <img>
- <video>
- <input>
- <iframe>
- <table>

🔸 3.1 Styling Images

img {
width: 100%;
max-width: 400px;
border: 2px solid black;
border-radius: 15px;
object-fit: cover;
}

🔸 3.2 Styling Videos

video {
max-width: 600px;
border: 4px solid red;
border-radius: 10px;
}

🔸 3.3 Styling Forms (Inputs, Buttons)

input, select, textarea {
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
width: 100%;
}

button {
background: linear-gradient(to right, green, blue);
padding: 15px 30px;
color: white;
border: none;
border-radius: 8px;
}

button:hover {
background: linear-gradient(to right, blue, purple);
}

71 viewsedited 10:06

Full Stack Camp

🔸 3.4 Styling Tables

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

===============================

✅ EXTRA TIPS:

- Combine background properties into one shorthand:
background: url("bg.jpg") no-repeat center/cover fixed;

- Mix units smartly:
- rem for font sizes
- px for borders
- vh/vw for layout

✅ QUICK SUMMARY:

✔️ Background images, gradients, sizes, positions.
✔️ CSS units like px, em, rem, %, vh, vw.
✔️ Overflow and object-fit.
✔️ Advanced color functions (rgb, rgba, hsl, hsla).
✔️ Styling images, forms, media, tables (Replaced Elements).

68 views10:06

Full Stack Camp

Assignment :
➤background-image
https://youtu.be/_oFWg_NlKdo?si=KwFKAy_8T0FaNona
➤overflow
https://youtu.be/d7cH8geV2dY?si=SMddhWXTINpRH0b3
➤position
https://youtu.be/G4AWXOr4W-k?si=feeSgnv8xS8r1uZD

YouTube

How to include a CSS background image 🏙️

#CSS #tutorial #course

CSS background image tutorial example explained

body{
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}

69 views10:06

About

Blog

Apps

Platform