Do You Really Understand CSS Inheritance?
HTML-код
- Опубликовано: 26 июн 2024
- FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
Working with inheritance in CSS is hard. in this video I will be covering all the complexities of inheritance so you never have to worry again.
📚 Materials/References:
FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
Fancy CSS Tricks: • 5 Must Know CSS Featur...
Initial Vs Inherit Vs Revert Vs Unset Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:03 - Initial
04:30 - Inherit
08:00 - Unset
09:37 - Revert
#CSSInheritance #WDS #CSS
*✧ Summary*
*● Initial*
The actual original property value
*● Inherit*
The parent's property value
*● Unset*
Uses the parent's property value if the property is inherited else uses initial
*● Revert*
The property value of browser's user agent stylesheet
*● The all CSS property*
The all CSS property sets the same property value to every CSS property.
I hope this is helpful
Thank you very much
Thanks!!
Thanks a million
can you please share your notes on HTML, CSS and JAVA SCRIPT with me?
NO NEED TO WATCH VIDEO🤣
This video is incredible. Finally, a n explainer of all the cooks in the kitchen causing all those bizarre style errors!
An in-depth explanation of the values.
Thank you Kyle, such a great video once more!
Awesome, I'd been typing every single style property and abusing !important, this vid will rlly help me do better in future!
Literally, no one taught me the actual meaning of "inherit" value like this. Thank you, Kyle.
I mean it's the most self explanatory one from the name
I have been having issues using these guys. Thanks a lot Kyle. Your vids are lifesaving
This was incredibly informative. Thank you for all of the awesome content that you create!
THE TIMING. THIS IS ALL I NEEDED.
Whenever I want to understand any topic first I used to search on webdevsimplified then other channels
you've become one of my favorites for learning css and JavaScript more. could you do videos on php, and Ajax? 🙏
Kyle, I love the way you explain things, you and Kevin should collab a lot more together. I have learned so much from you two, I think it's time for another show down. I love those videos...
Omg! I wish that someone would explain me while learning. Why no one explain those things? Thanks Kyle you are doing amazing job!
Great video, great channel. Thank you for all your work!
video summary:
There are essentially three different tiers of css:
initial: the original settings by css specification; see formal defn in mdn
browser styles: css styles that every browser implements to replace initial values (the *user agent stylesheet* displaying the browser's replacement styles over css initial ones)
Finally, there is custom styling that a user replaces over the initial and browser specific styles
These three tiers have an obvious heirarchal styling structures: initial (css reqs) -> browser (every browser's default styling rules) -> custom (user's custom styles are top level and override all)
inherit: is a property value that, as a child, shares the same value as its parent. the child will go up the chain until it finds a parent element to inherit from.
unset: will base itself off the initial or inherit value based properties. If the *all* property is used, then the element styling sets to initial and/or inherit; all is powerful for removing all default styles.
revert: returns values back to initial, or can return a value(s) back to a browser's default value.
Gloden Video. Thanks a ton Kyle!
Very useful and clear, thank you very much! :)
This guy is just on another level. THANKS ALOT
Love your videos, thanks so much man.
Keep it up 👍 informative video for all web designers
Awesome explanation. Finally I understood Difference between these values. 🙏🙏🙏
Why i never knew about this? Amazing! Thanks 👍👍👍
Never heard of "all" before 🤯, awesome stuff
Great Video as always :) Kyle never disappoints
Thanks! That finally makes sense. I wish I knew this when I had my Drupal internship last summer XD
You are an excellent teacher. This video is so useful.
Amazing!!! Thank you good sir!!!
great video about inheritance 👌
Great content!
Such quality content!
Im inspired to continue recording for my channel. Thank you Kyle
This guy is the best ❤
all:unset is awesome, thanks!
great explaining
Nice demo
excellent!!
This channel is underrated
Great info as always! @ 2:01 you meant "inline"
Awesome video
great, thanks
good day brother this video is really helpfull.
Nice!!!
Can you make an entire react or angular series
Thank you Kyle 👍. Can you please make video on angular 12. Its easy for me to understand the way you explained. I hope that will be helpful for the viewers as well.
So good tutorial
Great...👍
all: unset; looks super useful.
I don’t fully understand this yet but I’m closer. Thank you!
You can use font: inherit on buttons too, then the size, family and weight will get inherited.
ty so much
thank you
Learnt something new
Thanks
You must be a wizard, I was literally just reading an article on this yesterday, and I was shocked to read that divs aren't "really" display: block by default. I also read that display is not an inherited property, which was surprising to me. Should this not mean that children of a display: none element should not also inherit this display: none property? And thus children of a display: none element should show? Just something that I need to look into more
underrated video
Cheers Kyle.
May I ask, when a user-Agent style has !important , does it have lesser effect that the custom style for same element without !important attached? In other words, can my regular style overwrite a User-Agent style with !important?
great explamations, might need to see in .5X very dense :-)
THANK YOUUUUUUUUUUUUUUUU
Hey Kyle, great video, thanks al lot. I actually had no idea the standard sets div to display: inline. Question: How come, and how can we afford that, that we all simply work under the "knowledge" (really an assumption, actually) that each div we place on. A customers website will show up as display: block, when the onl formalize standard we have tells otherwise?
Out of curiosity: do you happen to know, _why_ the standard does not do what everybod assumes it does?
Thanks again, Bests!
I want this answered too : )
Very good and informative video.
Then a full reset css should be all html elements with a "all: unset" ????
Kyle, would you think is a good practice to set all elements (*) with all:unset, just like box-sizing:border-box?
To add atop of that: some people like ro do it - but that seemingly also messes with div being (not) a block, right?
I just want to say "Thank You Very Much".
Great content Kyle.Can you do video on GitHub and git.How to add frontend part in angular on existing java backend project on GitHub
On same repository
6:26 Ohhhhhhhhhhhhhhhhhhhhhhh, Buttons don't inherit font-family by default! Thanks for turning the light on in that scary closet.
finished watching
Manthan Adhav Teaches best CSS!! 😏😏😎😎
Thinks. You can the other person Kevin Powell videos I'll always watch and learn from.
You should play your opening guitar riff on your guitar for us 😀
- Kyle at 0:45 So if that sounds EXCITING, make sure you subscribe to the channel ...
- Me : Stopping and replaying the segment a couple of times, trying to figure out why he didn't say INTERESTING instead ! :-D
Plz make separate channel on CSS
❤
😍
kid is a fn legend. how do i donate pls. hair has helped me out SO much.
user-agent stylesheet
My mind blown away.. Thanks brother.
✅
Manthan Adhav teaches best CSS 😏😏😎😎
Hey Web Dev Simpilified, I have a tutorial request, can you make a video on "how auto caption/subtitle works" like how youtube does it. I know how to convert speech to text, but not from video speech to text 🤣🤣🤣
hi iam in a big trouble. i am making a new website and it contains a lot of images .
so i decided to make an image search engine for my users to easily search the image they want but i dont know how to make it.
i searched hundreds of videos on youtube but iam not satisfied with them . pls would u make a video on this topic this will realy help me.
pls consider this comment dont ignore it .
third!!
Second!!
First
WHEN comment = 'first'
THEN UserName = AutoBan
That's epic
Third
Your job is to simplify the web for us, but we don't pay you 🙄.
.
.
.
.
.
kidding I really love your videos 😍.
Love your videos. A heart plz
The titles of your videos are offensive. You imply that you are the only one who knows stuff when what you do is just repeat the same videos other people have done before
Thanks