Blog: seo
by DerekLewis

Debugging CSS code

Debugging CSS code

Date:   7/25/2022 10:32:57 PM   ( 4 mon ) ... viewed 50 times

When working in any language, it is difficult not to make mistakes. Finding bugs sometimes takes a lot of time and effort, especially for beginners. To check CSS for errors, browsers provide various development tools. They are best made in FireFox. They open like this:

 - Open the main browser menu.

 - Scroll down and click "More Tools".

 - In the menu that opens, click "Web Developer Tools"

A development bar will appear at the bottom of the browser window. It contains several tabs with different information about the page. The top edge of the panel can be moved up and down to see the panel and page content.

In order not to open the main menu every time, you can add the Developer Tools icon to the browser toolbar. It is done like this:

 - Open the main browser menu.

 - Click "More Tools".

 - In the menu that opens, click "Customize Toolbar"

 - A page with tool icons will open. Find the Developer Tools icon on it. Drag it to the toolbar.

To debug the CSS code, launch the page in FireFox and open the Developer Tools. First you need to know what styles the browser sees. To do this, open the "Styles" tab.

On the open page, styles are set in two ways: in the style.css file and in the <style> tag. You can click on any of these methods and the CSS code that the browser sees will be shown. Perhaps the browser did not display the latest changes due to the fact that you forgot to save the file or you need to clear the browser cache.

Then you need to find out what properties the browser sees on the element that is not displayed correctly. To do this, in the Developer Tools there is a tab "Inspector".

The page code is displayed on the left side of the inspector. Only all the blocks are collapsed so far. You need to expand them, find the desired element and click on it. The element code will be highlighted with a blue background.

The right side of the inspector has its own tabs. Main tab "Rules". It displays all the properties that apply to the element. It also specifies how the element got those properties.

Some properties may be crossed out. This means that this property does not apply to the element. This could be for two reasons:

 - An error was made while writing a CSS property or value. By using this useful link you should be able to fix everything.

 - Property overridden by higher priority selector

If you hover your mouse pointer over a property, a check mark will appear next to it. It can be removed. Then the property also becomes crossed out. This allows you to check how the element looks without this property.

On the right side of the inspector, there is a Markup tab. It shows the actual dimensions of the element that it currently has. Indents are also shown. Dimensions are in pixels. They may have a fractional part. This is due to the peculiarities of the calculations.

Add This Entry To Your CureZone Favorites!

Print this page
Email this page
DISCLAIMER / WARNING   Alert Webmaster

CureZone Newsletter is distributed in partnership with

Contact Us - Advertise - Stats

Copyright 1999 - 2022

0.047 sec, (2)

Back to blog!
Add Blog To Favorites!
Add This Entry To Favorites!

Blog Entries (1 of 1):
Debugging CSS code  4 mon

Blogs by DerekLewis (6):
Development  3 mon  (7)
Sports betting  3 mon  (1)
Fintech development  3 mon  (1)
Cryptocurrencies  3 mon  (1)
DevOps  4 mon  (1)
seo  4 mon  (1)

Similar Blogs (10 of 185):
Auto Service Centre  by ronnieabreu280  21 h
Online Hookup Blog  by myredbook  72 h
Top Reasons to Get …  by Melissahelen43  4 d
Sweety Blog  by sweety1981  7 d
Children’s health, …  by ExpertOK  8 d
Material Hose Fitti…  by #274261  8 d
App Development Cou…  by appdevelopment  9 d
App development cou…  by #284171  9 d
prposting  by Kirik  10 d
Underrated Casino G…  by DerekLewis12  11 d
All Blogs (1,019)

Back to blog!

Lugol’s Iodine Free S&H
J.Crow’s® Lugol’s Iodine Solution. Restore lost reserves.

Wormwood Capsules, Clove Tincture
Hulda Clark Parasite Cleanse