Looking at the structure of a web site.
To check out the structure CSS, HTML on a specific area one can right click the area in Chrome, Firefox or Opera and select Inspect Element.
Here is a video from 2012 that I made to show how some of this works:
(The below video will be recreated making the process even easier to understand.)
Inspect Element
Inspect Element in Chrome
On the left is the HTML and on the right is the CSS code.
Adjust the CSS on the right and notice the change in the browser.
Click the color, or click below the existing code to add additional code.
NB! Any change done in the browser is just temporary as it just shows you changes.
To make it permanent one needs to add the CSS code either directly into the style.css, or use a plugin such as Simple Custom CSS or Custom CSS in Jetpack.
If your having problems not seeing your updates then one thing to do is open Inspect Element then click the little jagged black wheel in the middle – located top right of the developer tools.
Inspect Element
Chrome options
Click the checkbox for Disable cache (while DevTools is open).
Inspect Element Chrome Dsiable cache
Now you should be able to view your updates.
Resources:
https://developers.google.com/web/tools/chrome-devtools/
I don’t understand this concept at all. I can’t edit the .css and I can’t write custom .css to change a couple of numbers in the existing code.
Granted, I’m very much a beginner but I don’t understand how these formats go together. For instance where can I put this code to make the Contact Form 7 smaller so it fits easily on one page.
.wpcf7-form{
background: #000;
width : 375;
height: 460px;
overflow: hidden;
margin: 20px;
border: 2px solid #fff;
}
With a little modification I put it in my custom css and it worked. I was confused by it not starting with div#
Can you explain the significance of starting with .wpcf7 vs. div#wpcf7 ?
Hey Adam
Your comment disappeared for me. So here is a very late reply.
Using Inspect one can see the HTML and CSS and create modification that are just temporary. One can select the code and copy it to the style.css file.
The dot . is used to define a class. A class can be used in multiple places over and over again.
The # is used to define a div. It is unique and can only be used once.
Have a great day!