Useful Things

All browsers

HTML 5 template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML Template</title>
  </head>
  <body>
    <p>Insert content here.</p>
  </body>
</html>

XHTML template

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      
    </title>
  </head>
  <body>
    
  </body>
</html>

External style sheet

<link rel="stylesheet" type="text/css" href="" />

Style element (in head element)

<style type="text/css">
  /* style rules ... */
</style>

External javascript

<script type="text/javascript" src=""></script>

Script element (in head or body elements)

<script type="text/javascript">
//<![CDATA[
  /* scripts ... */
// ]]>
</script>

Collapsing margins example

list item text inside a p element

a paragraph following the unordered list

<ul>
  <li>
    <p>
      list item text inside a p element
    </p>
  </li>
</ul>
<p>
  a paragraph following the unordered list
</p>

Specifying media types

<style type="text/css">
  @import url(includes/screen.css) screen;
  @media print {
    /* style rules for print go here */
  }
</style>

Internet Explorer remedies

Conditional comment with link to external style sheet

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie_only.css" />
<![endif]-->

Transparency (alpha)

#mask {
  filter:alpha(opacity=75);
}

PNG transparency (alpha image loader)

#element_id {
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'image.png');
}