CSS Tutorial: Selectors in CSS | Web Development Tutorials #15
CSS Tutorial: Selectors in CSS | Web Development Tutorials #15
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0.201 -> All right guys, now we will talk about selectors, what are selectors in CSS
5.373 -> we will discuss how to use selectors in CSS
10.678 -> So selectors if we talked about, what are they
13.714 -> i told you this thing, i told you that in CSS selectors, we have to first put SELECTOR in CSS syntax
21.555 -> after that we give a property and sets it's value, this is CSS syntax
27.595 -> If i wrote p here, so i will selects all the paragraph in my markup here
33.501 -> after that i'm setting it's color to blue
36.604 -> 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
43.511 -> select it, here all the paragraphs elements in markup are present so select it
49.917 -> so work of CSS is, it helps to select the markup
54.422 -> helps you to target the elements which you have to select
59.76 -> So selector means it select okay
62.997 -> It makes it easy to select single or multiple HTML elements
68.969 -> like we will see in class example, so here we will see types of markup
74.675 -> for now only understand this, we can select single or multiple HTML elements using selectors
83.717 -> and all the selected elements we can set their properties to the values
91.325 -> We will see 4 types of CSS selectors
94.094 -> from which one is CSS element Selector, one is CSS id selector, one is CSS class Selector and after this CSS grouping Selector
101.802 -> How all this work, let's go to VS code and understand it
106.974 -> Now i will take you to VS code, run the live server and will try coding
112.246 -> that how we will use the 4 selectors of CSS i talked about
119.687 -> So guys here i came to my computer, here i will open my VS code and create a file naming "tut14.html"
126.927 -> i'll create a file naming "tut14.html"
130.965 -> So here i created a file naming "tut14.html"
134.268 -> and here quickly i will put html boiler plate
137.805 -> my old live server is running, i will dispose it
140.641 -> and what i will do here is write "CSS Selectors" okay
145.946 -> And here i will use internal CSS
150.217 -> you don't use inline CSS, you can use external, i'm using internal here because i want everything should be in a page
157.157 -> and whatever styling i write here will be applied on the page
162.263 -> So first of all let's give a heading here, i will give the same heading
167.167 -> "CSS selectors" and i will open live server so that my page goes to live server
171.639 -> now this CSS Selectors, and after this what i will do is write a paragraph
175.843 -> and i will write, "This is a simple paragraph to demonstrate css selectors"
184.785 -> so we will write here quickly without wasting any time and to make it nice we will capitalise T
189.89 -> so talking about simplest selector, what is it?
194.094 -> Now how page is looking, page is looking like this, nothing more we have done
197.798 -> Talking about a simple selector, so it is paragraph and what to do with it?
203.537 -> Make paragraphs color to red okay, i have written like this in my style
208.642 -> and see my paragraphs color becomes red, so that means color of my p tag have become red
214.815 -> and along with that if i add here more paragraph tags, so there color will also be red
222.523 -> see here there color is also red, so all the paragraphs i have, there color will be red okay, i will add one more
230.597 -> "yet another simple paragraph", i will make it "inside div"
235.402 -> and here i will toggle word wrap so that horizontal scroll bar will vanish
239.773 -> and here i will write simply a div okay
243.577 -> and this my main line, i will press (Alt+up arrow key), i will move it and save it okay
251.418 -> So here i wrote a paragraph inside a div, so will this paragraph also become red, think and tell me
258.158 -> so this paragraph will also become red, you thought it right because here i said that all paragraphs should become red okay
266.667 -> so see here all my paragraphs are red, okay
269.636 -> So here if i want to make only one paragraph red
276.176 -> Assume i want to make this red
279.079 -> So i will use here id selector, so this was element selector by the way
283.517 -> we wrote just p, it was a element selector, but if i want to make this id of p "redElement" okay
294.027 -> So what i will do is write like this and say "#redElement", basically what i'm saying is
303.27 -> the element which has id "redElement", make its color red, so i targeted it to id
311.211 -> and how will we know its a id not a class, i used a pound symbol here, #redElement, color : red;
316.884 -> so whosever id is red element, it will become red, so see my second one is red
323.39 -> and id is unique, and class can be multiple i told you this
328.529 -> so this type of thing we will prefer it putting it in class not in id
334.034 -> So what i will do is give ids the 2nd paragraph
339.439 -> If i gave it "secondPara" as id, so here it won't be red because i
344.611 -> changed the id of this, i wrote redElement id as this is secondPara, No
349.983 -> 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
357.524 -> It won't work at all as it is a class and here we are talking about id
361.295 -> so this won't work, my element will not be red, but if i put a . here
368.068 -> So will it work, yes it will, then second para will be red like you can see here
374.775 -> so here i can write more classes, assume i make ".bgblue" and here i will make "background-color : blue;"
386.186 -> and here i will write "bgblue", so you can see here
391.391 -> using bgblue our background is blue now, see here it has happen because i added 2 classes here
399.733 -> one was "redElement" class and one was my "bgblue" class, so this was our class selectors
405.238 -> 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"
412.979 -> In-fact i will write it for firstPara
418.151 -> and here put the id of firstPara
424.591 -> And for "firstPara" i will write something else, i will make its "color : green;" okay
429.663 -> 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
437.804 -> so now this will become green, it is green now, and for this i have set both color and background
444.511 -> what i will do is make it's color yellow, i will make it yellow
450.617 -> So see now color is yellow and background is blue
454.02 -> So like this we can style the elements, now you must be thinking what is this color?
458.859 -> What is background-color? we will talk about this, i wish you not to focus on this thing
463.597 -> now only focus only on how i'm selecting this, how did i target firstPara using it's id
469.703 -> how did i target bgblue using its class, i want you to foucs on all this things
475.675 -> So i hope you understand this thing, so what things we talked about here, first of all we have seen our HTML element selectors
485.952 -> then we saw id selectors, then we saw class selectors
490.657 -> Now here there is grouping selector also, so i will tell you grouping selector also
495.829 -> Assume i have a footer here okay
501.768 -> and i'm saying "This is footer"
504.037 -> I will put this footer at the end because it is a footer
507.674 -> So see here "This is footer"
510.51 -> Now i want that my footer and my paragraph p tag
516.683 -> I will do a thing here, add a span, "this is span"
519.786 -> i want its background to be pink, so i can group selectors, i will write "footer, span"
527.694 -> make its "background-color : pink;"
534.968 -> Now i will show you a trick, typing background color is such a headache, so how i typed it fast
541.141 -> In VS code, i wrote b, you write b and after this write anything of it like you
546.713 -> if you write col so your first background-color will come
551.518 -> so starting from here you can match anything, i hope you understand what i'm saying
557.157 -> if i write bcolor so it will show we background-color, if i write bacolor still it will show we background-color
563.029 -> because ba matched here and after that color matched here
566.099 -> so you write b so there will be many suggestions
569.336 -> if you type ol, sorry not ol of background if you type lo then what will happen
575.342 -> background will match here lo, then we do r
579.245 -> still i have many, so if i write backcol, so it matching with 2 suggestions
585.819 -> first background-color is matching, background back is matching, color's col is matching
589.99 -> then of background-clip, back is matching here, o is here and cl of clip is matching
595.228 -> so even you write it in short cut, if you write bground color
601.067 -> 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
612.312 -> i don't want that you have any questions on this that
615.281 -> how am i moving lines, how i'm setting background color, i want that
621.021 -> all things should be clear, seeing video should make it clear
623.623 -> 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
632.332 -> So this was our combined grouping selector
636.803 -> i have to talk about one more thing which i haven't talked about
641.641 -> that is CSS comments, there are different comments in CSS, so the comments you write in HTML
648.748 -> 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
657.123 -> So this is the feature of our VS code with which we can use CTRL+\ to comment on any thing
671.237 -> Again use CTRL+\ to remove it
673.807 -> So this was our HTML comment, now if you stylesheet is separate, so you wish to comment there also
680.78 -> You may need to comment, then what you will do see here what happens
685.318 -> If i write this here and use CTRL+\, so see how comment is made
689.456 -> Visual Studio code is so smart that it recognised this in inside style
693.159 -> So style should have comment like this, so this is CSS comment, "/*" then "*/", whatever in between this will be treated as comment that means
703.403 -> you can use it for leaving any message, so lets leave a message, we will write
711.11 -> "grouping selector" and make G capital of grouping
715.515 -> Here we will write "Class selector", i did selector spelling wrong
723.056 -> okay, CTRL+/, CTRL+S for save
727.26 -> and after that this is my "id selector"
730.864 -> And i hope you understand things now, but i told you one more thing, i will do a thing here
738.238 -> i'll write p and then "border : 2px solid red;" okay
744.777 -> i'm saying put borders to all the paragraphs, see all paragraphs has borders now
749.682 -> So of 2 pixel and of red color okay, so i can do this and which is this selector, this was my element selector
760.827 -> 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
769.869 -> So this are comments of CSS
773.206 -> we have seen 4 selectors here and using these selectors we will understand basics of CSS
778.177 -> We will see advance selector also, that means how can we select advance selectors
782.582 -> So i hope you understand this thing, now what is this background-color and how many properties and values are there
789.822 -> I will talk about all this things soon, now here you have to
794.694 -> clear this that there are 3 ways to write CSS, one is inline CSS, one internal CSS and one external CSS
802.568 -> 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
815.915 -> and how to use grouping selector, how to group selectors differently
821.154 -> so here, if assume
823.723 -> so here when do you have to use id selector or class selector
827.36 -> Use id selector when you are dealing with one element
831.364 -> 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
838.571 -> but if i want a specific thing, i will show you website as an example
843.342 -> 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
854.887 -> and put that class in all of this, to all the elements, so i hope you understand this thing
861.694 -> and along with that if i have to do something with logo because i can see there is only 1 logo
866.332 -> so if i have to do something with logo, i can use id for any designing purpose, like sign in button they have
872.472 -> one is here, one is here, both the designs are same, so i will put class in it
877.043 -> i can name class anything like "blueBorder" and put that class in both and it can have multiple classes also like blueBorder, blueColor
884.617 -> blueBorder can define that it's border is blue, and blueColor can define the content of it is blue
890.99 -> 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
899.732 -> but id is not the same boss, in id, one element has its unique id, it is it's identifier, id means identifier
909.041 -> and that id cannot be given to another element with same name, i hope you understand this and this thing is clear
916.215 -> If you haven't accessed this playlist, so please access it as soon as possible
920.119 -> and you connect to this course by clicking here, by bookmarking this playlist and by clicking here saving this playlist
927.26 -> So that's all in this video for now guys, if you like this videos so please do like the videos
932.465 -> Thank you soo much guys for watching this video
and I will see you next time [ ♬ ]
936.269 -> [ ♬ ]
Source: https://www.youtube.com/watch?v=oPPym7UaSIo