Useful CSS tips and best practices for the Beginners

In this article I am going to explain some css tips which could be very beneficial for the beginners and also discuss some misused and misunderstood concepts.

  • Use external stylesheets rather than using inline or embedded stylesheets. Sep

    arating content from the style.

  • Comment Regularly

    Commenting help you to find your specific styles easily in a long stylesheets. Also it makes easier to understand to someone else.

  • User Browser Developer Tools :

    You can use IE Developer Toolbar (for IE) or Firebug (for FF) or the integrated Inspection tools in Chrome to inspect which rules are applied to particular element, or modify the style of an element on the fly.

  • Remember to use a doctype that triggers standards mode. Note that the doctype must be the first tag – a comment or XML-declaration before the doctype may (or may not, depending on the browser) trigger quirks mode.
  • Try to express concepts, not formats. For example:
    Wrong: 

     div.red
     {
     color: red;
     }

    as opposed to:
    Good:

     div.error
     {
     color: red;
     }

    CSS should be the formatting companion for the concepts you use on your web site, so they should be reflected in it. You will be much more flexible this way.

  • You can save yourself a lot of headache by understanding specificity. When you set a rule for something, if there is a conflicting rule, specificity decides which rule wins.

    A quick rundown:

    An element-wide rule (like p {color:green;}) will be trumped by:
    A class-specific rule (like p.sidenote {color: blue;}), which will be trumped by:
    An id-specific rule (like p#final {color: red;}), which will be trumped by:
    An inline declaration will be trumped by:
    An important rule (like p#final {color: inherit !important;})
    Note : In my opinion if you need to use !important; you”ve done something wrong. Try to avoid the !important; where ever possible. It”ll make your life easier.

  •  

  • Always use Hex online casino spiele codes for colors:

    If you define something like:

    		P 
    		{
    			color : grey;
    		}

    IE-7 will not understand the color. But if you will write color:gray; it will change the color. So a better approach is always use hex codes to avoid such conflicts.

  • Use a set of CSS rules to reset cross browser inconsistencies:

    Each browser may have different default values for some settings, like margins and fonts sizes.Put this on the beginning of main stylesheet to avoid unwanted “holes” in layout:
    html * { margin: 0; padding: 0; }
    It”s a very simple CSS reset that will save you from a lot of troubles, but you might need a more complete solution like yahoo!”s.

  • Know the priority of selectors and rules:

    More specific selectors have greater priority. This means their rules cannot be overridden by selectors with lesser priority.
    Id selectors (#someId {…}) have priority over class selectors (.someClass {…}), which in turn have priority over tag selectors (p {…}). Then, nested selectors (div p {…}) have greater priority over simple selectors (p {…}). And finally, if you”re dealing with two different selectors of the same type (ex. two class selectors), the one that appears last has greater priority.

Conclusion :

In the end do the work in the following order:

  • Lay out the semantic structure of your page in HTML. Make sure it”s right without any CSS.
  • Create the basic layout of the page in a CSS – columns, headers, floating boxes.
  • Add typography – fonts, sizes and colors.
  • Add the graphical elements – background pictures, logos and so on.
  • Put a link on your page to the W3C CSS validator (if your site is visible from the internet) and keep hitting it every so often.
  • Keep all your styles outside of the HTML.

Comments
  1. Canon Camera Reviews
    • Keiffer
  2. Forex
    • Louise
  3. Tommy
  4. Shield
  5. Boliver
  6. Witty
  7. Sac Hermes Kelly
    • Thomas
  8. Kostel
  9. Grovier
    • Geraldine Bobeck
  10. Soellner
  11. Melia
  12. Caul
  13. niche finder
  14. Perrigo

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Skip to toolbar