HTML/CSS

Well here it is, my first ever blog post! My name is Daniel Vella and I am currently studying for a degree in Internet Application Development at Middlesex University. The plan is that I keep this blog updated at least on a weekly basis as a web log of my experience with various tasks in this module as well as anything I may find interesting and worth sharing.

This week’s topic was HTML/CSS; we all downloaded a copy of the sample HTML and CSS files from csszendgarden.com which is one of the best examples available of good practices when it comes to both HTML and CSS. The HTML file just contains data and the styling is all done in an external CSS file.

Our task was to experiment with the layout of the downloaded sample website without modifying the HTML document.

I experimented with most of the preset selectors in the sample CSS file as well as created new selectors to perform styling changes such as

• Redisplay of the hidden h1 and h2 to show the page title as text    
• Hyperlink styling by modifying the anchor tag selectors -  a:link, visited, hover, active
• Background colours/images
• Sizing attributes of various divs throughout the page

Issues with Cross-Browser CSS

Anyone who has spent more than a minute experimenting with CSS will notice that sometimes the same page is displayed differently on different browsers. In most cases this is caused by not explicitly defining attribute values in the style sheet, when no values are set the browser will use its own default values resulting in the same page being rendered differently on various browsers. The margin and padding attributes are usually to blame here.

A simple trick would be to set the following wildcard selector at the top of the CSS file

* {

            margin: 0;

            padding: 0;

}

This will effectively set the margin and padding values of all elements on the page to 0, so if you do not specify these values anywhere in the CSS file the default value used would be 0 and not the browser specific value.

A more robust solution is the use of a CSS reset style sheet – all this does is resets – or more correctly sets the styles for all elements to a common baseline where all attribute values have been explicitly set, this prevents browser default from being used whenever a an attribute value has not been specified.  A commonly used reset style sheet is YUI – Reset CSS http://developer.yahoo.com/yui/reset/