CSS Tricks that must be learned

Cascading Style Sheets (CSS) is a style sheet language, used for describing the formatting of a document written in any markup language. The idea of CSS is all about to enable the separation of document from its presentation which includes the elements such as the layout, colors, fonts and so on.

• Z-Index and positioning.

  z-index applies to elements that are given a "position" value. If you find an element will not stick to a z-index rule, add "position:relative" or "position:absolute" to that div.

• Margin Auto.

  Margin auto gets an element centered on the screen without affecting the users screen size. "margin: auto" will work only when a width is declared for the element. If the 'margin: auto' is applied to inline elements, then it should be made 'display: block'.

• Use Padding Appropriately.

  Padding adds to the overall width of an element. For example:

  #div { 
    width:200px; 
    padding: 30px; 
    border:2px solid #000; 
  }

  Equals a total width of 264px (200 + 30 + 30 + 2 + 2). Padding, unlike margins, cannot contain negative values.

• Using CSS to Fight Spam
  

  <label for="name"> Name: </label> 
  <input type="text" name="name" />
  <label class="captcha" for="captcha">Answer?</label>
  <input type="text" name="captcha" id="captcha" />

  For the id "captcha", we use a background image via css. The spam scripts finds the html element, scans the css, compare the selectors, find the certain selector and background image, and then it reads that background image.

• Use CSS Image Sprites.

  CSS Image sprites loads most of the css images at one time, reducing http requests and the file size of your theme. We won't have any image "flickering" issues on hover. CSS Image sprites works by adding the image elements all into one image. Using CSS we can adjust the background position, width, and height to get the image we want to display.

• Achieving a minimum height in all browsers.

  When developing, we need an element to have at least a certain height, and then automatically stretches to accommodate more content if needed. IE does not recognize the min-height property. Fortunately, min-height fast hack should be implemented.

  #Id { 
    min-height:300px; 
    height:auto !important; 
    height:300px; /* Needs to match the min height pixels above */ 
  }