Home/ Questions/Q 913741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T17:36:30+00:00

I develop websites since last two years now and I have hard time learning

  • 0

I develop websites since last two years now and I have hard time learning CSS (just spend a whole day creating a login box like twitter…). And sooner or later I fall back to table layout, and get things done (for almost everything I dig deep in to other’s source code and Google like hell… but I wish I know how to do it the way I normally figure out my programming problem instead of Google all day…).

And even after sometime if I achieve goal to create a perfect layout, and go back to IE for testing, everything is messed up.

I am the only guy developing it, so normally 70% of my time spend on design and 30% on programming.

I think I need to learn something more so that I spend less time adjusting my layouts and more time program it.

How you all programmer+designer work? And, how to master CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How you all programmer+designer work?

    When working with CSS, I find it is best to design and build the site first for a standards compliant browser (My preference is FireFox). Then, when you have it looking right in that, check it for Internet Explorer and other browsers.

    For a design of any complexity, unfortunately, there will be time spent with multiple browsers open fixing a rule until it is consistant.

    And, how to master CSS?

    There are several improtant things to wrap your head around that will make your CSS life easier:
    The first I would learn is the Box model. That’s the official W3C article on the subject, which is quite long, so I’ll include an image below as well, which simplifies it a bit:

    alt text

    It’s important to note that browsers calculate this differently.

    Once you know what is causing things to size themselves, layouts should be easier to achieve in the same style as tables.

    The second that helped me wrap my head around what was going on was specificity This article helped me a lot with working this out. The essential summary is that each type of selector (element, class, id) has a weight attributed to it and if an element has a css value with a higher weight, then it will nt be overwritten.

    #id 0,1,0,0

    .class 0,0,1,0

    p 0,0,0,1

    1,0,0,0

    So, it doesn’t matter what your css files say, an inline style gets priority.
    Example:

    a {color: red;}                                               (0,0,0,1)
.class1 a {color: blue;}         Overwrites red               (0,0,1,1) 
#id1 a {color: green;}           Overwrites blue              (0,1,0,1) 
#id1 .class1 a {color: yellow;}  Overwrites green             (0,1,1,1) 
#id2 a {color: red;}             Overwrites green, NOT yellow (0,1,0,1) 
#id1 #id2 a {color: black;}      Overwrites yellow and red    (0,2,0,1)

    I’d still read the article. Twice.

    The third thing to learn is how to support previous browsers (like IE6) and the bugs with which they will plague you. I am a fan of this site: http://www.positioniseverything.net/
    They cover, with clarity and solutions, a great many of the browser bugs you will encounter when implementing cross-browser support with CSS.

    Some of the bugs you will likely encounter with IE6 are:

    • 0