Using Developer Tools To Change Your Website Design

There is a simple tool that exists on most computers that will help you understand web design. It’s called Developer Tools.

What I am about to explain will give you important insight into how your website works. Knowledge is power!

What are Developer Tools?

Every browser comes with Developer Tools. They allow you to see the nuts and bolts that make up a web page and make changes “on the fly” without having to get your hands dirty editing code files. These changes won,t be seen by anyone – Developer Tools are an environment to test, explore and learn.

Getting Developer Tools to display depends on the browser and system you are using and, sadly, this won,t be possible on tablets or smartphones.

If you,re on a Windows PC, try hitting the F12 key and they’ll pop up at the bottom of your browser window. This may not work on Firefox where you could try Control-Shift-I . If you are on a Mac, Command-Alt-I will bring them up in every browser. To get rid of them, simply hit the same keys.

And, as you can see in the video, you can also right-click on any element on a web page and select “Inspect Element” – the Developer Tools will pop up with the relevant element selected.

Using Developer Tools

It takes a bit of practice to use Developer Tools. But you should try to isolate an element on a web page you’d like to inspect and then see how you can edit it.

Selecting the element, again, depends on the browser and system you are using. You can select a magnifying glass icon in Chrome,s Developer Tools or a cursor tool in Internet Explorer,s Developer Tools. In Firefox, you can select items on the page just after bringing up the Developer Tools, however you have to click on the Style button to inspect the styles on a PC. Again, a simpler way is to right-click on any element and select “Inspect Element”.

Let’s do it now!

Once you have mastered this ability to inspect elements in Developer Tools, you can learn a great deal about HTML and CSS. So let,s go ahead and select any normal paragraph of this article in Developer Tools. You can see in the HTML (the larger pane on the left of the Developer Tools) normal body text is wrapped in a <p> tag.

The p stands for paragraph. And you can see in the CSS (the smaller pane to the right of the Developer Tools) the various styles that affect the body text here on RobCubbon.com. The first line of the style that affects the <p> tag (or .entry-content p) is “margin: 0 0 25px;” – this adds space (or margin) to the bottom of each paragraph. There is a checkbox next to it, go ahead and uncheck it. You will notice the paragraphs all close up and the space between them disappears. You can even click on that “25px”, change the value and see the paragraphs with greater or lesser space between them. Pretty cool? And, if you get yourself into a pickle, you can simply refresh the page and all the styles will be set back to the way they were.

Editing your theme,s CSS file

So what,s the point of all this? This will help you improve your website design and development skills. But I would encourage you to take baby steps with this if you,re not used to editing your themes files.

Always back up your website before making any changes to the WordPress theme files.

If you,re all backed up and you want to change some style on your website then you may do so by going Appearance > Editor in the WordPress administration area. This will usually take you to the editor for your “styles.css” – the file mostly responsible for the way your website looks. You can make edits to this document but, further down the line, you will prefer to use a good code editor along with an FTP program for uploading.

But, for now, you may like to play around with your basic typographical styling. Is your body text too small? Could your mother read it without her glasses? Maybe it could do with another few pixels on the font-size. After you,ve done that, are the body text lines too close together? If so, you may have to increase the line-height. Is there sufficient space above and below your subheadings? You could add a few pixels to the padding or margin above or below your h2 or h3 tags.

Why CSS?

It stands for Cascading Style Sheets, so called because the style declarations are set generally and specifically and cascade down with the more specific style declarations taking precedence over the general ones.

This can mean if you change one style to affect one element you can find it affecting other elements in your site that you didn,t want to change. The way to avoid this is to set more specific styles – but that will have to be a lesson for another day. In the meantime, just play with it.

Keep copies of your styles every step of the way so, if something goes wrong, you can always revert back. If possible, practice on a test site first. But, it,s fun! You,ll be geeking out on CSS in no time.

You can do it!

You can improve the design of your website. You will be rewarded with a more engaged audience who spend longer times on your site. You could also play around with Developer Tools to gain a greater understanding of HTML and CSS and improve your website,s formatting globally. If you have any questions, I,d be happy to help.