Understanding CSS Syntax

Every CSS rule follows a simple structure. Once you understand this pattern, you can style any element on the page.

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

CSS

selector {
  property: value;
  property: value;
}

Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon. Declaration blocks are surrounded by curly braces.

Element Selectors

The element selector selects HTML elements based on the element name. This is the simplest type of selector.

CSS

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

h1 {
  font-size: 32px;
  font-weight: bold;
}

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

In the example above, all `<p>` elements will have navy text with a line height of 1.6. All `<h1>` elements will be 32 pixels and bold. All links will be blue with no underline.

Class Selectors

The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character followed by the class name.

CSS

.highlight {
  background-color: yellow;
  padding: 4px 8px;
}

.btn-primary {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.text-center {
  text-align: center;
}

Classes are reusable. You can apply the same class to multiple elements:

HTML

<p class="highlight">This text is highlighted.</p>
<span class="highlight">This is also highlighted.</span>

An element can also have multiple classes:

HTML

<button class="btn-primary text-center">Click Me</button>

ID Selectors

The ID selector uses the id attribute of an HTML element to select one specific element. The id of an element is unique within a page, so the ID selector is used to select one unique element.

To select an element with a specific ID, write a hash (#) character followed by the ID of the element.

CSS

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

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

#footer {
  background-color: #222;
  color: #aaa;
  text-align: center;
  padding: 10px;
}

Important: IDs should be unique on a page. Use classes when you need to style multiple elements the same way. Use IDs for unique elements like headers, footers, or main content areas.

Universal Selector

The universal selector (*) selects all HTML elements on the page. It is commonly used for CSS resets.

CSS

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

This is one of the most commonly used CSS patterns. It removes default margins and padding from all elements and sets the box-sizing model to border-box, which makes sizing calculations much easier.

Grouping Selectors

If you have elements with the same style definitions, you can group the selectors to minimize the code. To group selectors, separate each selector with a comma.

CSS

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

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

Descendant Selectors

A descendant selector matches all elements that are descendants of a specified element. The following example selects all `<p>` elements inside `<div>` elements:

CSS

div p {
  color: #555;
  margin-bottom: 10px;
}

.card .title {
  font-size: 18px;
  font-weight: bold;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
}

Attribute Selectors

CSS attribute selectors allow you to select elements based on their attributes or attribute values.

CSS

/* Select all inputs with type="text" */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

/* Select all links with target="_blank" */
a[target="_blank"] {
  color: red;
}

/* Select elements with a title attribute */
[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

Pseudo-class Selectors

A pseudo-class is used to define a special state of an element. They allow you to style elements based on their state or position.

CSS

/* Style link on hover */
a:hover {
  color: red;
  text-decoration: underline;
}

/* Style visited links */
a:visited {
  color: purple;
}

/* Style first child */
li:first-child {
  font-weight: bold;
}

/* Style last child */
li:last-child {
  border-bottom: none;
}

/* Style odd rows in a table */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

Specificity

When multiple CSS rules target the same element, the browser needs to decide which rule to apply. This is where specificity comes in.

Specificity is calculated based on the types of selectors used:

Inline styles have the highest specificity (1000)
ID selectors have a specificity of (100)
Class selectors, attribute selectors, and pseudo-classes have a specificity of (10)
Element selectors and pseudo-elements have a specificity of (1)

CSS

/* Specificity: 1 */
p {
  color: black;
}

/* Specificity: 10 */
.text-red {
  color: red;
}

/* Specificity: 100 */
#intro {
  color: blue;
}

/* Specificity: 11 (10 + 1) */
p.text-red {
  color: green;
}

In the example above, if an element is `<p id="intro" class="text-red">`, it will be blue because the ID selector has the highest specificity.

Summary

CSS selectors are the foundation of styling web pages. Understanding how to target elements precisely gives you full control over your design. Start with simple element and class selectors, and as you become more comfortable, incorporate attribute selectors, pseudo-classes, and combinators for more advanced styling.

In the next article, you will learn the different ways to add CSS to your HTML documents.