Some* Basic/Simple CSS Selectors
Getting Started with Simple CSS Selectors
From my perspective learning every CSS selectors which we don't have any use doesn't make any sense. So In this blog I will be adding some basic CSS selectors which we will be using frequently.But they are also important so I will add the advanced Selectors in my future blogs or you can search them by yourself. Also don't worry about the properties inisde the selectors.There will be a different topic for all of them.
Selectors in CSS
Selectors are used to select elemnt in CSS. Mainly they are divided in 5 categories.
- Simple Selectors : (select elements based on name, id, class)
- Combinator selectors
- Pseudo-class selectors
- Pseudo-elements selectors
- Attribute selectors
Simple Selectors
These are the very basic selectors that we will be using every time we need to apply CSS.
<!DOCTYPE html>
<html>
<head><head>
<body>
<h1> Header 1 </h1>
<p id="para1" class=new>This is a Paragraph</p>
<p class=new > Hello </p>
</body>
</html>
1.CSS element Selector
p {
text-align: center;
color: red;
background-color: green;
}
2.CSS id and Class Selector
Pound(#) is used before id-name to use ID selector. This is used to select the id attribute of any HTML element. To select elements with a specific class, write a period (.) character, followed by the class name.
#para1 {
text-align: center;
color: red;
}
.new{
display:flex;
}
We can also select it more specifically.
p#para1{
color: red;
}
p.new{
border: 1px solid black;
}
CSS Universal Selector This is used to select every HTML tag on the page.
* {
box-sizing:border-box;
color: blue;
}
CSS Grouping Selector We can group multiple styles using commas. It is used to minimize the code.
h1, p {
color: red;
}
Remaining 4 categories of CSS selectors will be disussed in future blogs. But before that I need to make you familiar with these selectors.
Comment if I have committed any mistake. Let's connect on my socials. I am always open for new opportunities , if I am free :P
