Html Css Mistakes

Html Css Mistakes

• 1.
  Some Frequent Mistakesmade with html and cssBazlur RashidTasawr Interactive9th March 2010
• 2.
  Issues to bediscussed-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 csswith 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
• 5.
  Ignoring Relevant TagsMakea 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
• 6.
  Not Concentrating onreducing the number of tags
• 7.
  Using inline stylingTheability 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 StylesSeparatelyIt'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 genericfont family. Often we just write font-family: ‘Myriad Pro’; instead of font-family: ‘Myriad Pro’, ‘Tahoma’ ,’Arial’;
• 10.
  Not using semanticclass 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?
• 11.
  Using px forfont 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.
• 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 ?