Cascade, Specificity & Inheritance Explained in Depth | Ep.11

[@Shahbazkhalid-oz7gs]

Best explanation ever on youtube. Things I learned: Cascade or Cascade rule: - The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. - Cascade is the process of determining which styles will be applied to an HTML element when there are conflicting styles specified. - If two conflicting styles have the same specificity, then the order of declaration becomes the tiebreaker, and the style declared later will override the earlier one. - The cascade rule considers both specificity and order of declaration, with specificity taking precedence over order then styles with higher specificity will be applied. Specificity: In case of conflicting styles, If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element. - Start at 0, universal selector has 0 - id 100 - class/pseudo-class/attribute-selector 10 - element/pseudo-element 1 - Internal styles same rules as selectors in external CSS files. - Inline style gets a specificity value of 1000 - If you use the !important rule, it will even override inline styles. Multiple CSS files: - All cascade n specificity rules will be applied in files. - If selectors has same specificity then styles of later file will be applied. - If selectors has higher specificity in earlier file and lower specificity in later file, then styles of earlier file will be applied.

[@Jha_adarsh]

Very well explained, Specificity is cleared completely. My take away from the video : 1. cascade : Top to Bottom selector priority increase (top have least & bottom have highest priority. 2. Specificity order : inline css > id > class > element - style will apply based on the specificity. a. cascade rule will not apply if any selector have high specificity. b. If incase specificity of two selector is same then, cascade rule will apply. 3. Increase the specificity : (combination of selector) [#html.html , #html#html..#html ,li#html.html] 4.specificity : ("highest,"medium","lowest") [30:00] - Incase of multiple css file, cascade rule will be applicable accordingly. 5. Inheritance : If we apply any property on body, it will intherit to all the elements to the html. ( similartly if we apply any prop on ul, it will reflect to all the li, as li is inhrit from ul ) [* Exception is there for some element *] - For some elements browser overwrite our style, in that case we have to inherit it explicitly.

[@procodrr]

Awesome, keep learning and sharing 😊

[@jigneshprajapati5910]

Bhai Aap paid course m itna depth nhi samjate uutna aap free m samja rahe h Thanks bhai aap samaj seva kar rahe h uskeliye aapko bhot bhot dhanywad sir😄

[@akshit3920]

nobody's teaching with such a depth, hats off !

[@procodrr]

Thank you 😊

[@anuragdwivedi8221]

I am Complete your HtMl Cours videos and now learn CSS I understand all the codes you mentioned very well.

[@Vivek021e]

I have done bsc maths and i am learning from your web d course. First time 1 year ago when i start learning web d for only money and i didn't understand the concept and i lost the track. Now this time started web d for learning and your video is very very understandable. My mindset is focus on learning not money. I have completed html and also doing practice from free codecamp.Thanks bhaiaya ❤.

[@VikashSingh-pg8bz]

I understand everything about css ... Your teaching style is great Everything you explain with practical and that was good brother...... Everyone understand easily...

[@hell_robo]

selectors specificity(n,n,n) 1st n -> for inline styling applied for particular element 2nd n -> for id selectors through styles applied for particular element 3rd n -> for class selectors > attribute selectors > pseudo classes through styles applied on particular element (1,0,0) means higher specificity (0,1,0) means medium specificity or lower than (1,0,0) but higher than (0,0,1) (0,0,1) means lower specificity or lowest specificity.....

[@MAKWANARAJ-d6g]

id > class > element

[@ajinkyarathod555]

to be honest i am learning full stack development from last two year and i have seen lot of video regarding front end but still i didn't get hole concept but when i am reaching on this channel and see your video my confidence level boost up because your teaching skill are awesome you are teaching like a friends not like a teacher that why all student are relate to your your video i want attend your session sir if this massage reach to you please reply me because you are good teacher as well as you are the best motivator thank you sir please i request to as you student please make a playlist for connecting react frontend with spring boot backend and after that please make playlist for website hosting and payment integration #anurag singh sir

[@procodrr]

t.me/procodrr Join this telegram group. Next time when I'll do Google meet I'll send the in this group. Most probably it'll be on Sunday at 2 PM. You can join the meeting and talk to me directly.

[@mustafakaladagi2914]

Every time you are teaching new new feature that I didn't know... Thanks a lot bro...❤

[@procodrr]

Awesome bro, Keep learning new new features 😀

[@GauthamHC99]

specificity and inherit concepts beautifully explained

[@procodrr]

Thanks bro 😊

[@yogeshkrishnadas7]

Nice Video Sir understood alot about CSS from you sir Thankyou Hare Krishna

[@procodrr]

Hare Krishna, Yogesh. I'm glad it was helpful. Keep learning and sharing 😊

[@mushrafarkate4331]

bhoto he ache se samjhaya sir aapne practically. Thanks

[@pushprajgupta5650]

Mujhe aapki class bahut achhi lagti hai

[@Chauhan-e1s]

Specificity 1. Id # =100 2. Class . = 010 3. Li =. 001 Hover krke check kr sakta

[@incnomercy6573]

Very well explained bhai!

[@Ditellirate]

This was something new for me, but I'm not sure exactly if it'll be useful while coding most of the time. But to understand the concept it was really helpful

[@procodrr]

It will be used every time you write CSS.

[@Ditellirate]

@@procodrr I'm just a newbie so I'm not sure whether it'll be useful to style the same element twice like it was used in cascade, I'd like to know if there are some places where it's used

[@Ditellirate]

I thought it won't be useful because i thought why would i style the same thing twice in an actual code. And thank you for taking your time to reply to me sir have a nice day😊

[@Chauhan-e1s]

Inheritance :- Agar hm body ka color yellow de deta hai toh uske sabhi child ke text ka color bhe bahi ho jayaga jo hm apni body ka denga Font weight Font size Font family Color. Etc

[@AnuragKumar-qh5sf]

cascade behaves somewhat like LIFO

[@akashkinkarpandey9788]

Really helpful video..! So much details in a free video, thank you bhaiya

[@procodrr]

Awesome, keep learning and sharing 😊

[@Chauhan-e1s]

Cascading :- 8:50 Jo bhe style baad main apply hoga uski priority jyada hogi.

[@MuhammadOsama-f7r]

Qasam se sir Loved specificity word. You are amazing.

[@vamsikrishnasayarwar1792]

NextlevelExplanationHaiAapka.ThankyouSirJi

[@_sahilchauhan]

28:38 specificity 🤣🤣 maja aagya sir .....bas ese hi mispronounce hota rahega to recorded video main b fun aata rahega 😁

[@procodrr]

😂

[@SoniaKatru_]

absolutely right

[@aman_singh7958]

Bhai everything is good in your teaching and i really appreciate you for your hardwork and thank you so much for providing us these type of content but at the end one thing that i want tell is that please avoid (thik ,thik) because it sounds so irritating 🙂 for me.

[@procodrr]

JavaScript mein kuchh lectures ke baad maine, theek bolna kam kar diya hai.

[@a-67chetanzade77]

Thanks a lot sir , plz keep doing playlist dont stop plzzz

[@Chauhan-e1s]

Control+swift+enter = line ke uper courser switch Control+enter = line ke neecha switch

[@adityasinghh04]

Episode 11 completed bhaiya. Aaj subah se busy tha toh update nhi krr paaya bhaiya aapko.

[@procodrr]

Koi baat nahi

[@jungkookjeon5172]

Salam sir... Please jo is course se relevant videos hain or aap ne is complete front end playlist mein add nai ki to wo add kr den please

[@abhishekkumar-dl8yl]

Thank you sir, explained nicely

[@procodrr]

❤️

[@shaikasma8018]

Hello Anurag Sir, I have a problem. In previous classes, we installed a favicon, and now the browser is showing that icon even though I haven't linked any icon to my page. What should I do? Please reply....

[@gta5indianstatus888]

same problem I am facing that favicon is still showing

[@lohanikartik4475]

Sir, Specificity bolne ka, google voice ko mimic karne ka try kijiye, usme modulation ke sath bolenge to easy rahega bolne mein

[@Chandra-lh1sf]

Day6) completed this video, thanks.

[@Raj-e4u6i]

kab kon sa selector use karenge yhi nhi samajh lag rha hai specificity to pta lag gya but me sabhi selector use nhi kar pata ek ko hi use kar kar ke kaam karta hu

[@Raj-e4u6i]

mujhe lag rha hai ki abhi mujhe us type ki problem nhi mila hai jis me sabhi type ke selector ke prorty ko use kar pau

[@procodrr]

Tum ye maankar chalo ki 90% cases mein class selector hi use karna hai.

[@aye_kash]

#100DaysOfWebDev Nice Video Completed #DAY 10 Very Important!Topic easily undersatand

[@MAKWANARAJ-d6g]

if i am not wrong you can simply check which attribute is near according that you will get to know which style willl be apply

[@Chauhan-e1s]

13:00. Specificity agar jyada hai toh bo pehla apply hoga

[@sameerbaral5250]

Jb alag alag elements ko alag alag color dena hai tb class use karna chaiye ya id? Kb id use karna chaiye kb class smjh nahi a raha?

[@procodrr]

CSS ke liye class hi use karo

[@sameerbaral5250]

@@procodrr aisa kyu? Aur id kb use karna hai plz ek baar explain kr dijiye Confuse ho gya hu

[@Chauhan-e1s]

Sir what is devtools

[@SunnySunny-mh5do]

u r rocking bro

[@kasemmuhammad9820]

well explaination! completed✅✅

[@petergamer1274]

Nice sir

[@procodrr]

Awesome, keep learning and sharing 😊

[@khansirmv]

sir mai jis location hu oha koi programming suna bhi nahi hai

[@dibyamohapatra1900]

please make a detail play list on backend

[@mdazizul7774]

specificity a dangerous word

[@Aaayush420]

! importance is the way to cascade above one

[@nicemusic5620]

CSS mein inheritance ka matlab kya hai simple sentence mein btado bhai?

[@ASHRITHTECHWORLD]

sir if you can share resources on backend it would be greatfull they should teach like you

[@TomarSahabh]

Nice Video Bhaiya JavaScript Or React ki Series bhi aayegie Bhaiyaa

[@procodrr]

Haa, November se JavaScript start karenge aur December ke end Tak aate aate React Bhi start kar denge.

[@talhazubairansari1064]

17:25 Sir you can also check the Specificity in DevTools also by moving your cursor to the Tag, Class, and Id inside Styles tab.

[@procodrr]

Yes, we can do that now. When I made the video this feature was not present in the DevTools.

[@talhazubairansari1064]

@@procodrr Alright, thanks for the reply!

[@budhrajsingh7393]

Very happy

[@SoniaKatru_]

thank u keep it up

[@mushrafarkate4331]

Thanks sir

[@khansirmv]

tq sir

[@Chauhan-e1s]

Alt + ⬆️ = line uper chali jayagi

[@ajinkyarathod555]

anurag sir i want to take your paid session for guidance actually i want to discus with you for some full stack guidance from you please if when you get time please reply me sir

[@hpi_anc]

But i loved yr voice 😀❤️

[@procodrr]

Usme kya achha lag gaya bhai tumko? 😃😃

[@hpi_anc]

@@procodrr your's voice ❤️ and teching ka tarika

[@procodrr]

Thank you Bhai 😊

[@AsliProgramming]

❤

[@techinfo2050]

Bro is better than Angela Yu

[@hpi_anc]

Bhaiya ki aawaj is best but..........., Thodi bolne ki practice nhi h

[@procodrr]

Haa bhai, abhi itna jyada bola nahi hai kabhi. Dheere dheere practice ho jayegi.

[@khansirmv]

please mai bahut demotivate hu

[@informationpro.5380]

done

[@SparshSahani-kj2wy]

done ep 11

[@SunnySunny-mh5do]

bhai tum hira ho

[@Chauhan-e1s]

21:00

[@Chauhan-e1s]

42:30

[@aadityasj1917]

6:35 😂

[@procodrr]

Cut kar diya usko, agar aage bhi aisa dikhe to batana 🤣

[@niteshsinghdangwal5218]

Nice video 🫡

[@procodrr]

❤️

[@BiswajitGuha-z2n]

speci-fee-city

[@aayushvyas9678]

10:29

[@programmer995]

This tutorial is v2 helpful gor beginner you awesome bro

[@procodrr]

Thank you 😊

[@UmangPatil-f6c]

done