CSS Syntax, Selectors, Comments

Keywords

html, css, css syntax, css selectors, css comments, html css, dataidea, data science, web development, website, css tutorial, combining css selectors

Photo by DATAIDEA

CSS Syntax:

CSS syntax follows a simple structure consisting of selectors and declaration blocks.

Selectors

These are patterns used to select the HTML elements you want to style. You can select elements by their tag name, class, ID, attributes, or relationship with other elements.

Example:

h1 {
  color: blue;
}

In this example, h1 is the selector, targeting all <h1> elements, and color: blue; is a declaration block that sets the text color of those elements to blue.

Declaration Blocks

These are enclosed within curly braces {} and contain one or more declarations separated by semicolons ;.

Example:

selector {
  property1: value1;
  property2: value2;
  /* more properties */
}

Each declaration consists of a property and its corresponding value, separated by a colon :.

CSS Selectors:

Selectors are fundamental to CSS as they allow you to target specific HTML elements for styling. Here are some common types of selectors:

Element Selector

Targets elements by their tag name.

Example:

p {
  font-size: 16px;
}

This selector targets all <p> elements and sets their font size to 16 pixels.

Class Selector

Targets elements with a specific class attribute.

Example:

.highlight {
  background-color: yellow;
}

This selector targets all elements with the class “highlight” and gives them a yellow background color.

ID Selector

Targets a single element with a specific ID attribute.

Example:

#header {
  font-size: 24px;
}

This selector targets the element with the ID “header” and sets its font size to 24 pixels.

Descendant Selector

Targets elements that are descendants of another element.

Example:

div p {
  font-style: italic;
}

This selector targets all <p> elements that are descendants of <div> elements and sets their font style to italic.

Child Selector

Targets elements that are direct children of another element.

Example:

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

This selector targets all <li> elements that are direct children of <ul> elements and sets their list style type to square.

Grouping Selectors

Sometimes multiple CSS rulesets may have similar declarations. Take a look at the example below:

h1 {
  font-family: Times New Roman;
  color: green;
}

h1 {
  font-family: Times New Roman;
  color: green;
}

Looks inefficient right? Instead of repeating the same declarations we can simply have a group of selectors in a CSS ruleset.

A group of selectors consists of selectors separated by commas

Example:

h1, p {
  font-family: Times New Roman;
  color: green;
}

CSS Comments:

CSS comments allow you to add explanatory notes within your stylesheet.

Single-line Comments

Begin with /* and end with */ and extend to the end of the line.

Example:

/* This is a single-line comment */

Multi-line Comments

Also enclosed within /* */, allowing comments to span multiple lines.

Example:

/*
  This is a multi-line comment
  It can span across multiple lines
*/

Note!

omments are useful for documenting your CSS code, explaining complex styles, or temporarily disabling certain styles for testing purposes. They improve code readability and maintainability.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top