jump to navigation

Tricks We Should Know – Remeber About CSS September 29, 2011

Posted by Tournas Dimitrios in JQuery.

A web-developer should have at least a basic knowledge of CSS  , so I thought I’d write down some  CSS-tricks  for all those that are using CSS occasionally ( myself included ) .

  • Start off with a CSS reset : Different browsers apply different default styling to elements , so if you are looking to have your website look the same in all the different browsers , then  a CSS reset is important . Although lot of different reset – techniques can be used , probably the most popular is Eric’s  Myer  .
  • Don’t re-declare the same things over and over : Once you have your font set as part of the CSS reset, there is no need to re-declare it in the P tag or DIV tags .
  • Use only one external CSS file :  That will improve download speed , as the browser has  to request only one file .  Finally dealing with one file is more practical when maintaining / updating the code  .
  • Bundle styles : You can define the same styles for multiple elements by separating them with a comma .
    small , . comments , .footer { font-size : 10px ;  color: grey }
  • Use CSS Shorthand  :
    font: 1em/1.5em bold italic serif
    —–   instead of  ——–
    font-size: 1em;
    line-height: 1.5em;
    font-weight: bold;
    font-style: italic;
    font-family: serif
  • A good on-line CSS formatter and optimizer is CSSTidy .
  • Clear your floats : Floating blocks is really handy , however it can get very annoying if you forget to clear your floats .
    .content { float: left ;  }
    .sidebar { float: right ; }
    .footer { clear: both ; }
  • !important ignored by IE : Normally in CSS whichever rule is specified last takes precedence . However if you use !important after a command then this CSS command will take precedence regardless of what appears after it . This is true for all browsers except IE .
  • CSS positioning within a container : One of the best things about CSS is that you can position an object absolutely anywhere you want in the document . It’s also possible (and often desirable) to position objects within a container . It’s simple to do too . Simply assign the following CSS rule to the container :
    #container { position: relative ; }
  • Test -test-test  : During development , regularly test the results with different browsers .
  •  Find a good CSS-editor : Usually commercial editors ( Dreamweaver ) have code-hinting  support . Alternatively use an on-line CSS-editor .


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s