Selectors of CSS | minify css | free css | css | learn css | css important

All right guys, now we will talk about selectors, what are selectors in CSS

We will discuss how to use selectors in CSS

Selectors Introduction:

So selectors if we talked about, what they are

i told you this thing, i told you that in CSS selectors, we have to first put SELECTOR in CSS syntax

After that we give a property and sets its value, this is CSS syntax

If i wrote p here, so i will selects all the paragraph in my markup here

After that I’m setting its colour to blue

See here i have written, "CSS selectors are used to find the element whose property will be set", that means whose property you want to set

Select it, here all the paragraphs elements in markup are present so select it

So work of CSS is, it helps to select the markup

Helps you to target the elements which you have to select

So selector means it select okay

Selectors of CSS | minify css | free css | css | learn css | css important | html and css

It makes it easy to select single or multiple HTML elements

Like we will see in class example, so here we will see types of markup

For now only understand this, we can select single or multiple HTML elements using selectors

And all the selected elements we can set their properties to the values

We will see 4 types of CSS selectors

From which one is CSS element Selector, one is CSS id selector, one is CSS class Selector and after this CSS grouping Selector

How all this work, let's go to VS code and understand it

Now i will take you to VS code, run the live server and will try coding

That how we will use the 4 selectors of CSS i talked about

So guys here i came to my computer, here i will open my VS code and create a file naming "tut14.html"

I’ll create a file naming "tut14.html"

So here i created a file naming "tut14.html"

And here quickly i will put html boiler plate

And what i will do here is write "CSS Selectors" okay

And here i will use internal CSS

You don't use inline CSS, you can use external, i'm using internal here because i want everything should be in a page

And whatever styling i write here will be applied on the page

So first of all let's give a heading here, i will give the same heading

"CSS selectors" and i will open live server so that my page goes to live server

Now this CSS Selectors, and after this what i will do is write a paragraph

And i will write, "This is a simple paragraph to demonstrate css selectors"

So we will write here quickly without wasting any time and to make it nice we will capitalise T

So talking about simplest selector, what is it?

Now how page is looking, page is looking like this, nothing more we have done

Talking about a simple selector, so it is paragraph and what to do with it?

Make paragraphs color to red okay, i have written like this in my style

And see my paragraphs color becomes red, so that means color of my p tag have become red

And along with that if i add here more paragraph tags, so there color will also be red

See here there color is also red, so all the paragraphs i have, there color will be red okay, i will add one more

"Yet another simple paragraph", i will make it "inside div"

And here i will toggle word wrap so that horizontal scroll bar will vanish

And here i will write simply a div okay

And this my main line, i will press (Alt+up arrow key), i will move it and save it okay

So here i wrote a paragraph inside a div, so will this paragraph also become red, think and tell me

So this paragraph will also become red, you thought it right because here i said that all paragraphs should become red okay

So see here all my paragraphs are red, okay

So here if i want to make only one paragraph red

Assume i want to make this red

So i will use here id selector, so this was element selector by the way

We wrote just p, it was a element selector, but if i want to make this id of p "redElement" okay

So what i will do is write like this and say "#redElement", basically what i'm saying is

The element which has id "redElement", make its color red, so i targeted it to id

And how will we know its a id not a class, i used a pound symbol here, #redElement, color : red;

So whosever id is red element, it will become red, so see my second one is red

And id is unique, and class can be multiple i told you this

so this type of thing we will prefer it putting it in class not in id

So what i will do is give ids the 2nd paragraph

If i gave it "secondPara" as id, so here it won't be red because i

Changed the id of this, i wrote redElement id as this is secondPara, No

It will work okay but if i wrote here class "redElement", so i want you to pause and tell me if it works or not

It won't work at all as it is a class and here we are talking about id

So this won't work, my element will not be red, but if i put a . here

So will it work, yes it will, then second para will be red like you can see here

So here i can write more classes, assume i make ".bgblue" and here i will make "background-color : blue;"

and here i will write "bgblue", so you can see here

Using bgblue our background is blue now, see here it has happen because i added 2 classes here

One was "redElement" class and one was my "bgblue" class, so this was our class selectors

So we have seen 3 types of selectors, one was id selector, and one we have seen, i will do a thing and make this "secondPara"

In-fact i will write it for firstPara

and here put the id of firstPara

And for "firstPara" i will write something else, i will make its "color : green;" okay

so see the first one's color is not green, why did this happen, okay because i used a dot, i have to use # for id

so now this will become green, it is green now, and for this i have set both color and background

what i will do is make it's color yellow, i will make it yellow

So see now color is yellow and background is blue

So like this we can style the elements, now you must be thinking what is this color?

What is background-color? we will talk about this, i wish you not to focus on this thing

now only focus only on how i'm selecting this, how did i target firstPara using it's id

how did i target bgblue using its class, i want you to foucs on all this things

So i hope you understand this thing, so what things we talked about here, first of all we have seen our HTML element selectors

then we saw id selectors, then we saw class selectors

