Well, for most of you this might seem to be a beginners blog post but it is really important to understand the basics of CSS vocabulary :)

Imagine you need to ask a question on Stackoverflow or on the Support Forums of the product you are using. You will need to describe the piece of code you are working with and being familiar with the CSS vocabulary will help you describe the exact thing you need assistance with. On the other hand, if you are writing some CSS tutorials it is a must that you understand and use the correct vocabulary.

So, let's have a look at the following code and see what is the name of each and every element contained in it:

.container ul:first-child::after {
    content: none;
    margin: 0 10px;
    color: #e5e5e5;
}

The whole code you see above is called "Ruleset".

The first line, everything that finishes just before the curly bracket is called "Selector".

The whole content in between the two curly brackets is called "Declaration Block".

Each line in the Declaration Block is called "Declaration".

Then the left parts of the Declarations are called "Properties" and the right parts are called "Values" or "Keywords" depending on its type. For example, if you have an absolute position, absolute is keyword while if you have a width of 960px, 960px is a value.

Let's go back to the Selector in the above example. The :first-child element is called "Pseudo Class" and the :after element is called "Pseudo Element".

So now you know what is the name of each and every element in you CSS code. Trust me, it's important :)