Introduction to CSS

by

CSS (Cascading Style Sheets) is a language used to style and format HTML documents. It controls the colors, fonts, layouts, spacing, and animations of web pages.

Before CSS, web pages were plain and only structured with HTML. CSS helps make them attractive, user-friendly, and responsive.

1. Example: Without CSS vs. With CSS

Without CSS (Only HTML)

<p>This is a simple paragraph.</p>
HTML

Output:

This is a simple paragraph.

With CSS

<p style="color: blue; font-size: 20px; font-weight: bold;">This is a styled paragraph.</p>
HTML

Output:

This is a styled paragraph.

2. Why CSS is Important

CSS plays a crucial role in modern web design. Here’s why:

  • Makes Web Pages Beautiful – Controls colors, fonts, and animations.
  • Separates Design from Content – HTML handles structure, CSS handles styling.
  • Improves Page Speed – Reduces the need for multiple HTML styles.
  • Enables Responsive Design – Adapts web pages to different screen sizes.
  • Easier Maintenance – One CSS file can style multiple pages.

3. CSS Syntax (How CSS Works?)

CSS works by selecting an HTML element and applying styles to it using properties and values.

Basic CSS Rule

selector {
    property: value;
}
CSS

Example

p {
    color: red;
    font-size: 18px;
    text-align: center;
}
CSS

Explanation:

  • p → Selects all <p> (paragraph) elements.
  • color: red; → Changes text color to red.
  • font-size: 18px; → Makes text size 18 pixels.
  • text-align: center; → Centers the text.

4. Ways to Apply CSS

There are three main ways to add CSS to HTML.

a. Inline CSS (Directly Inside an HTML Tag)

  • Styles only one specific element.
  • Not recommended for large projects.
<p style="color: blue;">This text is blue.</p>
HTML

b. Internal CSS (Inside <style> Tag in HTML File)

  • Used for styling a single page.
<head>
    <style>
        p {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
HTML

c. External CSS (Separate CSS File Linked to HTML)

  • Best for large projects (keeps design separate from content).

Example:

HTML File (index.html)

<head>
    <link rel="stylesheet" href="styles.css">
</head>
HTML

External CSS File (styles.css)

p {
    color: purple;
    font-size: 22px;
}
HTML

Now, all <p> elements in the website will be purple and 22px in size.

5. CSS Features and Use Cases

a. Key Features of CSS

  • Selectors – Target specific elements (p, .class, #id).
  • Box Model – Controls spacing, padding, margins, and borders.
  • Layouts – Uses Flexbox and Grid for positioning content.
  • Animations & Transitions – Adds smooth visual effects.
  • Responsive Design – Adapts websites for different screens using @media.

b. Common Uses of CSS

  • Website Design – Makes web pages visually appealing.
  • Animations – Creates hover effects, transitions, and keyframe animations.
  • Web Theming – Implements dark mode, custom UI styles.
  • Mobile-Friendly Pages – Adapts layouts for different devices.
  • Printing Styles – Optimizes pages for print using @media print.

6. Key Advantages and Disadvantages of CSS

a. Advantages of CSS

  • Easy to Use & Learn – Simple syntax for beginners.
  • Saves Time – One CSS file styles multiple pages.
  • Faster Web Pages – Reduces redundant HTML styling.
  • Better User Experience – Enables animations, transitions, and dynamic layouts.
  • Cross-Browser Compatibility – Works on Chrome, Firefox, Safari, etc.

b. Disadvantages of CSS

  • Cross-Browser Issues – Some styles look different in different browsers.
  • Complexity in Large Projects – Managing many CSS files can be difficult.
  • Security Risks – CSS can be modified in the browser, affecting website appearance.
  • No Built-in Logic – Cannot perform calculations or conditional styling without JavaScript.

Conclusion

CSS is an essential tool for web development. It makes websites visually appealing, improves usability, and ensures they work on different devices.