Session 04 - CSS, Part 2

 <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>

In style element (<style>) within head element:

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;
     }

   
 <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>

In style element (<style>) within head element:

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;}

 <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>

 <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>

 <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>

In style element (<style>) within head element:

ol.basketball {
     list-style: upper-roman;
  }

 <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>

In style element (<style>) within head element:

ul.bball { list-style: none; }
    ul.bball li:before {
        content: '🏀   ';
    }

 <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>

In style element (<style>) within head element:

ul.basketball {
      list-style-image: url('images/basketball-icon25.png');
  }

• Markup
• Style
• Screenshot

 <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;
  }

 <ul id="extglobalnav">
   <li>About
   </li>
   <li>Calendar
   </li>
   <li>Courses
   </li>
   <li>Contact Us
   </li>
   <li>Faculty Directory
   </li>
   <li>Login
   </li> </ul>

In style element (<style>) within head element:

ul#extglobalnav {
    list-style: none;
    padding-left: 0;
  }
  ul#extglobalnav li {
    display: inline;
    padding-left: 2em;
  }

 <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>

In style element (<style>) within head element:

#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;
  }

 <ul>
   <li>Academics
   </li>
   <li>Tuition and Enrollment
   </li>
   <li>Resources and Policies
   </li>
   <li>Inside Extension
   </li> </ul>

 <nav>
   <ul id="extnav">
     <li>Academics
     </li>
     <li>Tuition and Enrollment
     </li>
     <li>Resources and Policies
     </li>
     <li>Inside Extension
     </li>   </ul> </nav>

In style element (<style>) within head element:

ul#extnav {
  list-style: none;
}
ul#extnav li {
  display: inline-block;
}

 <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>

In head element:

<link rel="stylesheet" href="example13.css"/>

In example13.css

* {
  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;
}

 
 <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>

In style element (<style>) within head element:

#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;
}

 
 <div id="f4container">
   <div class="box box1">1
   </div>
   <div class="box box2">2
   </div>
   <div class="box box3">3
   </div>
 </div>

In style element (<style>) within head element:

#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;
}

 
 <div id="f5container">
   <div class="box box1">1
   </div>
   <div class="box box2">2
   </div>
   <div class="box box3">3
   </div>
 </div>

In style element (<style>) within head element:

#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;
}

 
 <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>

In style element (<style>) within head element:

#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;
}

 <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>

In style element (<style>) within head element:

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;
     }

 <p>
   <img src="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>

In style element (<style>) within head element:

img {
  float: none;
  border: thin dotted black;
  padding: 5px;
  }

 <p>
   <img src="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>

In style element (<style>) within head element:

img {
  float: right;
  clear: none;
  border: thin dotted black;
  padding: 5px;
  }

 <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>

In style element (<style>) within head element:

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;
     }

 <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>

In style element (<style>) within head element:

.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;
     }