CSS Syntax - CSS Tutorial
Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart Kotlin

CSS Syntax

BLUF: Styling is what brings the web to life, and mastering CSS Syntax is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Syntax

CSS is all about presentation. Discover how CSS Syntax works to transform plain HTML into a premium user experience in the guide below.

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:

Logic Practice
Install Logic Practice
Add to home screen for a faster app-like experience