CSS Notes for Beginners (Easy + Quick Guide) 🎨

🎨 CSS Notes for Beginners (Easy + Quick Guide)

Hello everyone 👋
Welcome back to my blog!

In this post, you will learn CSS (Cascading Style Sheets) in a very simple and easy way. These notes are perfect for beginners and BCA students who want quick revision 📘

🌐 What is CSS?

CSS stands for Cascading Style Sheets.
It is used to style and design web pages written in HTML.

👉 CSS makes your website look beautiful and attractive.

🧩 Types of CSS

1. Inline CSS

Used inside HTML tags

<h1 style="color:red;">Hello</h1>

2. Internal CSS

Used inside <style> tag

<style>
h1 { color: blue; }
</style>

3. External CSS

Used in separate file

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

⚙️ CSS Syntax

selector {
  property: value;
}

Example:

p {
  color: red;
  font-size: 16px;
}

🎨 Colors in CSS

  • color: red;
  • color: #ff5733;
  • color: rgb(0, 128, 255);
  • color: hsl(120, 100%, 50%);

🖼️ Background

background-color: lightblue;
background-image: url("img.jpg");
background-repeat: no-repeat;
background-size: cover;

🔤 Text Styling

color: blue;
text-align: center;
font-size: 18px;
font-weight: bold;

📦 Box Model

CSS box model includes:

  • Margin (outer space)
  • Border
  • Padding (inner space)
  • Content

🔲 Flexbox (Basics)

display: flex;
justify-content: center;
align-items: center;
gap: 10px;

🎯 Selectors

  • Element → p {}
  • Class → .class {}
  • ID → #id {}
  • Universal → * {}

📏 Units

  • px (pixels)
  • % (percentage)
  • em (relative)
  • rem (root relative)
  • vw / vh (viewport)

⭐ Important Tip

Practice is the key!
The more you code, the better you become 💻

📌 Conclusion

These were quick and easy CSS notes for beginners.
Save this post and revise daily to improve your coding skills 🚀

👉 Follow for more coding notes on HTML, CSS, JavaScript, and more!


Comments

Post a Comment

Popular posts from this blog

Build a Simple Calculator using HTML, CSS & JavaScript (Beginner Project)

Image
⚡ Build a Simple Calculator using HTML, CSS & JavaScript (Beginner Project) Hello everyone 👋 Welcome back! In this project, we will build a simple calculator using HTML, CSS, and JavaScript. This is perfect for beginners to understand logic and DOM manipulation 💻 --- 🌟 What You Will Learn - HTML structure - CSS styling - JavaScript logic - Event handling --- 🧱 Step 1: HTML Code <!DOCTYPE html> <html> <head>     <title>Calculator</title> </head> <body> <div class="calculator">     <input type="text" id="result" disabled>     <button onclick="clearResult()">C</button>     <button onclick="deleteLast()">DEL</button>     <button onclick="appendValue('/')">/</button>     <button onclick="appendValue('7')">7</button>     <button onclick="appendValue('8')">8</button>    ...
Read more

Top 10 Python Programs for Beginners (Easy + Practical Guide)

Image
 Top 10 Python Programs for Beginners (Easy + Practical Guide) Hello everyone 👋 Welcome back! Want to practice Python with real examples? These easy Python programs will help beginners understand coding step by step 💻 --- 🌟 Why Practice Programs? - Improves logic 🧠 - Helps in exams 📘 - Builds coding confidence 💻 --- 🔟 Top 10 Python Programs 1. Hello World print("Hello World") --- 2. Even or Odd num = int(input("Enter number: ")) if num % 2 == 0:     print("Even") else:     print("Odd") --- 3. Sum of Two Numbers a = int(input()) b = int(input()) print("Sum =", a + b) --- 4. Factorial num = 5 fact = 1 for i in range(1, num+1):     fact *= i print("Factorial =", fact) --- 5. Prime Number num = 7 for i in range(2, num):     if num % i == 0:         print("Not Prime")         break else:     print("Prime") --- 6. Multiplication Table num = 5 for i in range(1, 11):     print(num, "x...
Read more

JavaScript Notes for Beginners (Simple + Easy Guide) ⚡

Image
⚡ JavaScript Notes for Beginners (Simple + Easy Guide) Hello everyone 👋 Welcome back to my blog! In this post, you will learn JavaScript in a simple and easy way. These notes are perfect for beginners and BCA students for quick revision 📘 --- 🌐 What is JavaScript? JavaScript is a programming language used to make web pages interactive. 👉 It works with HTML and CSS to create dynamic websites. --- 🔢 Variables in JavaScript Variables are used to store data. let name = "Luna"; const age = 20; var city = "Delhi"; --- 📦 Data Types - String → "Hello" - Number → 10 - Boolean → true / false - Array → [1, 2, 3] - Object → {name: "Luna"} --- 🔁 Operators - Arithmetic → + - * / - Comparison → == === != - Logical → && || ! --- 🔄 Conditions let age = 18; if (age >= 18) {   console.log("Adult"); } else {   console.log("Minor"); } --- 🔁 Loops For Loop for (let i = 0; i < 5; i++) {   console.log(i); } While Loop let i = 0...
Read more