When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one says red.

Order of prioritization when using multiple contradictory css files

I&#39;m experiencing a minor issue with fonts in my stylesheet.

This is my CSS:

    body
    {
      ...
      font: normal 62.5% &quot;Lucida Sans Unicode&quot;,sans-serif;
    }

    #wrapper_page
    {
      ...
      font-size: 1.2em;
    }

    input, select, textarea
    {
      ...
      font: bold 100% &quot;Lucida Sans Unicode&quot;,sans-serif;
    }

And this is the result:

![browser password fields][1]


  [1]: http://i.stack.imgur.com/SAa0Q.png

I think there is an internal css setting, somewhere, on webkits  that modify the shape of the password dots. How can I get rid of it and have the same style on every browser?

Thanks!

EDIT: I just found something curious: by default, webkit browsers apply this CSS to password fields:

    input[type=&quot;password&quot;]
    {
      -webkit-text-security: disc;
    }

And that&#39;s what is replacing the classic middot.
I tried setting it to circle or none, but I cannot get something similar to what is shown by other browsers.

EDIT: I FOUND A SOLUTION.
If you are using &quot;Lucida Sans Unicode&quot; font for your website, that&#39;s the problem! The only font that emulate correctly the password field&#39;s big dots of other browsers is Verdana, mixed with a little bit of letter spacing. So, for both Opera and Webkit, use the following code to fix it: 

    .opera input[type=&quot;password&quot;],
    .webkit input[type=&quot;password&quot;]
    {
      font: large Verdana,sans-serif;
      letter-spacing: 1px;
     }

Styling Password Fields in CSS

Is there a way to dynamically remove the current stylesheet from the page?

For example, if a page contains:

    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://...&quot; /&gt;

...is there a way to later disable it with JavaScript? Extra points for using jQuery.

How to dynamically remove a stylesheet from the current page

ASP.NET offers two ways to specify paths for style sheets:

```
&lt;link href=&quot;/common/black_theme/css/style.css&quot; rel=&quot;stylesheet&quot;&gt;   (this is working)
&lt;link href=&quot;~/common/black_theme/css/style.css&quot; rel=&quot;stylesheet&quot;&gt;  (this is not working)
```

- How are these paths resolved?
- Why are the generated paths different?
- Which one should I pick in which case?

As per my knowledge, `~` represents the root directory of the application.
&quot;common&quot; is the folder below the website root (named `testsite.demo`) in IIS.

Physical path: `D:\Physicalpath\WarpFirstSite\testsite.demo`&lt;br&gt;
&quot;common&quot; folder: `D:\Physicalpath\WarpFirstSite\testsite.demo\common`





Slash (/) vs tilde slash (~/) in style sheet path

Are there any lists of default CSS stylesheets for different browsers? (browser stylesheets in tabular form)

I want to know the default font of text areas across all browsers for future reference.

Browsers&#39; default CSS stylesheets

I am trying to get rid of the thin border that appears for every image in Chrome &amp; IE9.
I have this CSS:

    outline: none;
    border: none;

Using jQuery, I also added a `border=0` attribute on every image tag. But the border as shown in the image still appears. Any solution?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;Dashboard &lt;img class=&quot;icon&quot; border=&quot;0&quot;&gt;&lt;/h1&gt;

&lt;!-- language: lang-css --&gt;

    body {
        font: 10px &quot;segoe ui&quot;,Verdana,Arial,sans-serif, &quot;Trebuchet MS&quot;, &quot;Lucida Grande&quot;, Lucida, sans-serif;
    }
    img, a img {
        outline: none;
        border: none;
    }
    .icon {
        width: 16px;
        height: 16px;
        text-indent: -99999px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: -48px -144px;
        background-image: url(theme/images/ui-icons_0078ae_256x240.png);
        margin-right: 2px;
        display: inline-block;
        position: relative;
        top: 3px;
    }

&lt;!-- end snippet --&gt;


See attached screenshot:

