Devtools problem

Hi everyone,

I’m just starting out on my coding journey and have come across an issue that I’m not sure how to fix!

When I go into Devtools, select an element and change something (background colour for example), nothing happens in the live screen :woman_shrugging:

I’ve tried looking in the settings, but cant see anything that it might be! Help!

Assuming you are talking about the browser dev tools, then it should update if you are changing the CSS on the correct object. Note though that if other CSS exists with higher specificity, then that CSS will override anything you are trying to do.

In Safari, the ‘Style Attribute’ appears at the top of the list and would be considered on par with an in-line style.
image

It will pretty much guarantee an effect to happen.
image

Not though, this is only temporary and any action that may refresh the page will revert back to the original style.

Hope that helps!

1 Like

Hi, sorry I should have mentioned that the problem I was having was with Chrome Devtools. I was watching the video in the Fundamentals of CCS course which shows you how to inspect source code of websites and how you can change (temporarily) the way the page looks.

It didn’t seem to matter what I did (alter background colour, font size etc), nothing was changing on the live page. HOWEVER, now that I have posted about it, it seems to be working fine! Seriously, I am totally new to this so apologies for not being able to explain it well!

No worries! Each day will get a little easier, but part of the fun is that there are always challenges and puzzles to solve and learn about.

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.