🎨 Meet CSS: The Artist Behind Every Beautiful Website

Ishika April 06, 2025

🎨 CSS Explained Notes for Freshers 



📘 What is CSS?

CSS (Cascading Style Sheets) is a language used to style HTML elements. With CSS, we can change colors, fonts, sizes, layouts, spacing, and even add animations to a webpage.

🧾 Why Use CSS?

  • To make websites look beautiful and modern 🎨
  • To separate content (HTML) from design (CSS)
  • To save time using one stylesheet for many pages
  • To create responsive, interactive layouts

📂 Types of CSS

  • Inline CSS – Style written inside an HTML tag
  • Internal CSS – Style inside a <style> tag in the HTML <head>
  • External CSS – Style written in a separate `.css` file and linked to HTML

✅ Example: Inline CSS

This text is red using inline CSS.

<p style="color: red;">This text is red.</p>

🔧 CSS Syntax

CSS uses a simple syntax: selector { property: value; }

h1 {
  color: blue;
  font-size: 30px;
}

This means all <h1> elements will appear blue and have a font size of 30px.

🏷️ CSS Selectors

Selectors help target HTML elements for styling.

  • * → Selects all elements
  • p → All <p> elements
  • .className → Elements with a class
  • #idName → A specific element with an ID

🎨 CSS Properties

Common properties to style elements:

  • color – Text color
  • background-color – Background color
  • font-size – Size of the text
  • font-family – Font style (Arial, Verdana, etc.)
  • margin – Space outside the box
  • padding – Space inside the box
  • border – Border around an element
  • text-align – Aligns text (left, center, right)

📦 Box Model

Everything in CSS is a box! The box model includes:

  • Content – Text or image inside
  • Padding – Space around the content
  • Border – Surrounds the padding
  • Margin – Space outside the border
This is a styled box using border, padding, and margin.

🎯 Example with Multiple Properties

Styled with color, font, and alignment!

🌈 CSS Colors

  • color: red; (Named color)
  • color: #ff0000; (Hex value)
  • color: rgb(255, 0, 0); (RGB value)
  • color: rgba(255, 0, 0, 0.5); (RGB + transparency)

🖱️ Pseudo-classes

Special states like hover, visited, focus, etc.

a:hover {
  color: red;
}

📱 Responsive Design (Media Queries)

Used to style based on screen size.

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

💡 Quick Tips

  • Always test your styles in a browser
  • Use developer tools (Right-click → Inspect)
  • Write clean and organized CSS
  • Use comments like /* this is a comment */ for clarity

✅ Practice Task

Create a paragraph with:

  • Text color: Blue
  • Font size: 20px
  • Center aligned

I am a styled paragraph! 🎉

🔚 Conclusion

  • CSS is simple and powerful 💪
  • Start with small examples
  • Practice styling buttons, text, images, and layouts





Ishika

Posted by Ishika

Post a Comment

0 Comments