Syntax and Selectors

CSS (Cascading Style Sheets) is used to style and layout web pages. It consists of rules, each of which comprises a selector and a declaration block.

The basic syntax is as follows, this is more of a meta-example.

selector {
  property: value;
}

Let’s look at the keywords in the above example

Selector indicates the HTML element(s) to be styled. Property specifies the aspect of the element to be styled (e.g., color, font-size). Value specifies the predefined CSS setting for the property.

Let’s look at an actual example

/* set all `<p>` elements to have blue text and a font size of 16 pixels. */
p {
  color: blue;
  font-size: 16px;
}

You may be wondering what’s the /* */ on the first line. In the CSS world, this is what a comment looks like. A comment helps you add notes and explanation in your code. Here in CSS it helps you with the same without affecting the actual styling you have written. Useful for documenting styles, organizing styles into sections, also temporarily disabling CSS written during development.

Since that’s out of the way, let’s look at the CSS rule.

Here p is the selector, it selects all the <p> elements in the site. color and font are the properties we are targeting, blue and ‘16px’ being the values assigned to the properties respectively, turning all the content inside p element to blue color and 16 pixels size.

For us to understand and how to use it to its maximum potential, all we need to do is to dive deep into selectors, properties, and values used in CSS3.

Let us start with selectors, different types of it and permutations and combinations of it.

Types of Selectors

Element Selector

Select HTML elements based on their tag name. If you don’t remember what a tag was, check the HTML article on anatomy of html element.

h1 {
  color: green;
}

Class Selector

Select HTML elements based on the class attribute. Classes can be reused across multiple elements.

Syntax Use a dot (.) followed by the class name.

.highlight {
  background-color: yellow;
}

ID Selector

• Selects a single HTML element based on the ID attribute.
• IDs must be unique within a page.
• Syntax: Use a hash (#) followed by the ID name.

#main-header {
  text-align: center;
}

Attribute Selector

• Selects HTML elements based on their attributes.

input[type="text"] {
  border: 1px solid #ccc;
}

Universal Selector

• Selects all elements on the page.
• Syntax: Use an asterisk (*).

* {
  margin: 0;
  padding: 0;
}

Descendant Selector

• Selects elements that are descendants of a specified element.
• Syntax: Separate selectors with a space.

div p {
  color: red;
}

Child Selector

• Selects elements that are direct children of a specified element.
• Syntax: Separate selectors with a greater-than sign (>).

ul > li {
  list-style-type: none;
}

Adjacent Sibling Selector

• Selects an element that is immediately preceded by a specified element.
• Syntax: Use a plus sign (+).

h1 + p {
  margin-top: 0;
}

General Sibling Selector

• Selects all elements that are siblings of a specified element.
• Syntax: Use a tilde (~).

h1 ~ p {
  color: gray;
}

Grouping and Nesting Selectors

Grouping Selectors

Grouping selectors allows you to apply the same styles to multiple elements without repeating the style rules. Separate each selector with a comma.

Example:

h1,
h2,
h3 {
  font-family: "Arial", sans-serif;
  color: navy;
}

This rule will apply the same styles to all <h1>, <h2>, and <h3> elements.

Nesting Selectors

Nesting selectors means placing one selector inside another to target elements more specifically. In CSS, nesting is often represented by using descendant selectors, child selectors, or other combinators.

Example of descendant selectors:

nav ul li a {
  text-decoration: none;
  color: black;
}

This rule will style all <a> elements that are inside <li> elements, which are inside <ul> elements, which are inside a <nav> element.

Example of child selectors:

div > p {
  margin-left: 20px;
}

This rule will style all <p> elements that are direct children of a <div> element.