What should be written first, XHTML or CSS?

Question

What should be written first while making CSS layouts XHTML code or CSS code?

1. Write Whole HTML first then write CSS according to HTML
2. Write HTML for an design element and CSS simultaneously
3. Write whole CSS first then write HTML according to HTML

I read on this article's point # 7 "Create Your HTML First" is this advice best to follow?

Edit:

and in this tutorial author also write HTML First then write css using Edit CSS option of web developer toolbar i think this is best way.

Answer 1

In practice, you generally wind up needing to intermingle the two. Start out with HTML to rough out the basic areas of your design, then work in CSS around that rough idea. Typically you'll find yourself needing to add some more markup to allow for additional flexibility (perhaps you need a couple of nested containers to properly align something, et cetera).

Answer 2

I usually go with the second option:

Write HTML for an design element and CSS simultaneously

This really helps, for example, when I am writing html, i write the CSS along the way too which helps me quickly spot any possible layout or cross-browser compatibility issues. If i wrote whole html first and then css, then things become little complicated and you have hard time correcting/styling the entire html which you already created.

As for the link you provided, i would simply say author has his own view and personal way of working. In other words, this also depends which way you are most comfortable with or rather fast.

Answer 3

You can't write CSS before writing the HTML (except for the body tag!), or you'll be working like a blind.

For me, I make a mock-up of the website layout, write down the whole HTML and then write CSS that just makes the layout.

I use Expression design to slice images and add/modify HTML/CSS until I get the final template.

Answer 4

I don't like the idea of going back and forth with code. If I'm at #header in html, it seems pretty logical to me to stylize the header right now. Is good for my mental sanity :D

So I go with the second option: I wrote code simultaneously.

Answer 5

You have to write HTML before CSS.

Your question is like, Is it better to design a car Interior, before having a car ?

Is it possible ? or Is it a intelligent work ?

Answer 6

Given that most designs are not simple, and following basic semantical rules, you will always need to adjust the html code when trying to get the layout looking as you have in mind. So doing both simultaneously is probably the most pratical way, although the other two options work as well; You just need to made adjustments then later.

Answer 7

Sorry , I am not choosing anyone of these..

In first you can't able to write the whole css for your page. although it's better you should write the common css classes and page layouts in the first.ie, after creating the page layout , you just design the page using table or div tags. after , while adding controls to the pages , you just identify the common styles u are using. These styles you can use like css classes. or seperate id. I am following this method for my designing.

i think its better.

Answer 8

By creating the HTML first, you can guarantee what the page will look like on the most basic browsers - it'll be legible on an old phone, everything's in logical order, and you aren't forcing screen readers to recite your site navigation first thing on every single page. That's design #1.

Design #2 is the CSS part, where you actually make things look visibly decent without limiting your user base.

Not that they can't be done simultaneously, mind. Just that's most likely what the author of that article was trying to get at.

See also: Progressive Enhancement.

Answer 9

I personally write much of the CSS first, then HTML, then tweak the two together - one page at a time (apart from common elements). At first it sounds counter-intuitive, but when you think of the CSS as not only styles but as elements that either have a style or have a style of nothing, it's actually very fast and produces lean code.

Once I've got some core styles in place, the HTML is just a question of...

<wrapper>
<div header>
<div this>
<div that>
<form>
<div footer>

... and it all slots roughly into the styles and layout that I've already defined. For elements that needed no styling, I just mentally skipped over when writing the CSS.

Answer 10

My 3 cents:

What's the goal of the webpage? Most of the time that goal is strongly related to it's content.

Thus, the first thing is content. HTML gives content gets it's semantics. CSS gives the semantics a context.

So the order:

1. content
2. html
3. css

But of course, it's an iterative process.

Answer 11

I write them at the same time, iteratively, in modules.

I will build out the general template (or base template) in html/css, do a full cross-browser test, then move on to the additional templates.

This fits in well with .net where I'm using master pages and nested master pages.

I may change this behaviour once IE6 is off the books, as you often have to completely restructure your markup to accommodate it.

Answer 12

I used to ponder about this long ago, when designing websites.

My conclusion was, and I believe it still stands today, that even though XHTML and CSS are meant to be isolated from each other as content and presentation respectively, the reality of the matter still makes the look of the website pretty much depend on the document structure - i.e. markup, XHTML - and thus CSS alone will not give you the magic wand to make your website change its look completely based on a stylesheet. I wish it were so however - certainly, that is the main purpose of CSS. And certainly, that would be the beauty of it - since each is completely isolated from the other, website developers can in peace of mind program the structure of the website documents, almost while the CSS authors can work in parallel and write the stylesheets. Then both are combined, and with the knowledge that the markup does not need to be changed ever again. That is the theory anyway.

In practice this often fails to work - because a document has a top-to-bottom left-to-right (usually) bound semantics, it becomes difficult to for instance, make an element appearing at the bottom of the document structure, appear at the top of the browser page to the user. The limitations work against the theory.

Because of the above implications, and some other real-world limitations of the CSS and markup technologies, I have decided to simply consider markup as something in between the content and the style. I.e. some of the markup will unfortunately dictate style, no matter stylesheet - the sequence of elements being one (see above), pagination limitations, etc - and so, while most of the structure may be isolated from its appearance, some of this appearance will be dictated by it. For this reason, if we don't regard client side scripting (which may aid styling by re-arranging elements of a document) - one way to do it is use XML as content, XHTML as content-style hybrid layer, and CSS to finally dictate the appearance.

Where does XML come into this? Well, you transform (either in browser or server-side) it with XSLT into a XHTML document, which you consider as relevant in the styling process. I.e. if you have an artist list of 1000 entries, and you want to customize how the page looks like, you use the following content XML:

<artists>
    <artist name="Moby" />
    <artist name="Cocorosie" />
    <!-- and so on -->
</artists>

This is considered as an unchanging content, no matter the final style - part of the point of separating content from presentation, something you could not have done fully with XHTML because CSS cannot do certain things. With XSLT however, you can further transform the above into a desired markup ( you can then apply CSS to):

<xsl:transform>
    <!-- XSLT is beyond the scope of this... -->
</xsl:transform>

will transform the XML into something like:

<h1>Artists</h1>
<h2>Page 1 of 10</h1>
<ul>
    <li><a>Moby</a></li>
    <!-- Only 100 artists per page -->
</ul>

And then you style it.

Bottomline is, you get to control each point of the transformation of your raw database content into final end-user application.

Much of what XSLT does with XML, can be instead done with JavaScript on XHTML, but I consider client-side scripting an addition, not replacement to things like XSLT. Then again, Firefox and most other modern browsers can do XSLT client-side, which blurs the distinction between scripting and document serving.

Answer 13

I'd go with the second option. HTML in todays web dev is seen as a template to hold content. CSS should be used to format the layout and content within the web page.

Because of this, HTML and CSS should be used parallel in creating web-pages and individual elements.

Answer 14

I think it's a mistake to do one before the other. Programming is an iterative process. Write them both until you have something small that works, then do it again. Build on it. Iterate.

If you write just HTML without writing any CSS, you'll find out later that you'll have a bunch of technical debt that needs to be paid off.

Answer 15

It really depends how big is your site... If it's a small website the order doesn't matter. If it's a big website i generally design basic structure in HTML then basic CSS and then move to details in HTML and then CSS.

Few advices.

1. re-use already made CSS and HTML. ie. if you already have template with basic HTML wrappers save it for the next project or page or if you set all images to border:none in your CSS you can easily save some CSS file with basic settings
2. see an object in your head before designing it
3. check in 5 major browsers (ie6 ie7 ie8 chrome and firefox)