DEV Community

loading...
Cover image for Simple CSS Selectors for beginners.

Simple CSS Selectors for beginners.

gautham495 profile image Gautham Vijayan Updated on ・3 min read

In this tutorial lets learn and master Simple CSS selectors.

What is a CSS selector?

In CSS, Selectors are used to select the HTML elements like
div, h1, span and style them with CSS properties.

For example, If you want to style all the div elements, we can use,

div {

color:red;

}
Enter fullscreen mode Exit fullscreen mode

Types of CSS Selectors:

  • Simple CSS selectors.
  • Pseudo-class selectors.
  • Attribute selectors.
  • Pseudo-element selectors.
  • CSS Combinator selectors.

Lets discuss about Simple CSS selectors in this article.

Simple CSS Selectors:

These selectors are the most used CSS selectors which help in styling the HTML tags like div, span, h1 tags and its elements which have classes and ids.

The basic thing for a CSS beginner is to understand that, if you want to style CSS elements, understanding Simple CSS selectors is a must.

An example for all the Simple CSS selectors with the following HTML and CSS code.

<h1> Header </h1>

<div> Div element </div>

<span class="span-class"> Span element </span>

<input type="text" id ="input-text"></input>

Enter fullscreen mode Exit fullscreen mode

Here we change the color of h1 tag to red.

h1{

color:red;

}
Enter fullscreen mode Exit fullscreen mode

Here we change background-color of all div elements.

div{

background-color:red;

}
Enter fullscreen mode Exit fullscreen mode

Here we change the font-size of the span having class of span-class

.span-class{

font-size:30px;

}
Enter fullscreen mode Exit fullscreen mode

Here we change the padding of the input tag with id of input-text.

#input-text {

padding:20px;

}

Enter fullscreen mode Exit fullscreen mode

We can also group them with commas, so that all the selectors specified have same CSS properties specified there.

Here h1, h2, h3 and div elements will have color of pink.

h1, h2, h3, div {

color:pink;

}
Enter fullscreen mode Exit fullscreen mode

Another important selector is the universal selector (*).

This universal selector selects each and every HTML tag in the html file and applies the CSS properties applied in it .

Example, In our Universal Selector Article we used the following CSS code, which will be applied to all HTML elements.


*,*:before, *:after {

box-sizing: border-box ; 
padding: 0 ;
margin: 0 ;  

}

Enter fullscreen mode Exit fullscreen mode

:before , :after are pseudo selectors.

Very important fact every beginner must know,

Class names can be applied to many html elements but ids have to be unique.

By reading this article you know more than 70% of all CSS selectors that is being used by developers in their CSS projects.

The remaining 30% consists of,

  • Pseudo-class selectors like button:hover
  • Attribute selectors like input[type="submit"]
  • CSS combinator selectors like div > p
  • Pseudo-element selectors like :before, :after

All the remaining 30% Selectors will be discussed in my upcoming articles and will be linked below.

My Personal Experience:

When I started learning CSS as a beginner, I really fumbled with CSS selectors and did not even know they were called as selectors for a week eventhough I saw a lot of tutorials on Youtube.

Then I started to play with classes and ids and worked around that for a month trying to learn other CSS properties like grid and flexbox.

Eventually after learning them, I again hoped on to CSS selectors and was astonished to see there are lot more to selectors than I thought. But after mastering simple selectors, it was very easy to understand the other types of selectors.

So, for beginners I can say, play around with Simple CSS selectors discussed in this article until you get a firm grasp over it. Along with them learn other CSS properties like grid, flexbox , borders, media queries , box-shadows etc..

The main part here is to be comfortable with classes. If you are comfortable with classes you can start to learn other CSS selectors.

Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.

My Other Articles:

Discussion (2)

pic
Editor guide
Collapse
amnemonic profile image
Adam Mnemonic

Here we change the font-size of the span having class of span-class

While it is true in your example, span-class selector will be valid for all elements not only span.

Collapse
gautham495 profile image
Gautham Vijayan Author

Good statement Adam. Yes we can use .span-class anywhere. Thank you for your valuable comment.