CSS Syntax and Selectors

CSS Rule Structure

A CSS rule consists of a selector followed by a declaration block enclosed in curly braces {}.

The selector identifies which HTML elements the rule applies to. The declaration block contains one or more declarations.

Each declaration consists of a property and value pair, separated by a colon and ending with a semicolon.

Multiple declarations are separated by semicolons. The last declaration's semicolon is optional but recommended for consistency.

/* Basic rule structure */
selector {
  property: value;
}

/* Example with multiple properties */
h1 {
  color: blue;           /* Text color */
  font-size: 32px;       /* Font size */
  font-weight: bold;     /* Font weight */
  text-align: center;    /* Alignment */
  margin-bottom: 20px;   /* Bottom margin */
}

/* Multiple selectors sharing same styles */
h1, h2, h3 {
  font-family: 'Georgia', serif;
  color: #333;
}

/* Nested/descendant selector */
article p {
  line-height: 1.6;
  color: #555;
}

Element Selectors

Element selectors (also called type selectors) target HTML elements by their tag name.

They apply styles to all instances of that element on the page.

Element selectors have low specificity, so they're easily overridden by class or ID selectors.

Use element selectors for baseline styles that apply broadly across your site.

/* Element selectors */
p {
  font-size: 16px;
  line-height: 1.5;
}

li {
  margin-bottom: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Class Selectors

Class selectors start with a dot (.) and target elements with a specific class attribute.

Classes are reusable - multiple elements can share the same class.

An element can have multiple classes separated by spaces: class="btn primary large".

Class names are case-sensitive and should be descriptive of their purpose.

/* Class selector */
.highlight {
  background-color: yellow;
  padding: 2px 4px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

/* Element with class */
p.intro {
  font-size: 18px;
  font-weight: bold;
}

/* Multiple classes */
.box.featured {
  border: 2px solid gold;
}

ID Selectors

ID selectors start with a hash (#) and target a single element with a specific id attribute.

IDs must be unique within a page - each id value should appear only once.

ID selectors have high specificity and override class and element selectors.

Use IDs sparingly for unique page elements like main header, primary navigation, or JavaScript hooks.

/* ID selector */
#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

#main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

#footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 40px 20px;
}

/* Element with ID */
div#sidebar {
  width: 250px;
  float: left;
}

Universal and Grouping Selectors

The universal selector (*) matches all elements on the page. Use it sparingly as it can impact performance.

Grouping selectors allow you to apply the same styles to multiple selectors by separating them with commas.

The universal selector is often used for CSS resets to normalize browser default styles.

Grouping reduces code duplication and makes stylesheets easier to maintain.

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

/* Universal selector within container */
.container * {
  color: inherit;
}

/* Grouping selectors */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial', sans-serif;
  color: #333;
  margin-bottom: 15px;
}

.btn, .button, button {
  cursor: pointer;
  border: none;
  padding: 10px 15px;
}

article p, article li {
  line-height: 1.6;
}