![Screenshot](http://i.stack.imgur.com/qbMN9.png)

Removing the image border in Chrome/IE9

I&#39;m using Drupal and I notice that if I have my CSS files aggregated that the CSS doesn&#39;t always work correctly. I know there is a [problem in IE7][1] but is there a limit to a CSS file size in IE9?

  [1]: https://drupal.stackexchange.com/questions/29994/drupal-aggregate-css-crashes-ie7

Does IE9 have a file size limit for CSS?

Is there any advantage to having a single monster .css file that contains style elements that will be used on almost every page?

I&#39;m thinking that for ease of management, I&#39;d like to pull out different types of CSS into a few files, and include every file in my main `&lt;link /&gt;` is that bad?

I&#39;m thinking this is better

 1. positions.css 
 2. buttons.css 
 3. tables.css
 4. copy.css

vs.

 1. site.css

Have you seen any gotchas with doing it one way vs. the other?

Single huge .css file vs. multiple smaller specific .css files?

I was wondering whether or not it is necessary to use `&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=...&gt;` over `&lt;link rel=&quot;stylesheet&quot; href=...&gt;`. The `rel=&quot;stylesheet&quot;` marks the information that it is a stylesheet - so `text/css` doesn&#39;t actually add anything as far as I&#39;m concerned.

The only stylesheet format used by HTML is CSS anyway, so what does `text/css` &#39;say&#39; to the browser? Some websites seem to add the `type=&quot;text/css&quot;` attribute ([http://www.jquery.com/][1]), whilst other ones don&#39;t ([http://www.youtube.com/][2]).

So, what is the use of `type=&quot;text/css&quot;` in a `&lt;link rel=&quot;stylesheet&quot;&gt;` element, and is it necessary to include it?


  [1]: http://www.jquery.com/
  [2]: http://www.youtube.com/

Is type=&quot;text/css&quot; necessary in a &lt;link&gt; tag?

In an HTML header, I&#39;ve got this:

    &lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link href=&quot;styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
    &lt;link href=&quot;master.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;/head&gt;

`styles.css` is my page-specific sheet. `master.css` is a sheet I use on each of my projects to override browser defaults. Which of these stylesheets takes priority?
Example: first sheet contains specific

    body { margin:10px; }

And associated borders, but the second contains my resets of 

    html, body:not(input=&quot;button&quot;) {
        margin: 0px;
        padding: 0px;
        border: 0px;
    }

In essence, does the cascading element of CSS work the same in terms of stylesheet references as it does in typical CSS functions? Meaning that the last line is the one displayed?

In which order do CSS stylesheets override?

I would like to use conditions in my CSS.

The idea is that I have a variable that I replace when the site is run to generate the right style-sheet.

I want it so that according to this variable the style-sheet changes!

It looks like:

    [if {var} eq 2 ]
        background-position : 150px 8px;
    [else]
        background-position : 4px 8px; 

Can this be done? How do you do this?

Can you use if/else conditions in CSS?

I am using a separate style-sheet for printing. 

Is it possible to set right and left margins in the style-sheet which set the print margin? (i.e. margin on paper)


Margin while printing html page

I&#39;ve read conflicting information regarding Internet Explorer&#39;s silly CSS limits. I am (think I am) understanding that you can only have 31 `&lt;style&gt;` and `&lt;link&gt;` tags (combined), and that each sheet can have up to 31 `@import`-s (so 31 `&lt;link&gt;`-s, each to 31 `@import`-s is fine, albeit insane).

However, the 4095 rule is less clear - is this 4095 rules per document, or per sheet? For instance, can I `&lt;link&gt;` to two stylesheets, each with 4000 rules, and have it work, or will this break the limit?

### 3rd party edit 2018

On this [msdn blog post stylesheet-limits-in-internet-explorer][1] further information is given.


  [1]: https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/

Internet Explorer&#39;s CSS rules limits

I have a style applied to my whole application:

AndroidManifest.xml:

    &lt;application android:theme=&quot;@style/ApplicationStyle&quot; android:icon=&quot;@drawable/icon&quot; android:label=&quot;@string/app_name&quot;&gt;

And in my styles.xml:

     &lt;style name=&quot;ApplicationStyle&quot; parent=&quot;android:Theme&quot;&gt;
      &lt;item name=&quot;android:button&quot;&gt;@style/CKButton&lt;/item&gt;
     &lt;/style&gt;
     &lt;style name=&quot;CKButton&quot; parent=&quot;android:style/Widget.Button&quot;&gt;
      &lt;item name=&quot;android:textSize&quot;&gt;19sp&lt;/item&gt;
      &lt;item name=&quot;android:layout_margin&quot;&gt;0dip&lt;/item&gt;
      &lt;item name=&quot;android:background&quot;&gt;#ff0000&lt;/item&gt;
     &lt;/style&gt;

But the style doesn&#39;t get applied.

I&#39;m sorry if I just used the false name in the `ApplicationStyle` - `Item`, but I have no clue where to look for the object names and simply assumed, that `android:button` applies to all buttons.

How do I apply a style to all buttons of an Android application

Is it possible to print HTML pages with custom headers and footers on each printed page?

I&#39;d like to add the word &quot;UNCLASSIFIED&quot; in Red, Arial, size 16pt to the top and bottom of every *printed* page, regardless of the content.

To clarify, if the document was printed onto 5 pages, each page should have the custom header and footer.

Does anybody know if this is possible using HTML/CSS?

How to use HTML to print header and footer on every printed page of a document?

I have several SVG graphics I&#39;d like to modify the colors of via my external style sheets - not directly within each SVG file. I&#39;m not putting the graphics in-line, but storing them in my images folder and pointing to them.

I have implemented them in this way to allow tooltips to work, and I also wrapped each in an `&lt;a&gt;` tag to allow a link.

    &lt;a href=&#39;http://youtube.com/...&#39; target=&#39;_blank&#39;&gt;&lt;img class=&#39;socIcon&#39; src=&#39;images/socYouTube.svg&#39; title=&#39;View my videos on YouTube&#39; alt=&#39;YouTube&#39; /&gt;&lt;/a&gt;

And here is the code of the SVG graphic:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;?xml-stylesheet href=&quot;stylesheets/main.css&quot; type=&quot;text/css&quot;?&gt;
    &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
    
    &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 56.69 56.69&quot;&gt;
    &lt;g&gt;
    	&lt;path d=&quot;M28.44......./&gt;
    &lt;/g&gt;
    &lt;/svg&gt;

I put the following in my external CSS file (main.css):

    .socIcon g {fill:red;}

Yet it has no effect on the graphic. I also tried .socIcon g path {} and .socIcon path {}.

Something isn&#39;t right, perhaps my implementation doesn&#39;t allow external CSS modifications, or I missed a step? I&#39;d really appreciate your help! I just need the ability to modify the colors of the SVG graphic via my external stylesheet, but I cannot lose the tooltip and link ability. (I may be able to live without tooltips though.) Thanks!

How to style SVG with external CSS?

The question pretty much says it all.

For instance, if I were using, say, [Twitter Bootstrap][1], could I define classes in my own SASS stylesheet that inherit from Bootstrap&#39;s CSS classes? Or does inheritance in SASS only work within the scope of a single file?

  [1]: http://twitter.github.com/bootstrap/

Is it possible in SASS to inherit from a class in another file?

I am having a problem with removing linebreaks after the `&lt;h1&gt;` tag, as everytime it prints, it adds a line break straight after it, so something like `&lt;h1&gt;Hello World!&lt;/h1&gt; &lt;h2&gt;Hello Again World!&lt;/h2&gt;` prints out like this:

    Hello World!

    Hello Again World!

I am unsure on what tags I need to change in CSS, but I expect it&#39;s something to do with the padding or margins

I also want to keep the vertical padding if at all possible.

Removing newline after &lt;h1&gt; tags?

I&#39;m trying to make a live, in-page css editor with a preview function that would reload the stylesheet and apply it without needing to reload the page. What would be the best way to go about this?

Is there an easy way to reload css without reloading the page?

I have the following CSS and HTML snippet being rendered.

   

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    textarea
    {
      border:1px solid #999999;
      width:100%;
      margin:5px 0;
      padding:3px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div style=&quot;display: block;&quot; id=&quot;rulesformitem&quot; class=&quot;formitem&quot;&gt;
      &lt;label for=&quot;rules&quot; id=&quot;ruleslabel&quot;&gt;Rules:&lt;/label&gt;
      &lt;textarea cols=&quot;2&quot; rows=&quot;10&quot; id=&quot;rules&quot;/&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent.  Is there a way to continue to use border and padding but constrain the total size of the `textarea` to the width of the parent?

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

When I begin writing text in the textarea, I want the outer div, with a class box, to have its border turned solid instead of dashed, but somehow the :focus doesn&#39;t apply in this case. If it works with :active, how come it doesn&#39;t work with :focus?

Any ideas why?

(Note. I want the DIV&#39;s border to turn solid, NOT the textareas)

    div.box
    {
        width: 300px;
        height: 300px;
        border: thin dashed black;
    }
    
    div.box:focus{
        border: thin solid black;
    }

    &lt;div class=&quot;box&quot;&gt;
        &lt;textarea rows=&quot;10&quot; cols=&quot;25&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;

Using :focus to style outer div?

I am looking for a way to retrieve the style from an element that has a style set upon it by the style tag.

    &lt;style&gt; 
    #box {width: 100px;}
    &lt;/style&gt;

In the body  

    &lt;div id=&quot;box&quot;&gt;&lt;/div&gt;

I&#39;m looking for straight javascript without the use of libraries.

I tried the following, but keep receiving blanks:

    alert (document.getElementById(&quot;box&quot;).style.width);  
    alert (document.getElementById(&quot;box&quot;).style.getPropertyValue(&quot;width&quot;));

I noticed that I&#39;m only able to use the above if I have set the style using javascript, but unable to with the style tags.

How to get an HTML element&#39;s style values in javascript?

I used the second solution of
[https://stackoverflow.com/questions/179927/how-to-resolve-could-not-find-schema-information-for-the-element-attribute-xxx][1]

I.e. created a XSD with the button to create a scheme. I changed the stylesheet in app.config to app.xsd but now I get the warning:

   The Global element &#39;configuration&#39; has already been declared in app.xsd

Even when changing the name the warning is shown.
Does anybody have a solution for this?



  [1]: https://stackoverflow.com/questions/179927/how-to-resolve-could-not-find-schema-information-for-the-element-attribute-xxx

Fix: The Global element &#39;configuration&#39; has already been declared

I have a positioned div whose content can be too long so scrollbars appear (`overflow:auto` set). It functions as a dialog box in an ajax app. I want to fix a close button on it&#39;s right top corner so when the user scrolls the div it won&#39;t scroll away.

I tryed it with `position:fixed; right:0; top:0` but it placed the button on the right top of the page not in the div (in firefox).

Is it possible to do this button placement using CSS only without hacking with the offsetWidth/Height in js on every scroll event?

ps: the div&#39;s height and width is not a fixed value it depends on the content&#39;s size and the browser window&#39;s size. User can also resize it if he want.

CSS position:fixed inside a positioned element

I need to create a CSS stylesheet class dynamically in JavaScript and assign it to some HTML elements like - div, table, span, tr, etc and to some controls like asp:Textbox, Dropdownlist and datalist.

Is it possible?

It would be nice with a sample.


How to dynamically create CSS class in JavaScript and apply?

I&#39;m in London working on an application, and the html/css guy is in New York. He&#39;s sending me updates daily by email as we have no source control set up that we can both use, I&#39;m constantly making small changes to his css, so each time I get a new file from him, I have to reapply all my changes to it, and obviously the more work I do, the longer this takes each time.

I had the idea of making my own seperate stylesheet, but is there a way to tell the browser to give my sylesheet higher priority and overwrite any of his styles that have the same class name and attributes?

This isn&#39;t going to be a public site so we&#39;re only going to be supporting the latest browsers.


Can one CSS file take priority over another CSS file?

I am creating a website, but when I made changes to the stylesheet on my site, and I refreshed the site, none of the changes were there.

I tried to use the view source tool to check the `stylesheet.css` and it isn’t updated either. But when I go to the root of my system it is.

I have to wait at least 20 minutes before I see the update on my site, can anyone tell me why I don’t see changes right away? Is something wrong with my browser, computer, or server?

I also tried deleting my cookies, cache, and history but it still didn’t work.

Stylesheet not updating when I refresh my site

The following style is just an example of how to set transitions in CSS3. &lt;br/&gt; Is there a pure CSS trick to make this play in loop?

    div {
        width:100px;
        height:100px;
        background:red;
        transition:width 0.1s;
        -webkit-transition:width 0.1s; /* Safari and Chrome */
        -moz-transition:width 0.1s; /* Firefox 4 */
        -o-transition:width 0.1s; /* Opera */
        transition:width 0.1s; /* Opera */
    }

    div:hover {
        width:300px;
    }

How to play CSS3 transitions in a loop?

When sending an HTML email can you link to an external style sheet or does the CSS need to be included in the email?

Also, if you can link to an external style sheet, which way is more efficient/is smarter to use: linking to the style sheet or including it in the HTML?

Can you link to a CSS file from an email?

I have loaded a css file on server so I am having a URL with me. How can i load it in my perl code using JQuery ?

So currently I am hardcoding the css in my mason page which is missing from the page something like this

    JQ.onReady(&#39;show&#39;, function(){
        JQ.addStyles({styles: [&quot;\n\n.ap_classic { border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #2F2F1D; border-right:1px solid   #2F2F1D;background-color:#EFEDD4;padding:3px; }  .ap_classic .ap_titlebar { color:#86875D;font-size:12px;padding:0 0 3px 0;line-height:1em; }  .ap_classic .ap_close { float:right; }  .ap_classic .ap_content { clear:both;background-color:white;border:1px solid #ACA976;padding:8px;font-size:11px; } &quot;]});
    });
  
I want to avoid hardcoding this css ?
  


All Stylesheet Solutions on Gang of Coders

Total of 30 Stylesheet Solutions