How to select a specific element?

In the previous tutorial, we’ve seen how CSS Selectors work in basic. We simply use HTML tags’ names to select elements. They are nice for styling common stuff like paragraphs, article’s headings… But sometimes we need to give some specific elements unique styles. To make it possible, CSS allows us to select a specific element using its id.

Let’s write some CSS code to see an id selector in action.
We’re gonna create a list of fruits that none of them are special but each one of them is unique. :D

HTML code:

CSS code:

Result:

See the Pen Not special but Unique by Kei Nart (@codenart) on CodePen.

You may notice that each of the id selectors begin with a hash #. It looks the same as how we use id to create internal links.

Class selectors

Basic selectors are useful for styling common stuff.
Id selectors are great for styling unique stuff.
And there are class selectors which are excellent for styling grouped stuff. :D

To use class selectors, we need to specify class names for HTML elements using class attribute and use the class names as selectors. Note that every class selector begins with a dot .

HTML code:

CSS code:

Result:

See the Pen The Harmony by Kei Nart (@codenart) on CodePen.

Yet, class selectors are far more superior.
We’ve known that a class can have more than 1 member. This time, we’re gonna define classes and their styles firstly. Later, we’ll decide which elements will join the classes and each element will join more than 1 class.

CSS code:

HTML code:

Result:

See the Pen The Harmony by Kei Nart (@codenart) on CodePen.

This idea is the same as in our daily life, isn’t it? We have dancing classes, meditate classes, etc… where people meet and learn together; And anyone can also take more than 1 class.

Priorities in CSS

When an HTML element’s text color is affected by more than 1 CSS rule, the element will choose only 1 rule to apply. Let’s take a look at the example below.

HTML code:

CSS code:

Result:

See the Pen Choice by Kei Nart (@codenart) on CodePen.

Normally, CSS files will be processed by web browser from top to bottom and the last rule should override the others. But those Selectors have different Priorities which affects the result.

Id selectors has the highest priority
Class selectors has higher priority than basic selectors
Basic selectors …

Special priority

We can also make a certain CSS rule become a very important one by appending the !important keyword right before the end of it.

This keyword will not care about Selectors. It simply makes selected HTML elements feel at home. So, they will prefer the CSS rule on top of other choices.

CSS code:

HTML code:

Result:

See the Pen Home by Kei Nart (@codenart) on CodePen.

The next important part of learning CSS is about Properties and Values. For each certain Property, there are various Values which can be applied. So, we will cover details about CSS Values when we talk about each certain Property.

In the next tutorial, we’ll talk about 2 common Value-types: Color and Length. And now, it’s time for Music!

Next: Colors & Lengths ;