CSS: terms and syntax (a tutorial for beginners)

How often we couldn't understand when an article explains CSS because of its terminology? Words like "element", "class", "selector" and so on, can get mixed up in our brain, and we feel like we are missing something.

Don't worry, because here I explain it all, and so there won't be any confusion anymore.

CSS stylesheets

CSS stands for Cascading Style Sheet.
I believe you already know how a stylesheet is built. Anyway, it is important to remember that a stylesheet is a set of CSS rules. It could be external (we link to the stylesheet in the head of the page), it could be embedded directly in the head of a document or it could be inline (inside the HTML element we want to style).
When we link to an external stylesheet we use the following syntax:





The stylesheetfilename file will contain CSS rules like:

p {
  color: #000000;
}

If we want to embed the stylesheet in the head of our page, we use:





If we prefer, we can style an HTML tag directly using inline styles:

  The content

That was easy. Let's see now, how all those little parts are called.

Terminology

CSS rules are made of two main parts. We need to determine what we need to style and how we want it to be. The first is called selector, and the second is called declaration. Declarations are then made of properties and values.
Let's see an example.

p {
  color: #000000;
}

'p' is the selector.
'color: #000000;' is the declaration.
'color' is the property.
'#000000' is the value.

In the above example the selector is an HTML element. However we can actually have different types of selectors.

Selectors

Selectors can be HTML elements, like we saw. That is the most direct way of styling an element of our document, however that means all the HTML elements will be styled. Just to be clear, if you create a CSS rule for the

tag, all the

tags in your page will follow that rule. And sometimes we don't want that.
That is why, selectors can even be IDs or classes.

IDs are used to select a unique element in your page. As you may already know an ID is always unique.
In order to use ID selectors, we need to use the following syntax:

#example {
  color: #000000;
}

for styling the following element:

example">The content

Classes are used when we want to apply a rule to different elements:

.example {
  color: #000000;
}

The above rule can be applied to different elements that have a class set to "example":

example">The content

example">Paragraph

Or we can apply a rule only to an element with a specific class. If we want to apply the above rule, only to divs with a class set to "example", we need to change the selector like:

div.example {
  color: #000000;
}

As a side note, do not use classes starting with numbers: they will likely not work. When deciding names for selectors, use appropriate names which will immediately be recognizable when coding your page. As an example, you can create selectors like "big_red_title", "white_text" and so on. That will help us a lot when we need to use them in our HTML (see this post for more on that).

Declarations, properties and values

Now that you know how to select an element, what? Well, we can style the elements with properties and values. I definitely can't list all the available properties here, however keep in mind that there's a wide a range of possible declarations used to manipulate and style the elements. We can change an element font, color, size, background, position, border and so on.
There are lots of possible properties, and, believe me, today it is possible to achieve almost anything with CSS.

Again on selectors

There's something more to say on class selectors and I'm talking about pseudo-classes. "Oh my! What's that?", you might think. Nothing really complicated.
In order to give special effect to some classes, we can use pseudo-classes. Their syntax is:

selector:pseudo-class {
  property: value;
}

Pseudo-classes available are:
:link
:visited
:active
:hover
:focus
:first-child
:lang

On the other hand, we can even have pseudo-elements which basically behave the same way as pseudo-classes. As W3C states there's a difference between the two:

- Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., :before and :after pseudo-elements give access to generated content).

- Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are :first-child', which can be deduced from the document tree, and ':lang()', which can be deduced from the document tree in some cases.

(quoted from W3C site)
Pseudo-elements are:
:first-line
:first-letter
:before
:after

And that concludes our short introduction to CSS. I know that we have only scratched the surface, but I believe some sort of clarification, especially on terms, was needed. And that is why I wrote the above.

If you want, you can share your thoughts as usual, using the comments section below.