when I change a:focus to :focus, my entire page turns orange!!!

':focus' is the psuedo-selector that selects what's currently in focus. This usually means something you clicked on, like a link or some text. The pseudo-selector has to attach to an element, in this case the 'a' element. Your browser is trying to get around the error and decided that since you have the page selected, you must want the whole thing orange.

:focus is an pseudo class you need to attach it with some kind of element i.e(a, button). Your whole page turn orange because you had not specified the element you want to target. So, the browser look for the element and when he not find one he will simply apply those styles to your root element which is html. That's why your whole page turn orange. I hope this will help :)

Could you post the code you are using.

:focus is a pseudo selector so will need to be attributed to some element in order for it to take effect.

In the video, Guil specifically says that removing the "a" allows the ":focus" to apply to any element on the page that becomes active.

:focus {
  color: white;
  background-color: orange;
}

James, this code appears to be a problem in the Internet Explorer web browser. Is that what you are using?

I find that Treehouse videos and Workspace works best in Chrome, but Firefox seems to be adequate as well.

If you are using Internet Explorer, I recommend that you download a different web browser, and set the new browser as your default.

I suggest using *:focus instead of just :focus