Session 04 - CSS, Part 2
Examples

• Example 4.1 - Margin, Padding, Border  
  <aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</aside><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>aside { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; float: right; font-size: 16pt; } p { font-size: 18pt; line-height: 1.5; }JSFiddle - Example 4.1
• Example 4.2 - a pseudo-classes (link, visited, hover, active))  
  <nav class="site"><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></nav>nav a:link { text-decoration: none; color: blue; background-color: white; } nav a:visited { text-decoration: none; color: #66f; /* lighter blue */ background-color: #ccc; /* grey */ } nav a:hover { text-decoration: none; color: white; background-color: blue; } nav 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 */ nav.site ul { font-family: sans-serif; font-weight: bold; width: 25%; list-style: none;} a {margin: 0.25em; padding: 0.25em; display: block;}JSFiddle - Example 4.2
• Example 4.3 - 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>JSFiddle - Example 4.3
• Example 4.4 - 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</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ol>JSFiddle - Example 4.4
• Example 4.5 - 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</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ol>ol.basketball { list-style: upper-roman; }JSFiddle - Example 4.5
• Example 4.6 - List with unicode symbol before  
  <strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ul class="bball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ul>ul.bball { list-style: none; } ul.bball li:before { content: '🏀 '; }JSFiddle - Example 4.6
• Example 4.7 - 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</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ul>ul.basketball { list-style-image: url('http://cscie12.dce.harvard.edu/resources/images/basketball-icon25.png'); }JSFiddle - Example 4.7
• Example 4.8 - 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; }JSFiddle - Example 4.8
• Example 4.9 - 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; }JSFiddle - Example 4.9
• Example 4.10 - list-style: none;  
  <nav><ul id="extglobalnav"><li><a href="#">About</a></li><li><a href="#">Calendar</a></li><li><a href="#">For Degree Candidates</a></li><li><a href="#">Courses</a></li><li><a href="#">Faculty Directory</a></li><li class="login"><a href="#">Login</a></li></ul></nav>#extglobalnav { list-style: none; padding-left: 0; float: right; margin-right: 2em; font-family: Arial Narrow, sans-serif; } #extglobalnav li { display: inline; padding-left: 2em; font-weight: bold; } #extglobalnav a:link, #extglobalnav a:visited, #extglobalnav a:active { color: #4d84c4; text-decoration: none; } #extglobalnav a:hover { text-decoration: underline; color: #990000; } #extglobalnav li.login { padding: 0.3em 1em; border: 3px solid #4d84c4; margin-left: 2em; }JSFiddle - Example 4.10
• Example 4.11 - simple list  
  <ul><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul>JSFiddle - Example 4.11
• Example 4.12 - inline list items  
  <nav><ul id="extnav"><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul></nav>ul#extnav { list-style: none; } ul#extnav li { display: inline-block; }JSFiddle - Example 4.12
• Example 4.13 - Inline List Items  
  <nav><ul id="extnav"><li><a href="#">Academics</a></li><li class="active"><a href="#">Tuition and Enrollment</a></li><li><a href="#">Resources and Policies</a></li><li><a href="#">Inside Extension</a></li></ul></nav>* { background-color: white; } ul#extnav { list-style: none; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; color: #1e1e1e; background-color: white; margin-top: 1em; } ul#extnav li { display: inline; margin: 0; padding: 0; } ul#extnav a { padding: 0.5em; margin-right: 0; background-color: white; border-right: 1px solid black; } ul#extnav li:last-child a { border-style: none; } ul#extnav a:link, ul#extnav a:visited { color: black; text-decoration: none; } ul#extnav a:hover { color: #a51c30; text-decoration: underline; } ul#extnav .active { background-color: #f5f5f8;} ul#extnav .active a:link, ul#extnav .active a:visited, ul#extnav .active a:hover, ul#extnav .active a:active { background-color: #f5f5f8; color: #a51c30; text-decoration: none; }JSFiddle - Example 4.13
• Example 4.14 - Flex  
  <div id="f3container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div>#f3container { display: flex; } .box1, .box2, .box3, .box4, .box5 { flex-grow: 0; flex-shrink: 0; flex-basis: 5em; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box { padding: 2em; border: medium solid black; width: 3em; } JSFiddle - Example 4.14
• Example 4.15 - Flex  
  <div id="f4container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>#f4container { display: flex; } .box1 { flex-basis: 15%; background-color: lightpink; } .box2 { flex-basis: 25%; background-color: lightsteelblue; } .box3 { flex-basis: 50%; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; } JSFiddle - Example 4.15
• Example 4.16 - Flex  
  <div id="f5container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>#f5container { display: flex; } .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; background-color: lightpink; } .box2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; background-color: lightsteelblue; } .box3 { flex-grow: 1; flex-shrink: 1; flex-basis: 500px; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; } JSFiddle - Example 4.16
• Example 4.17 - Flex Wrap  
  <div id="f6container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div><div class="box box6">6</div></div>#f6container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: linen; border: thin solid black; } .box1, .box2, .box3, .box4, .box5, .box6 { flex-grow: 0; flex-shrink: 0; flex-basis: 28%; box-sizing: border-box; margin: 1rem 0; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box6 { background-color: turquoise;} .box { padding: 2em; border: medium solid black; } JSFiddle - Example 4.17
• Example 4.18 - Margin, Padding, Border  
  <aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</aside><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>aside { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; float: right; font-size: 16pt; } p { font-size: 18pt; line-height: 1.5; }JSFiddle - Example 4.18
• Example 4.19 - 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; }JSFiddle - Example 4.19
• Example 4.20 - 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; }JSFiddle - Example 4.20
• Example 4.21 - float: right;  
  <div><aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</aside><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></div>aside { float: right; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }JSFiddle - Example 4.21
• Example 4.22 - float: left;  
  <div><div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</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-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }JSFiddle - Example 4.22