Brief Review of Styling with HTML

Back when websites were just emerging the colors and styles were applied using the HTML formatting. Fonts, color, background colors and other style elements were manipulated using HTML. Below is an example using only HTML styles:

And looks like this:

This text is the largest Heading Tag – h1

This text is the second largest heading tag – h2, and blue

This text is strong and a size ’5′ font

This text is big

This text is emphasized and in the color red

This text is italic

This text is small

This is _subscript and ^superscript

 
The layout of a website was generally built using tables. The code below is an example of using tables in a layout. They also are examples of using cellspacing and cellpadding to control white space around elements in the table cells.

The major drawback to HTML formatting is its lack of complexity and the ability to move beyond the grid. That is why websites in the past seem more ‘blocky,’ rigid, and limited in style. The advent of a new type of styling for HTML websites, called CSS changed this and opened the door to modern web design.

Major Benefits to Using CSS Styles

CSS stands for Cascading Style Sheets and represents a specific code used to style HTML web pages. CSS can style headers, paragraphs, tables, text, images, layout, colors, whitespace, width, height, backgrounds, create patterns, and so on. Basically, CSS can style ANYTHING (including forms and input fields) created in HTML. It far surpasses the limitations of HTML styles in many ways. Foremost, it is more organized and creates the ability to apply ‘global styles’ – styles that apply to every page on a website. Yet, the most distinguishing difference between CSS and HTML styles is in positioning and layout. CSS positioning allows the web designer to put ‘divs’ or layout blocks/divisions anywhere on the screen/web page, overlap elements, and determine the order in which the elements overlap. Since HTML styles rely on tables for layout (described above), it cannot overlap elements on a web page.

Positioning is a more advanced technique in CSS and takes some getting used to. It most likely will be the hardest topic when learning CSS code. Absolute positioning allows the web designer to put a element (HTML tags such as <div></div> or <p></p> that articulate a ‘block’ of information, including text, images, and links) anywhere on the screen or page. You can even have a ‘fixed’ absolutely positioned element that stays in the same place on the screen while the rest of the page moves. Sometimes this is used for navigation when a page is really long. Relative positioning allows the designer to move any element from its original space on a website . The original or static space of an element is dictated by the xhtml/html code for that page. A positioned element can also overlap using CSS code. The designer can determine the arrangement of overlapping levels using the z-index CSS property.

Applying Cascading Style Sheets – CSS styles

This code can be placed directly on the web page in the head section using the tag:

 
Or in the html code like this:

 
Or saved as a separate document with the extension ‘.css’ (i.e. example.css) and linked to in the head section of the webpage like this:

Conclusion

Mastering CSS will allow your web design to reach new heights. The only way a web designer can fully realize their design for the web is using CSS styles. In fact, the number one indication of a dated website is the use of tables and HTML styles. Using style sheets has a cerebral advantage as well. The xhtml code used for a web page should address just basic structure of the website. That way the designer can focus on the foundation of the page and make sure it is solid before adding all the styling, which is essentially decoration. In addition, having all the styles on a separate sheet makes it easier to work with other web designers and developers because one sheet can refer to the whole website. That way you can change a global style in one place, rather than going through every page on a website and changing the style on every one. Moral of this post, learn and master CSS if you want to create excellent web sites.

Works Cited
“CSS Positioning.” W3Schools Online Web Tutorials. N.p., n.d. Web. 30 June 2011. <http://www.w3schools.com/css/css_positioning.asp>.