CODEWITHSUNDEEP
htmlcssgoogle-chromedeveloper-tools
user4671351
user4671351

Reputation:

Why are CSS styles greyed out in Chrome Developer Tools?

I often use developer tools to test live CSS changes but today I am seeing for the first time that the styles section on a page I'm looking at is greyed out (the background is grey, not the text) and un-editable. I only have the option to revise a specific, singular element's style and not groups of elements.

What causes this to happen?

Upvotes: 2

Views: 3686

Answers (1)

War10ck
War10ck

Reputation: 12508

Every browser has a predefined set of styles used as an initial base point when rendering a web page. These styles are commonly referred to as User Agent Styles. In the Chrome Dev tools, these styles are denoted by a gray background.

SEE IT IN ACTION

To see this in action press:

  1. F12 to open the Chrome Dev tools on this Stack Overflow page.
  2. Select the Elements tab in the top of the dev tools.
  3. When the HTML markup appears select the <head> tag and look to the right hand column.
  4. If not already selected, select the Styles tab in the right hand column.

You should see the following defined styles in that pane:

element.style {
}
head {                           user agent stylesheet
    display: none;
}

The styles defined for head are part of the initial user agent stylesheet and denoted by the gray background that you mention above.

Upvotes: 4

Related Questions