It represents how the html elements can be selected in a css file
Examples
* {
} Universal Selector: It selects all the elements
#id_name{
} Id selector: It selects only the elements with ID
.class_name{
} Class selector: It selects only element with Class name
Also,
<textbox type="text">
<textbox type="password">
Here, if we want to select only password attribute then
textbox[type="password"]{
}
- pseudo class is also an important concepts to look forward to like:
a:first-child{
} It selects the first a tag (~ a:last-child)
a:nth-child(2n){
} Select even numbered anchor tag i.e. 2,4,6...
- Cascade
- Box Model
BoxModel-cheatsheet
It is all about arrangement of layouts in web page
example:
<p> Heading</p>
In this above element:
Content is Heading
And after content there is padding which is transparent gap between content and border
Then comes border whose thickness can be changed by css shorthand property border
And finally comes margin which is the gap outside the border to other element
It means what CSS styles will be applied or override in case of multiple styles on same element
In layman's term:
!important > Inline CSS > #id > .class > element
example:
h1 {
color: blue !important;
}
h1 {
color: green;
}
Here, blue will be applied on h1
- Position
- Display
- Flexbox
- Grid
- Float
- Calc
- Pseudo Elements
- Pseudo Classes
- Custom Properties
- Media Queries
- Animations
1.Easy
2.Medium
- CSS Only Tooltips
- CSS Emoji Art
- CSS Face Art
- Advanced Hover Effects
- Animated Page Load
- Custom Checkbox Tutorial
- 3D Flip Button
- Animated Loading Spinner
3.Hard
- YouTube Clone
- Price Comparison Table
- Landing Page 1
- Landing Page 2