Skip to main content

Should I write HTML or CSS first? [Resolved]

There are a lot of analogies for HTML/CSS development; which can be a bit confusing for a beginner.

  • HTML = foundations/house
  • CSS = walls/blueprint/wallpaper


Question Credit: Daniel
Question Reference
Asked May 16, 2019
Posted Under: Programming
10 Answers

You should build a house first, then paint it.



credit: Jukka K. Korpela
Answered May 16, 2019





and so on.

That's how I do it, anyway.

credit: Nicholas Orlowski
Answered May 16, 2019





credit: tdammers
Answered May 16, 2019

Even though this is a very old Q&A, I feel the need and responsibility to comment on it.

Yes, HTML should be written before CSS, however...

You do NOT write all HTML on the page, and then go back to write the CSS. This would make it extremely difficult to clearly remember the sections as you build it out, even with proper spacing and comments.

You build a website in layers, as if you are making a multi-layered cake.

1st Layer - First you build the base, the container div, with it's min-height and width css.

2nd Layer - Then you build the next layer, the large sections of the page (divs and styling for structure), such as rows or sections looking like columns.

3rd Layer and beyond - Then you keep adding within the second layer of sections.

In this way, you write some HTML, add then style it with CSS for the structure, rinse and repeat. In my experience, this is a much more effective way of building web pages, and in my opinion much faster than the alternative of all HTML first.

Lastly, try using " * { outline: 1px dotted red }" to get an outline of all your elements, as you add them on your page with styling, you can see their outline and not have to worry about guessing what it looks like until you add your background colors. I avoid border for this particular use case because borders add pixels on the elements, outline is an overlay.

Give it a try, thanks!

credit: Speros
Answered May 16, 2019


credit: Jakob
Answered May 16, 2019




credit: BillThor
Answered May 16, 2019

You've picked a really poor framing for learning and building.

There are two orthogonal issues at hand here.

  2. How do i learn to build a website?







credit: knowtheory
Answered May 16, 2019

As you comparing a web page to a house:

HTML = foundations/house CSS = walls/blueprint/wallpaper

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.

credit: Purvi Barot
Answered May 16, 2019
Your Answer