Some Frequent Mistakes made with html and cssBazlur RashidTasawr Interactive9th March 2010

Issues to be discussed-Not initializing the tags-By-passing writing css with html-Ignoring Relevant Tags-Not Concentrating on reducing the number of tags-Using inline styling-Writing Identical Styles Separately-Not declaring generic font family. -Not using semantic class names-Using px for font size-Not Using alter tags for images

Not initializing the tags* { margin: 0; padding: 0;}a { color: #f00; text-decoration: none}a: hover { color: #0f0; text-decoration: underline}We can also apply various style to other tags like headers, label, textareaand other input types

By-passing writing css with htmlWhen need to leave a gap to the top of a box easy to write <div>&nbsp;</div> or <br /> than writing “margin-top” in the css file

Ignoring Relevant TagsMake a div like heading rather using the tags h1, h2 …. Making a div like label, p, span rather using those tagsMaking a div like label, p, span rather using those tags

Not Concentrating on reducing the number of tags

Using inline stylingThe ability to add style to a tag by using the style=”" attribute can be handy, but it also sort of defeats the whole purpose of using CSS

Writing Identical Styles SeparatelyIt's common to see a style applied to many different elements, even though the style is the same. Leave the style off each separate element and style them all in one go later on, like this:h1, p, #footer, .intro { font-family:Arial,Helvetica,sans-serif; }

Not declaring generic font family. Often we just write font-family: ‘Myriad Pro’; instead of font-family: ‘Myriad Pro’, ‘Tahoma’ ,’Arial’;

Not using semantic class namesAgain going back to being able to easily change the style of a site using CSS, keep in mind that your site will likely change when naming your tag classes. Using the class name “bigyellowbox” might seem like a good idea now, but in a couple of years will it still make sense when you change the colour to blue?

Using px for font sizeDeprives IE to change the font-size:1em is equal to the current font size. The default text size in browsers is 16px. Set font-size to 62.5% in body style if the default font-size to be set is 12px. So, the default size of 1em is 12px.

Not Using alter tags for images Happy to leave like <imgsrc="images/logo.jpg" width="23" height="13" border="0" alt="" /><imgsrc="images/user.jpg" width="23" height="13" border="0" alt=“tasawr" />

Questions ?