Dress Up HTML With CSS

So far, our basic web designer knows how to write HTML and can run web applications on a web server. He has designed a mockup UI for the timecard utility, and although it doesn't do anything yet, it can be used to polish requirements. This is a followup to Simple Applications On Basic Web Servers. The prototype so far doesn't offer much visually and does not look that professional, so our goal here is to make it somewhat visually appealing. You do this with CSS.

You'll be surprised how many web designers and programmers out there have no idea or do not know how to use Cascading Style Sheets (CSS). I was one of them - I was comfortable doing database and business logic programming that I did not care much for how content was presented - that was another team's responsibility. However, as I began owning whole projects, I found it necessary to understand the presentation of content. It not only makes me a more well-rounded developer, but has affected how I do development. Thanks to my friend Ben who helped me get started. [By the way, Ben runs the BenTedder.com web design business].

Basically, CSS defines how HTML elements are displayed. All major web browsers support rendering web pages with style using CSS. There's several tutorials and books on CSS - it might be advisable to invest in a current desk reference, although you can find pretty much everything you want by simply searching the web. Theres even websites that have complete templates and programs you can use to generate CSS code for you. Although they make work easy, sometimes it's better to know how things work under the hood - whole reason to read up on CSS and learn to manually write code. The W3C CSS Tutorial is a good place to start; reference books you buy should be advanced beyond the basics on that site.

Here are some advantages of using CSS, including ability to make layout and visual changes for multiple pages from a single point, reduction of HTML code base, separation of style from content, and ease on search engines (find content rather than style). You should always know though that different browsers behave a little differently to CSS. Your best bet is Firefox to do better, as it is more compliant to standards than Internet Explorer is.

There are several CSS Editors on the Internet, most of them free or open-source. There are applications too that can generate both HTML and CSS through a visual design process (Adobe Dreamweaver MX??). The NetBeans 6.0 (M10) IDE also includes a CSS editor, which we will use to dress up our timecard application.

1. Add a CSS file: File | New File. Web -> Cascading Style Sheet [Next]. Name the file (maintimecard), and specify a folder (style) [Finish]. Will be accessible as style/maintimecard.css.
   
2. Edit the CSS: NetBeans' editor has quite a lot of features including code highlighting, code completion, macro recording, style builder, and preview. At this stage, we don't need to be looking for another editor.
3. Link the CSS to the HTML file and update the HTML: you'll have to manually edit index.jsp to link to the CSS file and the HTML to use CSS styles specified. Here is the CSS and HTML code.
4. Deploy the application.

When you display the application now in a browser, it looks like this. (IE shows a slightly different look, especially that it misses showing the dotted line right below "work hours" line).


How about that? We even add the idea of displaying messages to the user right in the form. Visually, this is a far cry from the basic HTML look we did before.
When I do development though, visual appeal is the last thing I worry about. Usually, you design your business logic first, then the database, and finally the presentation (HTML and such) when you know everything else works. In some projects, visual components are not polished until a later version of the software.