Now here there is grouping selector also, so i will tell you grouping selector also

Assume i have a footer here okay

and i'm saying "This is footer"

I will put this footer at the end because it is a footer

So see here "This is footer"

Now i want that my footer and my paragraph p tag

I will do a thing here, add a span, "this is span"

i want its background to be pink, so i can group selectors, i will write "footer, span"

make its "background-color : pink;"

Now i will show you a trick, typing background color is such a headache, so how i typed it fast

In VS code, i wrote b, you write b and after this write anything of it like you

if you write col so your first background-color will come

so starting from here you can match anything, i hope you understand what i'm saying

if i write bcolor so it will show we background-color, if i write bacolor still it will show we background-color

because ba matched here and after that color matched here

so you write b so there will be many suggestions

if you type ol, sorry not ol of background if you type lo then what will happen

background will match here lo, then we do r

still i have many, so if i write backcol, so it matching with 2 suggestions

first background-color is matching, background back is matching, color's col is matching

then of background-clip, back is matching here, o is here and cl of clip is matching

so even you write it in short cut, if you write bground color

so your background-color came, so i hope you understand how i typed it, i wish quickly i will tell you with ease that how i'm doing this

i don't want that you have any questions on this that

how am i moving lines, how i'm setting background color, i want that

all things should be clear, seeing video should make it clear

so if i cleared more things in video and questions are less so it means that you will have a good experience seeing this videos

So this was our combined grouping selector

i have to talk about one more thing which i haven't talked about

Selectors of CSS | minify css | free css | css | learn css | css important | html and css

that is CSS comments, there are different comments in CSS, so the comments you write in HTML

that i told you, you can write it like this, so if i write a comment so i will use CTRL+\ and comment this syntax

So this is the feature of our VS code with which we can use CTRL+\ to comment on any thing

Again use CTRL+\ to remove it

So this was our HTML comment, now if you stylesheet is separate, so you wish to comment there also

You may need to comment, then what you will do see here what happens

If i write this here and use CTRL+\, so see how comment is made

Visual Studio code is so smart that it recognised this in inside style

So style should have comment like this, so this is CSS comment, "/*" then "*/", whatever in between this will be treated as comment that means

you can use it for leaving any message, so lets leave a message, we will write

"grouping selector" and make G capital of grouping

Here we will write "Class selector", i did selector spelling wrong

okay, CTRL+/, CTRL+S for save

and after that this is my "id selector"

And i hope you understand things now, but i told you one more thing, i will do a thing here

i'll write p and then "border : 2px solid red;" okay

i'm saying put borders to all the paragraphs, see all paragraphs has borders now

So of 2 pixel and of red color okay, so i can do this and which is this selector, this was my element selector

So if you see this in your CSS stylesheet, if you have ever opened code of any open-source project and you see something like this

So this are comments of CSS

we have seen 4 selectors here and using these selectors we will understand basics of CSS

We will see advance selector also, that means how can we select advance selectors

So i hope you understand this thing, now what is this background-color and how many properties and values are there

I will talk about all this things soon, now here you have to

Selectors of CSS | minify css | free css | css | learn css | css important | html and css

clear this that there are 3 ways to write CSS, one is inline CSS, one internal CSS and one external CSS

and the second thing you should clear that how to perform basic selection in CSS, like element selector we used, how to use id selector and class selector

and how to use grouping selector, how to group selectors differently

so here, if assume

so here when do you have to use id selector or class selector

Use id selector when you are dealing with one element

so if i want to dark a particular element so i will put id in it, using id selector i will write it's CSS

but if i want a specific thing, i will show you website as an example

If i show you this website as an example, the design i gave here i wish to give it here also, this row also, this row also, so what i will do is give a class to it

and put that class in all of this, to all the elements, so i hope you understand this thing

and along with that if i have to do something with logo because i can see there is only 1 logo

so if i have to do something with logo, i can use id for any designing purpose, like sign in button they have

one is here, one is here, both the designs are same, so i will put class in it

i can name class anything like "blueBorder" and put that class in both and it can have multiple classes also like blueBorder, blueColor

blueBorder can define that it's border is blue, and blueColor can define the content of it is blue

So like this you can use class and id, class means that one class can go to multiple elements and one element can contain multiple classes also

but id is not the same boss, in id, one element has its unique id, it is it's identifier, id means identifier

and that id cannot be given to another element with same name, i hope you understand this and this thing is clear

If you haven't accessed this playlist, so please access it as soon as possible

and you connect to this course by clicking here, by bookmarking this playlist and by clicking here saving this playlist


  • selectors of css
  • css
  • css flex
  • css border
  • html css
  • css important
  • inline css
  • w3schools css
  • css3
  • scss to css
  • minify css
  • bootstrap css
  • html and css
  • cascading style sheets
  • sass css
  • css layout
  • free css
  • css templates
  • bootstrap responsive
  • free css templates
  • inline css in html
  • css transparent
  • learn css


Post a Comment

Previous Post Next Post