CSS Syntax and Selector

A CSS ruleset/rule is composed of a selector and a declaration block.

The selector or a group of selectors targets the elements we want to style. The declaration blocks are grouped in blocks. Each declaration block contains CSS declarations which are wrapped by an opening curly brace { and a closing curly brace }.

CSS declarations or declarations are contained inside a declaration block. Each declaration has to be separated by a semicolon; otherwise, the codes won’t work. It is allowed not to put a semicolon in the last declaration.

A CSS declaration is composed of a pair of a property and a value separated by a colon.

property: a human-readable identifier that indicates which stylistic feature to change
value: it is given to a property that indicates how the specified stylistic feature should be changed

In CSS, there are more than 300 different properties and almost an infinite number of different values. Note! Not all pairs of properties and values are allowed. Each property has a specific list of valid values.

Both properties and values are case-sensitive in CSS.

CSS Selectors in Css

The following are simple CSS selectors. There will be more CSS selectors lessons as you go through our lessons.

Element Selectors

It is the simplest way to target all elements of a given type.

Example:

 h1 {
font-weight: bold;
}
p {
color: green;
}

Class Selectors

Multiple elements can have the same class values.

CSS class selectors are very useful when targeting different elements.

The class selector consists of a dot (.) followed by a class name.

A class name is defined using the class attribute.

Example:

.underlined-text {
text-decoration: underline;
}
.emboldened-text {
font-weight: bold;
}

.underlined-text {
text-decoration: underline;
}

#blue {
background-color: blue;
width: 200px;
height: 200px;
}
#red {
background-color: red;
width: 200px;
height: 200px;
}

We can target only specific HTML elements with the given class or id.

Create Responsive Navbar Using BootStrap

The example below only selects <p> elements with the class=”red” and id=”green” attributes.

p.red {
color: red;
}
p#green {
color: green;
}

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

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

p {
color: fuchsia;
/* a single line CSS comment */
}
/* a multi-line comment
cause we love CSS but we
might still forget what
some codes are for */