I'm curious how other developers are coding their pages: do you write your HTML or your CSS first when mocking up new page content? What do you feel are the benefits of your approach?

I traditionally am given a design to code, and write the mark-up HTML first. I then start coding my CSS. It will get to a point where I need to quickly tweak individual elements, and I'll start coding in-line instead in the .css file. At the end, I would clean up my in-line styles and find where I can put them in the stylesheet to keep order.

I'm considering moving to a more test-driven development approach, where I mock all of my CSS first, then code the mark-up. The thought is I will iron out all of my CSS first, and by defining how the CSS functions, will have essentially already written all of my mark-up structure. So coding the HTML is the easy part.

Thoughts on your current approach and my proposed "CSS-driven development?"

I usually start with a basic HTML structure, just a wrapper DIV, and elements I think will be needed for the top and footer parts of the site. Sometimes I'll throw in the structure I think will be required for the navigation, but it is a complex navigaiton, I'll wait till later.

After I have a basic HTML structure, I do some basic CSS: get the wrapper sized and positioned correctly, do the font-size defaults, and style most of the text how I think it should be defaulted.

Once I have what I think is a basic, but simple structure, I start to go back and forth working out the details. I try to think about details like reusable styles, and take some time to make comments in my style document, organizing it into sections that make sense to me. If the design calls for interactive content, I usually add a JavaScript library and have a script add a class to the BODY element so that I can "know" from my CSS document whether JavaScript is enabled.

Once I've worked out enough details to have a mostly complete template page, I remove whole sections of the template, parts which will be used commonly throughout the site, and place them into seperate files, to use as common includes. I do other things like connect to a database, create initialization files, etc.

Yes, I would say I work similarly to you Bruce. Once I have a design, I then start with the basics in html and then start adding the fancy coding in css. It just seems logical to me, but then again I'm still finding my way around css!

It really doesn't matter what you write first, but here's a good general rule when it comes to this question:

If you are designing a large site (dynamic based) then create your style sheet(s) first because you should have already planned out a color scheme for the site. Other wise, if it's a small site, then you should just do the html side first, then go back and do the css or even the body bgcolor would be fine to add since it's not too much to keep up with.

Hth,
-Brian

I did coding for a while, and I will be honest I do not even understand why in the world we would ever need to use css?
My whole web layout, including background colors, orientation and images is operated off of my SQL table, its so much more simpler, rather than having to look at painful code each time and decide what to change, you simply look into section for each and decide what you want to change.
If anyone disagrees please explain to me how css is better.
Also I guess I do not use css since I never bothered to get into it

When i build websites i am usually all over the place, but i start with a little html then get into the css.

i start with the psd and then move on to html

Hi There!!
Thanks for your suggestion.
I started with html today onwards.
I really appreciate your time and efforts.

Originally Posted by Cinatas

I did coding for a while, and I will be honest I do not even understand why in the world we would ever need to use css?
My whole web layout, including background colors, orientation and images is operated off of my SQL table, its so much more simpler, rather than having to look at painful code each time and decide what to change, you simply look into section for each and decide what you want to change.
If anyone disagrees please explain to me how css is better.
Also I guess I do not use css since I never bothered to get into it

Got any examples of this? It sounds a bit crazy.

I do the basic HTML first after creating the design in PS. I've been trying a 960 grid system recently. Seems fast and easy.

I progressively work my way down starting with the header bouncing back and fourth from html to css.

I wrote my HTML first, considering I will do mostly "skeleton" coding and then I write my CSS. Like every other person, a web page should have hand, feet, arms and legs, not to mention a body and a head. CSS just says what these features look like.

I do both. As soon as I create new HTML element, I describe it in CSS immediately and continue working on other elements. I found it works bets for me.

The first thing that I do is I write HTML first the test it. If my structure was complete I construct separating CSS.

Comparing a web page to a house:

HTML = foundations
CSS = walls

How are you going to float the walls in mid-air until you build the foundations that they sit on? How can you write CSS to style your page until you have the HTML tags written that you are applying the styles to.

Each piece of CSS is styling specific HTML tags. Those tags need to exist in order to be able to style them. If you have no HTML to style then the CSS file should be empty as any styles in it are redundant as they don't actually style anything. So its essential to write HTML code first.

Originally Posted by printrobin

Comparing a web page to a house:

HTML = foundations
CSS = walls

How are you going to float the walls in mid-air until you build the foundations that they sit on? How can you write CSS to style your page until you have the HTML tags written that you are applying the styles to.

Not a perfect analogy, however. It isn't incorrect to start with some CSS. Take the example of the CSS reset, which is very common and recommended. If one uses the same reset every time, it wouldn't be wrong to set it up before writing any HTML. Also, what if you know what all of the text colors are going to be? This is a common thing to know, since there is usually a design before any code is written. Is it required that you write some text before applying color to it? After all, there is usually going to be a default color.

It depends who's more comfortable with what.

I usually start with a CMS

First I make graphic layout then I work on both html and css and scripting as well.

I don't think coding with all that HTML and css is best way.
I personally use wordpress in all of my site and edit already made wordpress plugins , themes to gain website versatility.

I kinda do my css while i do my html,
you know lol
as i work in HTML I code Css too lol

Being a developer I take the most straightforward approach of doing HTML and CSS together