CSS Basics

We can build the structure of website with just HTML . What is the need for CSS? CSS stands for cascading style sheetes it’s main purpose is to add visual aesthatics to a webpage.lets understand it with simple analogy when we are building house we paint it ,add furniture and enhances look of website in the same way css adds styling to a webpage and make it visual appealing.

You may have created button using html and you may have noticed when rendered on browser it by default get some styling it varies according to browsers which is by using user agent stylesheet.So by css we cannnot change that styling but we can override it.CSS can be written in various ways 1.Inline css: we write syling with style attribute inside tag.2.Internal css : Internal css is written inside style tag in head tag after title tag .3.External css :css is written in seperate file which is then linked with html file using link tag.

CSS Selectors

Selector are elements which tells browser where to apply css.Majorly used selectors are tags,Class,Id ,universal selector.The syntax for writing css is shown in below image we have to write property and value as key value pair inside curly braces.To select class in css we have used (.) symbol multiple tags can have same classes,Id is unique it cannot be assigned to more than one tag it is being represented by # symbol in css ,llets understand it with simple example if you watch cricket you will quickly get it Nicholas pooran plays franchise cricket across globe in different franchises which can be considerd as class but when it comes to international cricket he plays for West-Indies that is his unique identity so it is an id ,I hope classes and ids are clear .Universal selector selectors each element for styling it is being represented as * universal selectors are like all the common rules for every player like of ICC.

CSS specificity Algorithm

Lets think about situation where multiple style is written for same tag or element then which style will get executed it is situation of conflict to overcome this situation css has specificity algorithm ,yes an algorithm it follows top to bottom approach let us understand this specificity algorithm.

As shown in diagram inline style have highest weight ,whenever inline style will be written it will overide all other properties ,Ids are second weighted then classes and then remaining tags.Specificity is calculated as 4 value tuple (a,b,c,d) where each component of tuple corresponds to category of selector as a(Inline style) it has highest precedance among all,b(ID selector) Each occurence of an ID selector adds to its value ,c(classes,attributes) each occurence adds to its value,d(Tags).We compare tuple values from left to right higher value overrides values in subsquent categories eg (0,1,0,0) beats (0,0,1,0) ,(0,0,1,1) beats (0,0,0,2) ,if you didnt understand this just simply remember specificity order.Points to remember that grouping selectors do not increase specificity.

I hope you enjoy reading.Thank you!