Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a language used to style and design web pages. While HTML is responsible for creating the structure of a webpage, CSS controls how that structure looks on the screen.

For example:

• HTML decides what content appears (heading, paragraph, image)
• CSS decides how that content appears (color, size, spacing, layout)

Without CSS, every website would look like plain black text on a white background. CSS is what makes websites attractive, readable, and user-friendly.

Why CSS is Important

CSS plays a critical role in modern web development. It is important because:

• Improves visual appearance: CSS allows you to add colors, fonts, spacing, and layouts that make websites visually appealing.
• Saves time and effort: You can write CSS once and apply it to multiple pages. This avoids repeating the same styles again and again.
• Supports responsive design: CSS helps websites adjust automatically to mobile phones, tablets, and desktops.
• Improves user experience: A well-styled website is easier to read, navigate, and interact with.
• Makes maintenance easy: When design changes are required, you can update one CSS file instead of editing every HTML page.

Without CSS, large websites would be very difficult to manage.

CSS vs HTML

HTML and CSS work together but serve different purposes.

HTML (Structure):

<h1>Welcome to VINAR TECH</h1>
<p>Learn web development step by step.</p>

CSS (Design):

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

p {
  color: #333;
  line-height: 1.6;
}

How CSS Works

CSS works by selecting HTML elements and applying style rules to them.

A basic CSS rule looks like this:

selector {
  property: value;
}

Example:

p {
  color: red;
}

Explanation:

• p → selector (targets all paragraph tags)
• color → property
• red → value

When a browser loads a webpage:

1. It reads the HTML
2. It reads the CSS
3. It applies the CSS rules to matching HTML elements
4. It displays the final styled page

If multiple CSS rules target the same element, the browser follows priority rules. This system is called cascading, which is where CSS gets its name.

What Does “Cascading” Mean?

“Cascading” means that CSS follows a priority order when applying styles.

Priority depends on:

• Selector specificity
• Order of rules
• Importance (!important)

Example:

p {
  color: blue;
}

p {
  color: green;
}

The paragraph will be green because the second rule overrides the first one.

Understanding cascading is very important and will be covered in detail in later chapters.

CSS Versions Overview

CSS has evolved over time:

• CSS1: Basic styling like fonts, colors, and text alignment.
• CSS2: Introduced positioning, z-index, and better layout control.
• CSS3: Added modern features like:
  • Animations
  • Transitions
  • Flexbox
  • Grid
  • Media queries

Today, when developers say “CSS”, they usually mean modern CSS (CSS3 and beyond).

Real-World Example

This is why CSS is essential for professional websites.

Common Mistakes Beginners Make

• Writing all styles inside HTML tags
• Overusing inline CSS
• Not using classes properly
• Ignoring mobile responsiveness
• Copy-pasting CSS without understanding it

Avoiding these mistakes early will make you a better developer.

Best Practices

• Keep CSS in separate files
• Use clear and meaningful class names
• Write readable and organized CSS
• Avoid unnecessary duplication
• Test designs on different screen sizes