Adding some style to your web page

Posted Apr 16, 2003
Last Updated Oct 31, 2011

It doesn’t take too much know-how to make a legitimate web page. All you have to learn is a few HTML tags and you can publish your entire life on the World Wide Web.

According to most text-books on web design that I’ve read, HTML was a godsend to the academic and scientific world that first used the Internet. HTML was, to begin with, only meant to present formatted information to the scientific community. As such, there wasn’t much of a consideration for the visual aspect of a web page.

Whether or not the original pioneers of the web were truly only focused on the text-based presentation of the web is questionable, in my opinion. But whatever the original vision was, the concept of a web page has changed immensely since its inception.

It’s very hard in today’s world to image a text-based Internet. If you are like me, you shy away from pages that are visually boring. And while we are all familiar with the adage that looks can be deceiving, none of us can avoid pretty things.

Browsers have added support for controlling the look of a web page through object properties which can be manipulated by any web developer. By learning to control these styles a web can very well control the look of his page. He can make a section of text red and the next bit of text blue with a red border at top and bottom.

Most of the objects you can place on a web page can be controlled with a standard set of object properties. With these properties you can control text color, border color, background color, margins, line height, word spacing, text alignment, background images and more.

Even if you do not define any style in your HTML, the browser still applies style to the document. It applies default values to all properties that you have the power to control.

Applying style to a web page object is simple. The following example HTML produces the proceeding paragraph:

<p style="color: white; padding: 50px; margin: 0px; border-style: solid; border-width: 2px;border-top-color: red; border-bottom-color: red; border-left-color: black; border-right-color: black; background-color: blue; line-height: 18px; font-size: 14px; text-align: justify" >This text is white on a blue background. The top and bottom borders are red, while the left and right borders are black. The font size is 12 pixels, and the line height is 17 pixels. There is an area of padding that is 50 pixels surrounding the text. The text is justified. </p>
 

This text is white on a blue background. The top and bottom borders are red, while the left and right borders are black. The font size is 14 pixels, and the line height is 18 pixels. There is an area of padding that is 50 pixels surrounding the text. The text is justified.


Using style in your web page can increase the visual appeal of your page. It’s an effective way to add colorful flavor without increasing download times much (like photos and graphics do).

A very useful site for learning to use style is W3 Schools. You can also refer to the and The World Wide Web Consortium CSS page.

Also, here is a video tutorial on dynamically changing styles with JavaScript.

Comment

No HTML Tags are permitted.

Angry Teapot Level Design Awards

Newsletter Subscription