that presentation was presented by Bazlur Rashid as the part of participating in the learning session of teksymmetry/tawar Bangladesh team

1. Some Frequent Mistakes made with html and css Bazlur Rashid Tasawr Interactive 9th March 2010

2. 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

3. 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

4. By-passing writing css with html When 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

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

6. Not Concentrating on reducing the number of tags

7. Using inline styling The 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

8. Writing Identical Styles Separately It'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; }

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

10. Not using semantic class names Again 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?

11. Using px for font size Deprives 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.

12. 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" />

13. Questions ?