Top
Home

Practice for Selectors

Learn how to use the various selectors in CSS



<meta name="viewport" content="width=device-width">

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ID, Class, Tag, psuedo, and compound</title>

<style type="text/css">
#container {
width: 960px;
margin-right: auto;
margin-left: auto;
border: thin solid #000000;

}
#left {
margin: 5px;
height: 420px;
width: 307px;
border: thin solid #000000;
float:left;
}

#middle {
margin: 5px;
height: 420px;
width: 307px;
border: thin solid #000000;
float:left;
}

#right{
margin: 5px;
height: 420px;
width: 307px;
border: thin solid #000000;
float:left;
}
</style>


</head>

<body>

<div id="container">

<div id="left">
<h1>Left</h1>
<P><strong>This is the Practice page</strong> and you are looking at filler Text. It will be replaced when <em>content is received</em>. Duis interdum egestas ante et imperdiet. Cras felis odio, pretium et lobortis ac, dapibus eu velit. Pellentesque vehicula porta scelerisque. Vivamus 2015/01/20-16:09 <a href="http://en.wikipedia.org/wiki/Pan-African_flag" target="_blank">nec ligula est</a>. Suspendisse Practice ac consequat leo.</P>
</div>


<div id="middle">
<h1>Middle</h1>
<P><strong>This is the Practice page</strong> and you are looking at filler Text. It will be replaced when <em>content is received</em>. Duis interdum egestas ante et imperdiet. Cras felis odio, pretium et lobortis ac, dapibus eu velit. Pellentesque vehicula porta scelerisque. Vivamus 2015/01/20-16:09 <a href="http://en.wikipedia.org/wiki/Pan-African_flag" target="_blank">nec ligula est</a>. Suspendisse Practice ac consequat leo.</P>
</div>


<div id="right">

<h1>Right</h1>
<P><strong>This is the Practice page</strong> and you are looking at filler Text. It will be replaced when <em>content is received</em>. Duis interdum egestas ante et imperdiet. Cras felis odio, pretium et lobortis ac, dapibus eu velit. Pellentesque vehicula porta scelerisque. Vivamus 2015/01/20-16:09 <a href="http://en.wikipedia.org/wiki/Pan-African_flag" target="_blank">nec ligula est</a>. Suspendisse Practice ac consequat leo.</P>

</div>


<div style="clear:both"></div>


</div>


</body>
</html>