20 Useful CSS Tips For Beginners

  • Use reset.css

    When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

    Here are few commonly used reset.css frameworks – Yahoo Reset CSSEric Meyer’s CSS ResetTripoli

  • Use Shorthand CSS

    Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

    Instead of creating CSS like this

    1. .header {
    2. background-color: #fff;
    3. background-image: url(image.gif);
    4. background-repeat: no-repeat;
    5. background-position: top left;
    6. }

    It can be short-handed into the following:

    1. .header {
    2. background: #fff url(image.gif) no-repeat top left
    3. }

    More – Introduction to CSS ShorthandUseful CSS shorthand properties

  • Understanding Class and ID

    These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

    More – Class vs. IDWhen to use Class, IDApplying Class and ID together

  • Power of <li>

    <li> a.k.a link list, is very useful when they are use correctly with <ol> or <ul>, particulary to style a navigation menu.

    More – Taming ListsAmazing LI

  • Forget <table>, try <div>

    One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>‘s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

    More – Tables are deadTables Vs. CSSCSS vs tables

  • CSS Debugging Tools

    It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web DeveloperDOM InspectorInternet Explorer Developer Toolbar, and Firebug.

    firebug 20 Useful CSS Tips For Beginners

  • Avoid Superfluous Selectors

    Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:

      1. ul li { … }
      1. ol li { … }
      1. table tr td { … }

    They can be shorten down to just

      1. li { … }
      1. td { … }

    Explanation: <li> will only exist within <ul> or <ol> and <td> will only be inside <tr> and <table> so there’s really not necessary to re-insert them.

  • Knowing !important

    Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.

    1. .page { background-color:blue !important; background-color:red;}

    In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.

  • Replace Text with Image

    This is commonly practice to replace <h1>title</h1> from a text based title to an image. Here’s how you do it.

    1. h1 {
    2. text-indent:-9999px;
    3. background:url(“title.jpg”) no-repeat;
    4. width:100px;
    5. height:50px;
    6. }

    Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height.

  • Understand CSS Positioning

    The following article gives you a clear understanding in using CSS positioning – position: {...}

    More – Learn CSS Positioning in Ten Steps

  • CSS @import vs <link>

    There are 2 ways to call an external CSS file – respectively using @import and <link>. If you are uncertain which method to use, here’s few articles to help you decide.

    More – Difference Between @import and link

  • Designing Forms in CSS

    Web forms can be easily design and customize with CSS. These following articles show you how:

    More – Table-less formForm GardenStyling even more form controls

    select 20 Useful CSS Tips For Beginners

  • Get Inspired

    If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend:

    css showcase 20 Useful CSS Tips For Beginners

    Need more? Here’s a round up of 74 CSS Galleries.

  • Rounded Corners in CSS

    This following article gives you an idea how to create cross-browser compatible rounded borders with CSS.

    rounded borders 20 Useful CSS Tips For Beginners

  • Keep CSS Codes Clean

    If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly.

    More – 12 Principles For Keeping Your Code CleanFormat CSS Codes Online

  • Typography Measurement: px vs em

    Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units.

    More – Units of Measurement in CSSCSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts

  • CSS Browsers Compatibility Table

    We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser.

    CSS support table: #1#2#3#4.

    csstable 20 Useful CSS Tips For Beginners

  • Design Multicolumns in CSS

    Having problem getting the left, middle and right column to align properly? Here are some articles that might help:

    multicolumns 20 Useful CSS Tips For Beginners

  • Get a Free CSS Editors

    Dedicated editors are always better than a notepad. Here are some we recommend:

    More – Simple CSSNotepad ++A Style CSS Editor

    notepadplus 20 Useful CSS Tips For Beginners

  • Understanding Media Types

    There are few media types when you declare CSS with <link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types.

    More – CSS and Media TypesW3 Media TypesCSS Media TypesCSS2 Media Types

  • Read more: 20 Useful CSS Tips For Beginners http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/#ixzz11t4dC8ni

    You may also like...