Mastering CSS Selectors And Emmet Use

For learning CSS , HTML is prerequestic . On the basis of human anatomy, HTML is skeleton , CSS is Skin layer and Javasvript is brain of body . browser only understand three things HTML, CSS and Javacript.

We need to define the stylesheet because User Agent stylesheet are different according to the browser so to make our styles work same in all browser we need to write our CSS.

What Is CSS

CSS stands for Cascading Stylesheet . lets break down the terms :

Stylesheet : Stylesheet is simply the styles files that can apply to element of webpage. It is some set of rules for applying CSS.

Cascading : How CSS applied in elements , HTML is defined by Cascading. In basics term Cascading is overwriting the default browser stylesheet which is also called User-Agent Stylesheet. It is overwriting the CSS with our own CSS rules . when you search meaning of Cascading , It is action of something that is falling or flowing downwards like waterfall. it is fit in CSS . the bottom styles got apply when same property change to same element.

But There are difference between overwriting and Cascading .

Overwriting : When there Will be overwriting in some property then beside all property will erase . and for applying previous styles. we need to write the property again .

Cascading : In Cascading There is no need to write previous styles . It is like combining the previous styles and new property or change property to the element.

// there is button
button {
background-color : tomato;
color: #000;
padding: 10px 20px;
}
button {
border : none;
}
// in this both button styles got combine and apply in button element .
// upper property + bottom proprty combine together.

Ways of Applying CSS :

There are 3 ways of applying CSS . They are :

Inline CSS : It is apply in HTML on the tag with the style attribute .it is like <p style=”color:red; font-size:20px”>Consistency and Community</p. Its pros are we can style the element on the same line, it is easy to write . but its cons are it makes our html files more messy . we cannot reused our style again in different element .
Internal CSS : it is used inside html file in head tag under style tag . it makes the separation of our html and CSS and helps to solve the problem that is in inline CSS . we can write reusable css , there is separate place for html and CSS but when we want to apply same stylesheet in another file then we have to copy all the styles to another file which is not good that makes our work double
External CSS : this is way of writing CSS in separate file and apply in html by Linking the CSS files with link tag under head. just write css into separate file and no need to worry about html and whenever that is need to apply . no matter how much files just link the style.css into all those files your style applied.

Ways of Writing CSS in Internal or External Styles

We need to apply CSS in Some format to write css in Internal or External Stylesheet. we have to decide about selector .

Selector : it is just the selecting of element of HTML where you want to apply css . like h1, p, button, img, body, ul, li , input etc.

There are different types of ways of selecting Element :

i. By direct Tag-name : It is most forward and direct way of styling any element of HTML just by writing the name of tag . It selects all the same tag and apply styles.

ii. Combining elements with Comma : h1 , h2 , h3 {color : magenta} this apply the styles to the all element which includes with comma separarted . it is useful to combine the elements to apply some common styles to multiple elements.

The Cascading is good but to be more specific about our styling we can used class and id selector.

iii. Class Selector : class is used for grouping the elements on the basis of class attribute .it use . for selector.

one element may have multiple classname .
one class may apply to multiple element.

It has more specific than above two selecting methods.

iv. Id Selector : It is unique and for only one element . It is like id card , email . It has more specificity so styles under ID selector applied . it use dot # for selector.

// class slector 
.btn {
padding: 10px 20px;
border : 0px;
background-color: #000;
color : #fff;
}
//id seletor
#red-btn {
color : red;
}

v. Descendent Selector : The descendant selector in CSS is used to select elements that are descendants of a specified element. This means that the selected elements can be nested at any level within the specified ancestor element in the DOM tree. The descendant selector is represented by a space between two selectors . like

// nav > ul > li in this we can select li directly by descendent selector
// there might me many li in our html so we tell that only li which is descendent of nav
nav li {
color : blue;
font-size : 24px;
margin-bottom :5px;
}

v. !important : it has more specificity than all. The !important rule is used to give a CSS declaration higher priority than other declarations. When a property is marked as !important, it overrides all previous styling rules for that specific property on that element, regardless of specificity. However, overusing !important can make the CSS code difficult to maintain and debug. It should be used sparingly and only when necessary.

Note: Specificity and Cascading determine how styles need to get apply on element.

Analogy

Specificity flow top to bottom in below image :

Some Common Emmet used In CSS

w -> for width
w10 -> width 10px
w100% -> width 100%

/* similar for height*/
h ---> height
h10 ----> height 10px
h100% ----> height 100%

/* background*/
bg ---> background #000
bgc#000 ---> background-colr: #000
bg----> background
bgi---> background-image
bgr -> background-repeat 

/* we can give value by colon */
bgr:n --> background-reeat:no-repeat
bgs:cover--> background-size : cover
bgp -> background-position

/*for color*/
c = color #000
c:red = color : red
c#fff = color : #fff

/* font*/
fs = font-style italic
fz = font-size 
fz22px = font-size : 22px
fw = font -weight
fw900 = font-weight:900
lh = line-height
lh1.5 = line-height : 1.5

/*Text */
ta = text-align
tac = text-align: center
td = text-decoration :none
tt = text-transform

/* Border */
bd = border
bdrs = border-radius
bdrs50% = border-radius: 50%
/*Some More */
m = margin
t= top
d = display
pos = position
z= z-index
l= left
b = bottom
ov = overflow
d:f = dislay:flex
jc:c = justify-content:center
ai:c = align=-items: center

// we can give value by : or just by starting letter like
df = display:flex; || d:f = display :flex;

Summary

CSS provides beauty to the elements by using Cascading and specificity technique. It is used for styling the webpage. There are many libraries and CSS frameworks in the market which helps to write CSS or used the inbuilt components in our project which increase our productivity .

Some CSS Libraries are : Bootstap, Bulma, Tailwind etc.

Some component-Library are : Shadcn, Daisy, Ant Design, Material Ui, Chakra Ui , Mantine etc.

More Resources :

CSS Cheat Sheet