🎨 Introduction to CSS

What is CSS?

Welcome to CSS

CSS (Cascading Style Sheets) is the language used to style and layout web pages. It controls how HTML elements look and how they're displayed on screen, paper, or other media.

💻 What is CSS?

CSS stands for Cascading Style Sheets. It's used to:

🔧 CSS Syntax

selector {
    property: value;
    another-property: another-value;
}

/* Example */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

📝 Three Ways to Add CSS

1. Inline CSS

<h1 style="color: blue; font-size: 24px;">Hello World</h1>

Added directly to HTML elements using the style attribute. Not recommended for most cases.

2. Internal CSS

<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        
        p {
            color: gray;
            line-height: 1.6;
        }
    </style>
</head>

CSS rules placed in a <style> tag within the HTML document's <head> section.

3. External CSS (Recommended)

<!-- In HTML file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* In styles.css file */
h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: gray;
    line-height: 1.6;
}

CSS rules in a separate .css file, linked with <link> tag. Best practice for maintainability.

🎯 Basic Example

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #333;
            text-align: center;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }
        
        p {
            color: #666;
            line-height: 1.8;
            max-width: 600px;
            margin: 20px auto;
        }
        
        .highlight {
            background-color: yellow;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        #main-content {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div id="main-content">
        <h1>Welcome to CSS</h1>
        <p>
            CSS makes web pages <span class="highlight">beautiful</span> 
            and <span class="highlight">professional</span>.
        </p>
    </div>
</body>
</html>

🔍 CSS Cascade & Specificity

The "Cascading" in CSS means styles can come from multiple sources and are applied in a specific order:

Order of Precedence (highest to lowest):

  1. Inline styles: style="color: red;"
  2. IDs: #header { }
  3. Classes, attributes, pseudo-classes: .menu { }
  4. Elements, pseudo-elements: p { }
/* Specificity Examples */

/* Specificity: 1 (element) */
p {
    color: blue;
}

/* Specificity: 10 (class) */
.highlight {
    color: red;
}

/* Specificity: 100 (ID) */
#special {
    color: green;
}

/* Specificity: 1000 (inline) */
<p style="color: yellow;"></p>

/* Override any specificity */
p {
    color: purple !important;  /* Use sparingly! */
}

💡 CSS Comments

/* This is a single-line comment */

/*
   This is a
   multi-line comment
   for longer explanations
*/

h1 {
    color: blue;  /* Inline comment after code */
}

/* 
================================
    Header Styles
================================
*/
header {
    background-color: #333;
}

🎯 Key Takeaways