The Ultimate CSS Selectors Cheat
If you begin to use CSS then you need to know one of the most important things – the selectors. form
and div are the types of elements that you have to select from. Now I am going to show you the
Ultimate CSS Selectors Cheat Sheet you must know.
CSS Selectors
If you take interest in styling certain elements then you need to select the CSS rule’s part known as CSS
selectors. To declare CSS in a tag known as “style” you need to use the CSS selectors. The CSS file also
uses these in it. If at a time you want that in a number of elements the style should be applied then for
doing that an essential role is played by the CSS Selectors. An attribute known as “style” will help you in
using inline CSS.
Now if the elements are 15 and you take interest in applying the CSS to these in the same manner then
how will you do it? In this situation, the identifier will help in grouping the elements. Then in one place,
the CSS can be applied.
Some Selectors of CSS that are simple
So much logic or hierarchical wraps are not included in the CSS’s simple selectors. With the help of an
identifier, locating the element will be possible for the simple selectors of CSS. Then the style can be
implemented.
Tag Selector of CSS
In a single line, catching various types of tags is possible with the CSS selectors. These tags are basically
HTML’s predefined tags. Let us understand it with an example where 25 px is the font size, pink is the
color of the text and H1 is the tag used.
1 <style>
2 h1 {
3 color : pink;
4 font-size : 25 px;
5 }
6
7 </style>
ID Selector of CSS
When you style with the help of an element then the element’s “id” is determined by the “id” selector.
When with multiple elements you want to do tagging then you can do this with the help of IDs. If you
take interest in performing some operations by selecting these elements then JavaScript will help in
selecting these or CSS Selectors will help in selecting these.
As an example, consider that there are a number of elements having the same id. Then by using this id, a
page or section can have a different color as per your requirement.
1 <style>
2 #my_id {
3 color : pink;
4 font-size : 25px;
5 }
6
7 </style>
8 <p id = “my_id”>CSS Selector </p>
Here “my_id” is the name of the id that is used for tagging every element and each element’s font size
and color changes by the above code.
Class Selector of CSS
When a class name is used for a number of elements then for selecting each of these elements the class
selector of CSS will help you. We need to apply to style when in the class name defined, at the minimum
1 element exists. If within the same class you take interest in selecting a number of elements then you
can do this with the help of class names. Let us understand it with an example.
1 <style>
2 .my_class {
3 color : pink;
4 font-size : 25px;
5 }
6
7 </style>
8 <p class = “my_class”>CSS Class Selector </p>
The CSS’s class name is represented by a “.” symbol. Here for selecting the elements, we have used a
class named “my_class”.
CSS Selectors’ grouping
A web page can have configurations of the same style for a number of elements and so much time is
needed for doing this. By grouping the configuration, we can avoid copy-pasting these again and again.
Let us understand with an example. In the following example, for giving a pink color to p and my_id, we
combine them both.
1 <html lang=”en” dir=”ltr”>
2 <head>
3 <meta charset=”utf-8”>
4 <title>Web Template</title>
5 <style>
6 #my_id, p {
7 color : pink;
8 }
9
10 </style>
11 </head>
12 <body>
13 <center>
14 <h1 id = “my_id”> This is a heading</h1>
15 <p>This is a paragraph</p>
16 </center>
17 </body>
18 </html>
Contact Website Design India for getting the services of web design.
Sheet You Must Know
