Simple CSS Selectors for beginners.

Simple CSS Selectors for beginners.:

 

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 
divh1span 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.

Header

Div element
Span element
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.

from Tumblr https://generouspiratequeen.tumblr.com/post/634113096876769280

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s