Experimenting with CSS and looking at HTML templates.

I wanted to move on to looking at and experimenting with possible HTML templates that I will be using for my design. I will be getting the templates from http://www.maxdesign.com.au/articles/css-layouts/ . I firstly will look at what possible templates are available and how they can be changed with CSS before establishing which would be most appropriate for my own design. 

This is just a basic HTML template. The web browser just displays the information in this way because at this point I have not used a style sheet or any CSS to structure the webpage.

However there is some structure to the page as within the HTML code certain rules have been used to separate the information into paragraphs (<p>), Headers (<h1>), and even a list (<li>) with links. This list has been given an id attribute (#navigation) to establish this as the navigation bar. This will not make any difference to the information contained inside this attribute at the moment, but when it come to styling this sheet it will make it easier because it means that only information for the nav bar, (the information inside the #navigation attribute) will be effected by the style rules for this division. So rather than applying a style rule to everything wrapped in a <li> tag I have created this division to allow me to have another list in my web page if I so desired which would not be styled in the same way the nav bar is. 

This is a screen shot of the HTML code in the web browser before the style sheet is linked.

And this is a screen shot to show after the HTML document and the CSS document have been linked. To link the documents together i will be using <link rel=stylesheet href="css.css" type="text/css" media=screen>. So now all of the rules in this CSS document will apply to the infomation in the HTML document once displayed in a web browser.  

Thsi of course is a very basic layout with on column. I wanted to look at a few more examples of templates avalible on  http://www.maxdesign.com.au/articles/css-layouts/.

This is an example of a two column lay out. This second column is added again by creating a id div (<div id="aside">) to separate this information form the main body text so that when it comes to styling the sheet with CSS this information can be identified and placed in the appropriate place so that when it is displayed using an internet browser it appears as below.

Below is an example of a liquid layout website. This means that the layout is not fixed and moves depending on the size of the browser window. This is interesting and definitely something to consider when choosing the lay out for my own web pages. However I think I do prefer the fixed layout design as all of the websites I have looked at during my research are fixed layout and this does not seem to inhibit its impact.

Above shows the same website in a smaller browser window, notice how the layout changes to fit the window.

I feel now that I have a greater understanding of how some simple CSS can dramatically change the appearance of a webpage when displayed in a browser. I also feel I now have a greater understand of the importance of classifications and id divisions and how they can aid the styling of a web page.

 I will now move on to looking at how I can alter these CSS template to structure the change the colours, font sizes/family, alignments, etc.