css 

Send to Kindle
home » snippets » css


Pages
align        
bootstrap        
content        
counters        
floats        
grid_layout        
layout        
lists        
media_queries        
pre        
pseudo_elements        
selectors        
shapes        
specificity        
text        
tools        
transforms        



Editors

Topics

Ref: SO: Make mouse pointer a hand when hover over

  • element?

    a { cursor: pointer; }
    
    # If you also want to support IE 5.0 and IE 5.5, use
    # this.
    a { cursor: pointer; cursor: hand; }
    
    • Inheriting properties

      Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The 'inherit' value can be used to strengthen inherited values, and it can also be used on properties that are not normally inherited.

      In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.

      body {  
        color: black !important;   
        background: white !important;  
      }
      
      * {   
        color: inherit !important;   
        background: transparent !important;  
      }
      
    • The @import rule

      The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

      Example(s):

      The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):

      @import "mystyle.css";  
      @import url("mystyle.css");
      

      So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.

      Example(s):

      The following rules illustrate how @import rules can be made media-dependent:

      @import url("fineprint.css") print;  
      @import url("bluish.css") projection, tv;
      

    • Outlines

      eg.

      button { outline : thick solid}
      

      Scripts may be used to dynamically change the width of the outline, without provoking a reflow.

      Outlines and Focus: Use dynamic outlines in conjunction with the :focus pseudo-class. To draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:

      :focus  { outline: thick solid black }  
      :active { outline: thick solid red }
      
    • Simple Clearing of Floats

      • If a float, "inner", inside a div, "outer", is taller/longer than "outer", then "outer" doesn't seem to realize this properly. The solution is to mark outer with style="overflow:auto" to _remind _it. This surprisingly simple solution appears to work in all modern browsers including IE 5.5+. If you have issues with scrollbars that you'd like to hie, then overflow:hidden will do the trick.

    Gotchas