Some* Basic/Simple CSS Selectors
Getting Started with Simple CSS Selectors
Table of contents
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