# Problem with styles

**URL:** <https://discourse.mozilla.org/t/problem-with-styles/10233>\
**Category:** Development\
**Created:** [August 11, 2016, 12:25pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233 "2016-08-11T12:25:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [August 11, 2016, 12:25pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/1 "2016-08-11T12:25:36Z")

</div>

In content script which is injected to web-page I have added inline styles and link to css file. This is what I see when I inspect the DOM:

```
<head>
<style id="styles">div#panel { position: absolute; z-index: auto; border-radius: 3px; height: auto; }

div#panel ul li { display:inline;list-style-type: none; margin: 0; content: "\0020"; }div#_panel ul li:before { list-style-type: none; content: "\25B6"; }div#panel ul li.none:before { content: ""; }</style>
    <link rel="stylesheet" href="moz-extension://24e6c258-33c5-49d6-ae4d-e2d14e8ba2e4/pages/output_black.css" type="text/css" media="screen">
    </head>

```

The link seems to be OK, I can see the styles when I open the link. But I do not see the style from file applied in the html element. In the file there is black background for the div, but it stays without background.

Why is it?

---

<div class="post-metadata">

**Author:** ![Lithopsian](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Lithopsian](https://discourse.mozilla.org/u/Lithopsian)\
**Post date:** [August 11, 2016, 1:12pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/2 "2016-08-11T13:12:44Z")

</div>

Are you expecting the style to be applied only to the div contained in it? In effect to be scoped? To do that you would need a scoped attribute, except that support has been removed from recent Firefox versions. Since the scoped attribute is no longer supported, the style element is now strictly metadata content and should not contain other elements.

For further investigations use DOM inspector or the web console inspector to see what CSS rules are actually being applied to the div. Then you can find out if your style is even being recognised as a CSS rule and whether it is being overridden by another rule.

---

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [August 11, 2016, 2:07pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/3 "2016-08-11T14:07:54Z")

</div>

I am not sure what you are talking about.

I paste image to explain:

[![](http://oi68.tinypic.com/1z3cnjd.jpg) ](http://oi68.tinypic.com/1z3cnjd.jpg)

I have added red arrows pointing to the text which should be applied from the css file (Font-Family, Font-Size, color:white). The div’s background must be completly black so the text is visible.

Here is the content of the stylesheet:

```
div#make_it_easy_content, div#make_it_easy_panel {
  font-family: "Arial Black";
  font-size: 13px;
  background-color: black;
  color: white;
  margin: 20px;
}

```

I don’t see why you thought I expect to use scoped attribute. What I need is to add css link to the document.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [August 11, 2016, 6:11pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/4 "2016-08-11T18:11:27Z")

</div>

Did you add

```auto
    "web_accessible_resources": [
        ...
        "pages/output_black.css"
    ],

```

to your `manifest.json`?

Otherwise you will see a network error (at least in chrome).

---

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [August 11, 2016, 6:06pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/5 "2016-08-11T18:06:40Z")

</div>

Cool. Thanks man. I did not recall to do it!

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [August 11, 2016, 6:14pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/6 "2016-08-11T18:14:07Z")

</div>

You are welcome : )

---

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [August 11, 2016, 6:21pm UTC](https://discourse.mozilla.org/t/problem-with-styles/10233/7 "2016-08-11T18:21:31Z")

</div>

Now it works very well. I’m thankful to solve it because last days I had many bugs after I did some major updates. Now at least few more problems solved.