Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart

CSS Syntax

Understanding CSS syntax is fundamental to styling web pages effectively. CSS uses a simple yet powerful structure to apply visual styles to HTML elements.

Basic CSS Structure

Every CSS rule consists of three main components:

1. Selector - Identifies which HTML element(s) to style

2. Property - Specifies what aspect to change (color, size, spacing, etc.)

3. Value - Defines how that property should appear

Basic Syntax Pattern

Example

selector {
  property: value;
}

Example:

Example

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

This rule selects all <h1> elements and makes them blue with a font size of 24 pixels.

Complete Working Example

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f5f5f5;
    }
    
    h1 {
      color: #2c3e50;
      text-align: center;
    }
    
    .button {
      background-color: #3498db;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Syntax</h1>
  <button class="button">Click Me</button>
</body>
</html>

---

CSS Selector Types

CSS provides multiple selector types to target different elements precisely.

1. Type Selector (Element Selector)

Targets all elements of a specific HTML tag.

Example

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

h1, h2, h3 {
  font-family: 'Georgia', serif;
}

2. Universal Selector

The * selector applies styles to all elements on the page.

Example

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Use case: Resetting default browser styles for consistent cross-browser appearance.

3. Class Selector

Targets elements with a specific class attribute. Classes are reusable and can be applied to multiple elements.

Example

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

HTML Usage:

Example

<p class="highlight">This text is highlighted</p>
<div class="card">Card content here</div>

4. ID Selector

Targets a single element with a unique ID. IDs should be unique within a page.

Example

#header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

#footer {
  text-align: center;
  margin-top: 40px;
}

HTML Usage:

Example

<div id="header">Website Header</div>
<div id="footer">© 2024 C# Tutorial</div>

Important: Use classes for styling multiple elements, IDs for unique elements.

5. Descendant Selector

Targets elements nested inside other elements (at any level).

Example

article p {
  color: #555;
  font-size: 16px;
}

nav li {
  display: inline-block;
  margin-right: 15px;
}

This selects <p> elements inside <article> and <li> elements inside <nav>.

6. Child Selector

Targets direct children only (not all descendants).

Example

.menu > li {
  font-weight: bold;
}

div > p {
  margin-bottom: 10px;
}

Difference from descendant selector:

  • ✅ div p - selects all <p> elements inside <div> (any level)
  • ✅ div > p - selects only immediate <p> children of <div>

    • 7. Attribute Selector

Targets elements based on attributes or attribute values.

Example

/* Elements with specific attribute */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 8px;
}

/* Attribute starts with value */
a[href^="https"] {
  color: green;
}

/* Attribute ends with value */
img[src$=".png"] {
  border: 2px solid blue;
}

/* Attribute contains value */
[class*="btn"] {
  cursor: pointer;
}

Common Use Cases:

  • ✅ Styling form inputs differently based on type
  • ✅ Targeting external links
  • ✅ Styling images based on file format

---

Combining Selectors

You can combine selectors for more specific targeting:

Multiple Selectors (Grouping)

Apply the same styles to multiple selectors:

Example

h1, h2, h3, h4 {
  font-family: 'Arial', sans-serif;
  color: #2c3e50;
}

Chaining Selectors

Target elements that match multiple criteria:

Example

/* Element with specific class */
p.highlight {
  background: yellow;
}

/* Element with multiple classes */
.btn.btn-primary {
  background-color: blue;
  color: white;
}

---

Multiple Properties

CSS rules can contain multiple properties:

Example

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Best Practice: Organize properties logically:

  1. Display & positioning
  2. Box model (width, padding, margin)
  3. Typography
  4. Visual (colors, borders, shadows)
  5. Other (transitions, transforms)

---

Comments in CSS

Use comments to document your code:

Example

/* Main navigation styles */
.nav {
  display: flex;
  justify-content: space-between;
}

/* TODO: Add responsive breakpoints */

Comment syntax: / comment text /

---

CSS Specificity

When multiple rules target the same element, specificity determines which rule applies:

Specificity hierarchy (lowest to highest):

  1. Type selectors (div, p)
  2. Class selectors (.classname)
  3. ID selectors (#idname)
  4. Inline styles (style attribute)
  5. !important (override everything)

Example:

Example

p { color: black; }           /* Specificity: 1 */
.text { color: blue; }        /* Specificity: 10 */
#main { color: red; }         /* Specificity: 100 */

If an element matches all three rules, it will be red (highest specificity wins).

Avoid !important unless absolutely necessary - it makes debugging harder.

---

Practical Examples

Example 1: Simple Card Component

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      max-width: 300px;
    }
    
    .card-title {
      font-size: 20px;
      color: #2c3e50;
      margin-bottom: 10px;
    }
    
    .card-text {
      color: #666;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2 class="card-title">Card Title</h2>
    <p class="card-text">This is a simple card component with clean styling.</p>
  </div>
</body>
</html>

Example 2: Navigation Menu

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .navbar {
      background-color: #333;
      padding: 15px 0;
    }
    
    .navbar ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    .navbar li {
      display: inline-block;
      margin: 0 15px;
    }
    
    .navbar a {
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 4px;
    }
    
    .navbar a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

---

Key Takeaways

  1. CSS syntax: selector { property: value; }
  2. Multiple selectors allow precise targeting
  3. Specificity determines which rules apply when there's a conflict
  4. Classes are reusable, IDs are unique
  5. Organize properties logically for maintainability
  6. Comments improve code readability

    7. Next Steps

Now that you understand CSS syntax, explore:

  • ✅ CSS Box Model
  • ✅ Flexbox and Grid layouts
  • ✅ Responsive design
  • ✅ CSS animations and transitions

Practice by creating your own styles and experimenting with different selectors!

Input Required

This code uses input(). Please provide values below: