Computer science/programming & website designer

Get to Know CSS Selectors

Just like HTML has its tags, CSS has selectors.

Selectors describe how a given element should behave appearance-wise. Here’s an example of a CSS selector:

p {

font-size: 18px;

}

This selector indicates that all HTML tags within the document will have a font size of 18px.

However, a more practical way of using CSS selectors is not to restrict all tags of a given type to a certain styling, but rather create different “classes” and assign them to tags one by one.

For example, a class selector in CSS looks like this:
normal-text {

font-size: 18px;

}

Notice the dot (.) before the name of the class (normal-text). With the “normal-text” class defined, we can now assign that class to those specific HTML tags that we want to make 18px in size.

For example:

This text is going to be 18px.

Let’s take one more minute to explain all the elements of that piece of CSS code above:
normal-text – class definition; everything after the name of the class and between the opening and closing brackets {} defines what the elements assigned to this class will look like

font-size – an example CSS property

18px – a value assigned to the property

There’s a ton of CSS properties apart from the above font-size. Here’s the complete list if you’re curious.