CSS Practice

Introduction

This is the first lesson on Advanced Web technologies and development. The technologies discussed in this lesson where HTML /XHTML and CSS. Both of these technologies are responsible in giving presentation and structure to most of the information on the Web. Previous to the task given for this week we had to set up a blog on which we will document our progress and experience on a weekly basis.

Objective

To enhance our XHTML and CSS skills this week we had to look at http://www.csszengarden.com which is a web page constructed from said technologies and apply a new CSS style sheet without changing the information structure of the document. A link on the site provided the necessary files to do just that.

Methodology

To start with I took a look at the CSS being used in the background (i.e. body selector) and found that images were being used by using the background declaration property. I replaced the images being used with an image having 1px width and used the repeat-y attribute to repeat the image along the y axis of the background. Repeating an image is more efficient than placing an image having the whole width since it takes less time for the browser to download a 1px image and the image will fill the window irrespective of the window dimensions.

From there I changed the font colour and family by using the font declaration and a combination of attributes found under this property like family, size , weight and variant. Margin and padding are two very useful properties, by using them extensively with the border property I found that these properties together provide the layout of a web page. I used the border extensively to find were a particular div or element is placed on the screen with precision.  

The margin allows for a negative value which instead of placing the selector in front of the current position the selector is moved to the other direction. This is particularly helpful when you want a selector to be in a different position then the rest of the elements.

I also found a neat trick on how to remember where values should be place to effect a selector position i.e. (top,right,bottom,left) with the following properties : margin, padding and border. All one has to remember is “trouble” or "trbl"which leads to

t - top,r -right, b -bottom, l left.

e.g margin:10px 5px 6px 7px

One of the css properties which I had never used before is what is known as a pseudo-element. This piece of syntax is used to add a specified style to the first line of text in the element selected.

Conclusion

To conclude on this week’s blog entry I would like to display the before http://www.csszengarden.com web page and the same web page with the same structure and information but different css style sheet.

Before

After