What is CSS
Cascading Style Sheets, referred to as CSS, is a simple design language that simplifies the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, we make websites attractive and responsive you can control the color of the text, the style of fonts, the spacing between paragraphs, the adjustment of photos and text, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document.
CSS Selectors
Today we are going to talk about CSS selectors and some pseudo-elements
Universal Selector
The universal selector selects all the HTML elements on the page. if we use that selector it will be applied to the elements we denote with * .ex
* {
padding: 0;
color: rgb(255, 174, 0);
}
Individual selector
we use an individual selector for selecting a particular element from an HTML. it can be any element. ex
section {
background-color: rgb(78, 61, 61);
}
body {
background-color: #222;
}
Class and Id
class and id both are attributes in HTML which is used to render particular elements or tags. we denote class with a dot . in CSS and # hash for id.ex
.section1-ul-li1 {
color: white;
}
#section1-h2 {
color: #f026c1;
background-color: greenyellow;
}
Chained or and selector
chained selector is also known as and selector if we want to select the particular element which same type class name how do we chose it ex.
<style>
li.li-gold.text-silver{
color: red;
}
</style>
</head>
<body>
<ul class="ul1">
<li class="li-gold text-silver">hardwork</li>
<li class="li-gold">learn as much you can</li>
<li class="li-gold text-silver">confidence</li>
<li id="soliding">preseverance</li>
<li>set your long term goal and divide in short term achievement.</li>
<li class="and">patience</li>
</ul>
</body>
Combined selector
combined selector is used for selecting multiple tags at a same line for apply same style on them ex.
h3, .ul1{
background-color: #f026ci;
}
Inside on element
we use inside element when we want to select a child or sub-child of a parent for styling or something else its good to use when you do big tech projects.ex
div ul p{
margin: 1%;
background-color: #3b7a6a;
}
Direct child
when we want to chose a direct child of a parent for ex you are a son or daughter of you parent and when you have you child they will be direct child of you for this we need write code in correct order other wise it will not work ex.
<style>
div>p>a{
color: white;
}
</style>
</head>
<body>
<div>
<p><a href="#">hands on inside an element</a></p>
<ul>
<p>hire</p>
<p class="fire">fire</p>
<p>fold</p>
</ul>
</div>