this article is a quick ramble about the inspect panel. at the bottom, i have the references that will actually help out. this is perhaps just a promotion for the humble service of the inspect browser panel, plus my favorite tools within it.

hey! why should you care to read this? i dunno, maybe don't read the whole thing. but these are some tools that can really really help work through issues when they arise, plus they teach you more about how html/css/javascript/your BROWSER works and work together! AWESOME !!!!!!

the inspect panel! it isn't as scary as it seems. what makes it scary is how convoluted big sites' [youtube, reddit, instagram, the big ones] html is. to get some practice, try inspecting someone's neocities. here's some random sites.

f12 will open the inspect panel in most browsers. in firefox, you can also use right click + q!

open the "inspect" panel. this is typically the first panel, which lets you surf the html contents of the page. as you mouse over each element, it should be highlighted in blue on the page. click on one! next to the html text, there should be another panel labelled "rules". this will display the css rules that apply to the selected element!!! hover over different properties -- you can enable/disable, edit, and use this to debug!

there should be another tab next to "rules"--"layout". here i will introduce you to the box model.

css box model

the holy box model.

this box model goes beyond browser inspection! this box model is key to understanding block elements in css.

in this model, there are 5 layers. starting from the inside out:

  1. blue: the box's content. the text or image. the size of this box is determined by the element's height/width properties.
  2. purple: padding. this is some blank space around the element's content, but within the block, that gives the text or image some breathing room from...
  3. grey line: the border. this is the "outline" around an element. for example, the little purple outlined boxes on my tutorial pages, or the purple lines bordering this main box. the thickness of the border does change the element's size, as does the padding.
  4. yellow: margin. this is the blank space outside the element and its border. for example, the space between paragraphs is a margin. this creates breathing room between elements, and it can also center a block on a page! horizontally, at least. that's what auto does.
  5. black: the element's overall position on the page. where it's placed. depending on the element, this ring might not always have printed numbers like in the image above.

visualizing web elements and css properties this way can get tricky, but it's key to having control over what you write and make.

my other favorite thing in the inspection panel is the section where -- when you select an element -- it lists all the css rules applied to the element, and crosses out the rules that are overridden, and grays out those that are inapplicable.

it is GREAT help in debugging. why isn't my element wide? oh yeah, it's not a block! or, oh yeah! this other rule overwrites that!

tip: do you want to prioritize a specific property for whatever reason? NOW YOU CAN!!! follow the property's value with !important, and the browser will ignore what would usually overwrite the given property. for example:


#most-prioritized-selector {
    color: red;
}

.less-prioritized {
    color: blue!important;
}

now an element with the given class and id will be blue rather than red, where it would typically be red, as the id selector has a higher priority than the class selector as far as i know...

i guess i wanted to blab about it a bit! i'll now link some good resources on it, but i guess i wanted to say it's not so scary. AND!!!!!! you can make edits to a webpage in your browser very very easily, i use it all the time to help my dear friend ducked jeans.

for more information on all of this, see my read more. the four top links came from this page of mozilla's webdocs...

guess what! across most browsers, the inspect element panel works very similarly. there will be a similar layout, similar features, etc. mix and match to your liking.