Session 04 - CSS
Examples

Example 4.1 - Border Styles
<h4>Dotted</h4><p class="border1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas. </p><h4>Dashed</h4><p class="border2"> Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor.</p><h4>Outset</h4><p class="border3"> Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui ac massa. </p><h4>Solid</h4><p class="border4"> Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor. </p><h4>Double</h4><p class="border5"> Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt. </p><h4>Groove</h4><p class="border6"> Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam. </p><h4>Ridge</h4><p class="border7"> Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa. </p><h4>Inset</h4><p class="border8"> Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque. </p>body { font-family: tahoma,arial,sans-serif; font-size: small; } p { margin: 1em; padding: 1em; } p { width: 30%; } .border1 { border: thin dotted #900; } .border2 { border: medium dashed #090; } .border3 { border: thick outset #009; } .border4 { border: 3px solid #999; } .border5 { border: 5px double #000; } .border6 { border: 10px groove black; } .border7 { border: 15px ridge black; } .border8 { border: 20px inset #900; }
Example 4.2 - Margin, Padding, Border
<p class="about"> Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</p><p> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </p>.about { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }
Example 4.3 - float: none;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>img { float: none; border: thin dotted black; padding: 5px; }
Example 4.4 - float: right;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>img { float: right; clear: none; border: thin dotted black; padding: 5px; }
Example 4.5 - float: right;
<div><div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</div><div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div></div>.about { float: right; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }
Example 4.6 - float: left;
<div><div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</div><div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div></div>.about { float: left; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }
Example 4.7 - float: right; clear: none;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>img { float: right; clear: none; border: thin dotted black; padding: 5px; margin: 5px; } p {line-height: 1.5em;}
Example 4.8 - float: right; clear: right;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>img { float: right; clear: right; border: thin dotted black; padding: 5px; margin: 5px; } p {line-height: 1.5em;}
Example 4.9 - float: right; clear: left;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>img { float: right; clear: left; border: thin dotted black; padding: 5px; margin: 5px; } p {line-height: 1.5em;}
Example 4.10 - clear: none;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>p { clear: none; line-height: 1.5em; border: thin solid red; } img { float: right; border: thin dotted black; padding: 5px; }
Example 4.11 - clear: right;
<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>p { clear: right; line-height: 1.5em; border: thin solid red; } img { float: right; border: thin dotted black; padding: 5px; }
Example 4.12 - overflow: auto;
<p class="airplane"><img src="http://cscie12.dce.harvard.edu/resources/images/777-t2-1.png" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p class="airplane"><img src="http://cscie12.dce.harvard.edu/resources/images/777-t2-2.png" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p class="airplane"><img src="http://cscie12.dce.harvard.edu/resources/images/777-t2-3.png" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis.</p>p.airplane { clear: right; line-height: 1.5em; padding: 1em; margin: 1em; border: medium solid blue; overflow: auto; } .airplane img { float: right; border: thin dotted black; padding: 5px; }
Example 4.13 - float left and right
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><footer><nav class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a> | <a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></nav><nav class="global"><a href="http://www.harvard.edu/">Harvard University</a> | <a href="http://www.extension.harvard.edu/">Extension School</a></nav></footer>footer { background-color: #fcf; border-top: thin solid #333; } footer nav.course { float: left; } footer nav.global { float: right; } footer nav { padding: 0.25em 0.5em 0.25em 0.5em; font-size: 0.8rem; font-family: helvetica, sans-serif; } footer nav a:link, footer nav a:visited, footer nav a:hover, footer nav a:active { text-decoration: none; color: navy; font-weight: bold; padding: 0.25em; } footer nav a:hover { color: #fff; background-color: navy; }
Example 4.14 - float left and right and parent footer
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><footer><nav class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a> | <a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></nav><nav class="global"><a href="http://www.harvard.edu/">Harvard University</a> | <a href="http://www.extension.harvard.edu/">Extension School</a></nav></footer>footer { background-color: #fcf; border-top: thin solid #333; overflow: auto; } footer nav.course { float: left; } footer nav.global { float: right; } footer nav { padding: 0.25em 0.5em 0.25em 0.5em; font-size: 0.8rem; font-family: helvetica, sans-serif; } footer nav a:link, footer nav a:visited, footer nav a:hover, footer nav a:active { text-decoration: none; color: navy; font-weight: bold; padding: 0.25em; } footer nav a:hover { color: #fff; background-color: navy; }
Example 4.15 - Making a grid: setting width but not height
<ul class="gallery"><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-4.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-5.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-6.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</li></ul>.gallery li { float: left; width: 150px; padding: 5px; border: thin dotted #ccc; margin: 5px; text-align: center; font-size: x-small; list-style: none; } #gallery li img { padding-top: 5px; } body { font-family: arial,helvetica,sans-serif; }
Example 4.16 - Making a grid: setting height and width
<ul class="gallery"><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-4.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-5.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-6.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</li></ul>.gallery li { float: left; width: 150px; height: 150px; padding: 5px; border: thin dotted #ccc; margin: 5px; text-align: center; font-size: x-small; list-style: none; } #gallery p img { padding-top: 5px; } body { font-family: arial,helvetica,sans-serif; }
Example 4.17 - label as inline
<form method="post" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><label>Name <input type="text" name="name"/></label><label>Email <input type="email" name="email"/></label><input type="submit" value="Submit"/></form>
Example 4.18 - label as inline
<form method="post" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><label>Name <input type="text" name="name"/></label><label>Email <input type="email" name="email"/></label><input type="submit" value="Submit"/></form>label { display: block; margin: 1em;} input { display: block; } input[type=submit] { margin: 1em;}
Example 4.19 - Background Image with CSS
<div style="margin-left: 45%; margin-right: 45%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>body { background-image: url('http://cscie12.dce.harvard.edu/resources/images/shield-background.gif');}
Example 4.20 - background-repeat: repeat-y
<div style="margin-left: 45%; margin-right: 45%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>body { background-image: url('http://cscie12.dce.harvard.edu/resources/images/shield-background.gif'); background-repeat: repeat-y; }
Example 4.21 - no-repeat and fixed
<div style="margin-left: 45%; margin-right: 45%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>body { background-image: url('http://cscie12.dce.harvard.edu/resources/images/shield-background.gif'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
Example 4.22 - background images
<div class="wood"> Wood <div class="marble"> Marble <div class="water"> Water </div></div></div>body { font-size: 18pt; font-weight: bold; color: white; } div.wood { padding: 1em; background-image: url('http://cscie12.dce.harvard.edu/resources/images/wood.jpg'); } div.marble { background-image: url('http://cscie12.dce.harvard.edu/resources/images/marble.jpg'); padding: 1em; } div.water { background-image: url('http://cscie12.dce.harvard.edu/resources/images/water.jpg'); padding: 1em; }
Example 4.23 - Web Content Management
<ul class="topic-header-menu"><li><a class="icon-replace act-edit" title="Edit this Topic Box" href="...">Edit</a></li><li><a class="icon-replace act-maximize" title="Maximize this Topic Box" href="...">Maximize</a></li><li><a class="icon-replace act-print" title="Print-friendly view of this Topic Box" href="...">Print</a></li></ul>
Example 4.24 - External Hyperlnks
<p>A bonus of attending <a href="http://www.summer.harvard.edu/">Harvard Summer School</a> is being able to enjoy <a href="http://www.harvardsquare.com/" class="external">Harvard Square</a> in <a href="http://www.cambridgema.gov/" class="external">Cambridge</a>, <a href="http://www.mass.gov" class="external">Massachusetts</a>. </p>a.external { padding: 2px 25px 2px 0px; display:inline; background-repeat: no-repeat; background-position: center right; background-image: url('http://cscie12.dce.harvard.edu/resources/images/external.png'); }
Example 4.25 - background images
<h1 id="ustitle">United States Constitution</h1><div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libero. Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pharetra turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilisi. Integer euismod cursus erat. </div>#ustitle { height: 80px; background: #ddd url('http://cscie12.dce.harvard.edu/resources/images/flag-small.png') left center no-repeat; margin-bottom: 0.5em; } #ustitle { padding-top: 0.5em; text-align: center; font-family: tahoma,arial,helvetica,sans-serif; }
Example 4.26 - Ordered List: default
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ol><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski<br/> Bill Self</li><li>Sean Miller</li><li>Brad Underwood</li><li>Dave Rose</li><li>Gregg Marshall</li><li>Ray Harper</li></ol>
Example 4.27 - Ordered List: upper-roman
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ol class="basketball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski<br/> Bill Self</li><li>Sean Miller</li><li>Brad Underwood</li><li>Dave Rose</li><li>Gregg Marshall</li><li>Ray Harper</li></ol>ol.basketball { list-style: upper-roman; }
Example 4.28 - List with images as bullets
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ul class="basketball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski<br/> Bill Self</li><li>Sean Miller</li><li>Brad Underwood</li><li>Dave Rose</li><li>Gregg Marshall</li><li>Ray Harper</li></ul>ul.basketball { list-style-image: url('http://cscie12.dce.harvard.edu/resources/images/basketball.gif'); }
Example 4.29 - list-style: none;
<ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; }
Example 4.30 - list-style: none;
<ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; padding-left: 0; } ul#extglobalnav li { display: inline; padding-left: 2em; }
Example 4.31 - a pseudo-classes (link, visited, hover, active))
<ul><li><a href="#about-us">About Us</a></li><li><a href="#courses">Courses</a></li><li><a href="#registration">Registration</a></li><li><a href="#degrees-certificates">Degrees & Certificates</a></li><li><a href="#distance-education">Distance Education</a></li><li><a href="#exams-grades-policies">Exams, Grades, & Policies</a></li><li><a href="#resources">Resources</a></li><li><a href="#news-hub">News Hub</a></li></ul>a:link { text-decoration: none; color: blue; background-color: white; } a:visited { text-decoration: none; color: #66f; /* lighter blue */ background-color: #ccc; /* grey */ } a:hover { text-decoration: none; color: white; background-color: blue; } a:active { text-decoration: underline; color: red; background-color: yellow; } /** Some tweaks to make the list look more like a sidebar navigation. Not important for to illustrate the a pseudo classes */ ul { font-family: sans-serif; font-weight: bold; width: 25%; list-style: none;} a {margin: 0.25em; padding: 0.25em; display: block;}
Example 4.32 - input:focus pseudo-class
<p>Form illustrating <code>input:focus</code></p><form method="post" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> First name: <input type="firstname"/><br/> Last name: <input type="lastname"/><br/> Email: <input type="email"/><br/><input type="submit"/></form>input:focus { background-color: #ffc; border: medium solid orange; }
Example 4.33 - Background Color
<div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(100%,66%,33%) </div><div style="background-color: #ffa854; padding: 1em; margin: 1em; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>#ffa854 </div><div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(255,168,84) </div><div style="background-color: hsl(29,100%,66%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>hsl(29,100%,66%) </div>

Session 04 - CSS Examples

Session 04 - CSS
Examples