HTML & CSS for Absolute Beginners: User Agent Styles

Key Takeaways

so understanding inheritance is very important but it's also important to understand why things aren't inherited so one of them is if we're specifically overwriting things like I was doing here but another reason things might not be inherited is because they actually have a specific Style on them that we didn't set ourselves and that's coming from something called the user agent Styles so if we take a look in the link here my link is purple right now so if I come on my text and I say my text is and links are usually blue but I've already visited that link so it's changed to purple uh if I go and I choose my paragraph and I say the color should be green and then we look at that we can still see like my link didn't change but if we look here other inline elements did I have these these uh strong tags in here followed the color that was there so why didn't this change and then we you know on here let's say a font font weight which is if something's bold so if I say bold it will it will become bold and everything becomes bold so I come here and I say regular and I refresh that it goes back to regular but those strong tags didn't go back to regular they didn't inherit that font weight but when I did the Bold here and I hit refresh again the link did the link inherited it so why are some things being inherited and some things not being inherited and it's because of the default styling on here this already has a color on it and this already has a font weight on it and these font weights are coming from the user agent Styles it's the default styles which are a stylesheet that comes with the browser that's applying things before we've written any CSS at all it's why if we delete everything in here and I hit refresh there's some styling here my H1 is bigger than my H2 which is bigger than my paragraphs and then we have black text and a white background all of these styles are coming from somewhere there is a starting point that exists before we write any Styles ourselves so it's just important to remember if you rely on inheritance as much as possible it's a good thing we can get things working the way we want but then if we run into something like our bold text or probably your links where you might want to change the color of them you have to select those elements specifically and set the color that you want so if I wanted a different color I could say my a cuz that's the element so I'm selecting my a or my anchors and then we could say my color is uh yellow now so it will disappear a little bit cuz yellow on white is hard to see but I can overwrite the user agent style very easily as long as we any CS we write will overwrite what the user agent style is doing and I can change the colors there and one option you do have is to actually use a keyword called inherit so if something isn't being inherited but you'd like it to you can use inherit and then it's actually going to inherit the color from the parent and so it would look and go okay I'm going to inherit the color from the paragraph that I'm inside of so it looks at the paragraph the paragraph is already inheriting it from the body where we set our color all all the way up here so if I come and I change this color we didn't look at this before but I have a Color Picker uh in vs code so if I come and let's just make it a very obvious difference and I hit save that gets inherited to the paragraph which then gets inherited into the link right there so just as a quick recap most things are inherited when it comes to typography but if ever something isn't changing you can either tell it that it should inherit yourself but the most important thing is to know why and it's because there's default styling and if something does have that default Style on there just selecting the element and setting it to whatever you want will overwrite that style