اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
Full Stack Camp
رفتن به کانال در Telegram
Fullstack Camp | Learn. Build. Launch. Join us for a hands-on journey through HTML, CSS, JavaScript, React, Node.js, Express & MongoDB — all in one place. Use this bot to search for lessons. @FullstackCamp_assistant_bot DM: @Tarikey6
نمایش بیشترکشور مشخص نشده استدسته بندی مشخص نشده است
221
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-27 روز
-330 روز
آرشیو پست ها
🎨 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> <!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is blue text!</p>
</body>
</html> <link rel="stylesheet" href="style.css"> p {
color: green;
} 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; } body {
background-color: lightgray; } p {
font-size: 18px; } p {
font-family: Arial, sans-serif; } h2 {
text-align: center; } div {
width: 300px;
height: 150px;
background-color: yellow; }
p {
border: 2px solid black; } div {
padding: 20px;
margin: 30px; } 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; }
9. Which attribute is used to identify a unique element on a page?
