1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall appearance of a web page, allowing you to create visually attractive websites.

2. History and Evolution of CSS

Explanation:

  • CSS Level 1 (CSS1): Introduced in 1996, CSS1 provided basic styling capabilities, such as fonts, colors, and text alignment.
  • CSS Level 2 (CSS2): Released in 1998, CSS2 added support for positioning, media types, and advanced layout features.
  • CSS Level 3 (CSS3): CSS3, with its modular approach, introduced new features such as animations, transitions, and flexible box layouts. It is still evolving with new modules being added.

3. How CSS Works with HTML

CSS works by applying styles to HTML elements based on selectors. These styles can be defined in three ways:

  • Inline CSS: Directly within HTML elements.
  • Internal CSS: Inside the <style> tag in the HTML document’s <head>.
  • External CSS: In separate stylesheet files linked with the <link> tag.

Code Example - Inline CSS: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Welcome to My Website</h1>
    <p style="color: green;">This is a paragraph styled with inline CSS.</p>
</body>
</html>

Code Example - Internal CSS: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <style>
        h1 {
            color: red;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph styled with internal CSS.</p>
</body>
</html>

Code Example - External CSS:

HTML File (index.html):

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph styled with external CSS.</p>
</body>
</html>

CSS File (styles.css):

  h1 {
    color: purple;
}

p {
    font-family: Arial, sans-serif;
}

4. Benefits of Using CSS

  • Separation of Concerns: CSS separates content from design, allowing you to maintain and update styles independently of HTML content.
  • Consistency: Apply consistent styles across multiple pages or the entire website using a single stylesheet.
  • Flexibility: Easily adjust styles for different devices and screen sizes using media queries.
  • Improved Performance: External stylesheets can be cached by browsers, reducing load times for repeat visits.
  • Enhanced User Experience: Provides control over layout, colors, fonts, and other visual aspects to create a more engaging and visually appealing experience.

Code Example - Responsive Design with CSS: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            h1 {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Responsive Design with CSS</h1>
        <p>This layout adapts to different screen sizes.</p>
    </div>
</body>
</html>