Report Blog Entry
Intro
Hi! I'm Wheat, and this is a guide to using inspect element for coding in CSS. I haven't seen one of these around (not that I've done much searching, but I digress). Inspect is a pretty important part of learning to code in CSS and can teach you a lot, so I think having a guide to using it would be handy.
I'll be going over this in a very simplified way so as to keep things as not confusing as possible. Inspect looks really complicated for those who haven't coded in CSS before and in my experience even to people who've used CSS. Don't feel bad if you have questions, I'm delighted to answer any you may have, just comment or send me a message.
Notes
Please do note that I use a browser extension to use my layout site-wide instead of just on my profile page. This allows me to edit the site in real-time without having to refresh and reupload my code to my profile with every change. I use Stylus (NOT Stylish, an important distinction to make as Stylish is known for selling user data). Here's a LINK to the Chrome store version if you'd like to get it yourself.
How to Inspect
There are a few ways to open the inspect panel. I personally prefer the first one but it doesn't really matter. Both do almost the same thing. I'll use selecting the header of the website as an example.
- Method One - Right Click
The first method involves right clicking on any element of the site you wish to edit or find the selector for, and choosing "Inspect Element" from the menu that appears. I use the browser Vivaldi so my menu may look different from yours but the idea remains the same. Here's how to do it, with pictures as a visual aid:
- Right click on the element you wish to inspect. Look at the menu that pops up and click either "Inspect Element" or hover over "Developer Tools".
Click for image - Select "Inspect Element", "Inspect", or any other variation.
The inspect element panel should pop up. It looks like this:
The top panel is called the elements panel and the bottom panel is called the styles panel. The section separating the two panels (it says "html body div.container nav div.top" in the above screenshot") is called the path. The path and the styles panel are the most important things for our uses, but the elements panel comes in handy sometimes too. I will be focusing on the styles panel and path in this guide.
- Method Two - Keyboard Shortcut
If you prefer using keyboard shortcuts to navigate websites you can open the inspect panel with those. Control + Shift + I is the shortcut for Windows devices and Command + Shift + I is the shortcut for Mac/Apple devices.
How to Use Inspect
Inspect is used for finding selectors to use in your CSS. The selector is highlighted in yellow in the code snippet below:
body {
background: red;
}
It "selects" what you will be modifying with your CSS.
In order to find these, open the inspect panel. Now, click on the button in the top left corner. It looks like a dotted box with an arrow in the bottom right of it:
Now you can click on any element of the website and it will be selected for you! Neat, right?
Using the Data
In order to actually use the data that shows up, you just have to copy the path shown to the element and use that in your CSS. Here's some images to illustrate:
If you're looking to modify, for example, the background colour of your website header, just select it with the method shown above. Here's what it should look like (or something similar):
See the blue square? That's the element that's changing the background colour of the navigation. If you want you can change it in here (just click the coloured square) to find a colour you like to copy into your CSS.
Another tip, you can disable/enable certain styles. Just hover over it and click on the checkbox next to it that appears. Like this:
Disable both background colour styles:
Now your header is transparent!
In order to do this in your CSS you'll have to set the "background" of the element to transparent.
That "nav .top" at the top is your selector! You can also use the path to select things, just type in each element shown until it works.
Here you only need "nav div.top" because everything else behind it is irrelevant and you only need that last part to make the code work.
Feel free to ask questions in the comments or PMs if you prefer your queston to not be public.
Note that I had to upload my images to a hosting site because SpaceHey wouldn't let me post the blog with embedded images :/
Comments
Displaying 0 of 0 comments ( View all | Add Comment )