CSS selectors
Hello everyone and welcome to your first lesson of CSS, in this lesson we would learn about CSS selectors. If you are new to programming and do not know what is CSS language is or you do not have proper tools for coding make sure to read my article about how to start learning CSS. In that article I guided you to get the proper tools for coding and explained the CSS language, click on the button down below and start your journey.
CSS Basic Selectors
The first lesson of CSS Selectors and Colors is Selectors, before we talk about selectors, you should specify an id or class to your HTML tag. Then you could use that id or class to select you intended tag. For adding ID, type “id” and type your value and for adding class type “class” and code its value, for example down below I have written a id for article tag and a class for paragraph tag.
<!DOCTYPE html>
<html lan="en">
<head>
<!--I skip the head for defining id and class-->
</head>
<body>
<main>
<article id="article">
<p class="paragraph">This is the CSS Selectors Tutorial</p>
<p class="paragraph">Hello world</p> <!--class impacts multiple tags-->
</article>
<section id="diary">
<p class="memories"> this is my memories</p> <!--class impacts only one tag-->
</section>
</main>
</body>
</html>
Now that you know how to add id and class, we should start to learn how to use them on CSS. One of the simple selectors is tags themselves, for example you can change the background of body tag and everything that is inside of it with just typing the tag and using “{}” after it. What every you put between “{}” will impact the tag, in this case I changed the background color and text color by using two CSS elements (I will teach you these elements in future articles, You just need to learn selectors for now).
For calling an id you just need to add “#” in front of its value, I do not recommend you to use id in CSS because we use ID for html and JavaScript (you may run into problems if you use id in CSS). Classes are one of the best and most useful thing in this programming language, just add “.” in front of the value of class that we specified in html, then you could write your code for your class (it could have impact on multiple tags or single tag based on your specification on html).
/*changes the background of the page (becasue its on body tag)*/
body {
background-color: #333;
color: whitesmoke;
}
/*another tag selector(like body selector above)*/
section {
}
/*id selector*/
#article {
text-style: italic;
}
/*class selector*/
.pargraph {
color: red;
}
/*another class slector that have impact on one tag*/
.memories {}
CSS other Selectors
There are lots and lots of CSS Selectors that are too advanced for beginners, so I will teach you some selectors and I would teach you the advanced selectors later on the course. For selecting two or more tags at the same time use: “h1, h2” in this case we are writing code for header 1 and header 2. The next one is less useful if you want to write code for every header 2 that is in header1 use: “h1 h2”. Last one is the universal selector “*{}” you would select everything, from html to paragraph (I just showed the universal selector for knowing purposes not using, its not that kind of useful thing).
h1, h2 {} /*selecting every h1 and h2*/
h1 h2 {} /*selecting every h2 that is in h1*/
*{} /*selects everthing*/
