• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

9 February - 2014 By Paal Joachim 3 Comments
Last updated on: October 20, 2016

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

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

Inspect Element
Chrome options

 

Click the checkbox for Disable cache (while DevTools is open).

Inspect Element Chrome Dsiable cache

Inspect Element Chrome Dsiable cache

 

Now you should be able to view your updates.

Resources:
https://developers.google.com/web/tools/chrome-devtools/

Share this:

  • Email

Categories: Developer, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Adam says

    30 August - 2016

    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;
    }

    Reply
    • Adam says

      30 August - 2016

      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 ?

      Reply
      • Paal Joachim says

        20 October - 2016

        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!

        Reply

Leave a Reply to Adam Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.