Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools

Key Takeaways

okay so in this video we're going to be doing Chrome Dev tools we're going to be using Chrome Dev tools to enhance our CSS coding uh to take it to the next level make the workflow a little easier also give us the ability to see what's going on on somebody else's site and bring those CSS rules over to our site easily so let's say I got this site here uh basic bootstrap three panel layout looks like Factory bootstrap if you haven't seen the bootstrap video check it out now you're going to get your mind blown on how awesome bootstrap is I'll put that in the description um this should look familiar to you otherwise basic bootstrap stuff so I mean by default your theme with bootstrap will give you several things let's say I want to make this one special and this one dim you can go panel success which is this these are based off the colors of your theme uh warning that's a yellow primary these are all going to come from your bootstrap theme that you're using those are great but let's say I really want it to be something unique in my own um so I'm going to leave that panel default and I'm going to go panel special and we're going to build a rule on top of bootstrap you don't want to modify bootstrap just so you know don't want to modify bootstrap bad idea bad practice if they ever upgrade it you're going to get in big trouble you're not going to be able to do it so you want to build on top of it with your own customized rules so I'm going to make panel special and we're going to build out a rule for panel special to make this thing look you guessed it special so the first thing I'm going to do is I'm going to come over here and I'm going to rightclick and do inspect element in Chrome and that opens up Dev tools Let's Go full screen here Dev tools is what Chrome gives you Mozilla Firefox also gives you something pretty similar to this uh some features better some features worse um also IE has it pretty much of all the devs I know most people prefer Chrome nobody prefers I.E a couple people prefer Mozilla firefox's Dev tools find the one you like this is about Chrome so when I right- clicked and inspected the element it gave me the panel heading which was the thing I clicked on you can see this is the HTML that I actually had going on there uh a couple cool things you can do is you can real time you know right click and start changing your HTML very special panel um kind of like what I'm doing with live reload uh you can also delete a node um actually delete a whole node you know just start actually real time modifying your HTML code you can right click and do edit as HTML and instead of a div we'll change it to a button ah if I could type there you go now we have some awkward button there so real time you can change your HTML I'm going to refresh my page it doesn't actually change your file it just reloads what you're seeing at the time so if you ever hit refresh be careful it's going to clear everything you've adjusted in the meantime I have made that mistake several times or if you're using live reload you come over here and hit save and ah all my Styles got tweaked um and now it just reloaded so be careful of that um let's say once again we want to make this thing special so I can also when I click on each element I can see every CSS rule that is applying to that element all in a row here and as you can see it's quite a few and they're all coming from bootstrap because bootstrap has just got a lot put into it this has some you know body styles that affect every element on there you can see it's inherited from body keeps going up the list and then there's some Styles directly on panel heading um you can real time change any of these let's change the background color to a reddish border color to a whitish uh if you're going more for the design at the moment these will really help you know you quickly flesh out design stuff even faster than if you're using live reload you can turn Styles off you know so I can turn off my border radius that little I think it's a yeah three pixel rounded Corners I can turn those off turn off my padding yeah don't want to do that um you can just kind of see what happens and if you want to actually click you can see where they're coming from I'm using bootstrap minified so it's one Big Blob of CSS not very helpful there um but let's say I want to build my own we can't modify these because these are coming from bootstrap and we're not going to modify bootstrap so I'm gonna actually build my own panel special class so let me go ahead hit refresh here I'm going to start building out element style here and we're going to start on panel heading so I'm going to go background red color white um and then let's go tweak these to be a more pleasant red and since that default red is hideous make that slightly offwhite there we go that looks nice I'm also going to go border border radius zero to get those square corners just to make it different I'd probably want to do that sitewide but whatever so you notice it entered those in it converted them to RGB colors which is fine you can use either one and also gave me this inline style thing so I can double click on that and copy them which is great and now come to my CSS file panel special and we are actually on panel heading so panel special panel heading copy those styles in there hit save it refreshes and I got them awesome so let's go ahead and tweak this body a little bit let's go background color I'll make color red too um and let's go background red let's go give it a nice little Pleasant color and I'm feeling special it's working um let's go border radius zero and this won't work I want to get rid of these rounded corn Corners I already know it won't work cuz I tried this ahead of time um and oh no I changed border radius to zero and it didn't happen where is that coming from and this is something you ask yourself when you're coding CSS all the time where the heck is that style coming from because this should have overwritten it and it didn't overwrite it so I'll scroll down I'm on panel body I scroll down there's no border radius on here another thing you can do is you can click on computed and you can see here here um computed style are all the ones that it's inheriting from I will get to computed in a little bit um so I'm checking out Styles border radius has not been defined anywhere so well clearly I don't need that so I'll delete you and so now what you got to do this is what this inspector for is I'm going to start going up the chain so the panel body I must be getting border radius from this element up here let's go up an elements and yep there you go border radius of four pixels so we are able to take this for panel body let me copy that out panel body copy those in I hate the white space but oh well and now we should be looking yep now I got our colors when it refreshes yep so all we need to do is get that border radius zero on the actual panel special element and that should take care of it yep there we go now we got square square corners everywhere so it helped us debug that and like I said once again what you're going to get all the time is where is that padding coming from I set padding to zero on this it must be coming from up here um and let's look at this computed tab here real quick computed will show you 100% of the styles that are applying to that element and so here's color you can actually drop it down and see the ho so you can see it's coming from panel is getting a transparent color and then panel default is overriding it which is why that struck out with this uh gray color right there so if I go panel heading and I go background color you can see panel default is going to give us that F5 F5 and panel special is overriding it so that's another way you can kind of look through and see you can also see that this panel Special Rule is coming from my CSS inspect style sheet uh whereas this is coming from the bootstrap file so that's kind of how you're going to use this um kind of going to how you're going to use this inspector for CSS stuff let's say there's a style there's a let's go to csst tricks.com and see if there's something on here that we want to snatch that must not be the CSS tricks what is his website great guy CSS Dash tricks great website great stuff on here here let's say I'm like ooh that hover thing is Nifty let's look at that and see what rule that U made that thing glow when I hovered over it so let's see if we can find what that is uh this looks like it is div class logo let's click on that and then another thing you can do is you can click on here and see what happens on Hover and that will automatically turn hover on okay nothing changed when I turn hover on so let me look at cash tricks and see if that changes when I turn hover on that didn't change when I turned hover on let's keep looking here there we go this a when I click on Hover then you can see the glow starts coming on so it's in the hover element and let's go find out where that is color hover text stick deoration you're just going to start looking through all these and I'm going to start turning these off till I can find out which one makes the glow go away that's not it that's not it oh you know what it is it's when the hover is on the a I'll bet you anything I now see there we go that's it so let me tell you what I just did here is I could tell okay there's nothing in the a that is causing that glow to come on but it's when the hover is turned on the a that the glow appears so that means there must be a rule inside as well I don't know if I'm making sense here but I'll show you what it is is there's a a hover span so when we're hovering over the a the span is going to get its own Rule and that's where it is it's going to get that text Shadow I want that I need this so I'm going to copy text Shadow and then I'm going to say let's just go text shadow and now I have it all the time let's go back here o it's glowing awesome I snatched it but I only want it when I hover over it so I'm going to go panel special I'll basically just rip off what he did panel special hover so when I'm hovering over panel special then my panel heading is going to get that so that should give me nothing here we go I want to hover ha got it and then it glows and it's special so that's kind of a really quick I don't know if I confused you on the whole hover part um but that's kind of how you use this to start seeing what's going on with that I want to copy that onto my site um that's a pretty much basic intro to how to use CSS for Dev tools going to put up some other videos here for bootstrap at at the end and have yourselves a great day bye