Professional Website
Development
TECH 272

CSS: Navigation, Floating, and Positioning

Foreground Colors

  • Use color property to define text and border color of an element
  • p.style1 { color: #FFCC00; }
  • tables don't inherent, so it's typical to see
    • body, table, td, th { color: #FFCC00; }
  • Exercise 1: My first navigation
    • Take a look at where we're going! Try clicking the links.
    • Open a new HTML document and name it navigation.html

Background Colors

  • body { background-color: #FFFF66 ; }
  • other values
    • transparent (default)
    • hex
    • rgb function
  • Exercise 2: Creating a nav bar
    • Step 1: create bulleted list of links in your HTML
    • Step 2: wrap bulleted list in a nav container
    • Step 3: turn off bullets (note: we do this at the ul level)
    • Step 4 - float li's left for a horizontal nav bar
    • Step 5 - style your links 
        nav a:link {
   display: block; /* gives anchor tag structure */
   width: 6em;
   text-align: center;
   padding: .5em 1em; /* breathing room btwn content and inside of border */
   text-decoration: none; /* turns off underline on links */
   margin: 1em 5px; /* t/b, r/l */
   background-color: rgb(190, 190, 190);
   color: #fff;
   border: 2px solid rgb(175, 175, 175);
   border-radius: 6px; /* rounds corners, bigger number means more rounded */
   text-shadow: #666 .1em .1em .1em; /* color, right, bottom, blur */
   box-shadow: rgba(0,0,0,.5) 0 5px 3px;

    Pseudoclass Selectors

    • pseduo what?
    • fancy word for special anchor "state" selectors
      • a:link
      • a:visited
      • a:hover
      • a:focus (for forms and key navigation)
      • a:active (while mouse is pressed)
    • examples
      • #nav a:link, #nav a:visited {
        text-decoration: none;
        }
      • #nav a:hover, #nav a:focus, #nav a:active {
        color: lime;
        }
    • Love, HA!
      • LVHA links must appear in this order in your style sheet
      • otherwise, ignored
    • Exercise 4: Changing link colors
      • on visited
        • change the background color to light gray.
        • reduce the box shadow and change the font color to white
      • on hover
        • change the background color of our button to #fdca00
        • change the border color of our button to #fda700.
      • on active
        • shrink and lighten the box shadow to 
        • box-shadow: 0 1px 2px rgba(0,0,0,.5);
      • Now let's add a really cool effect. Let's move each button slightly down on click.
        • first we have to position the button as relative in its default state. Then we set the top of the default button to zero.
          • nav a:link {
           position: relative; /* this anchors the button so it can be moved 3px down on active */
 top: 0; /* sets top position of default button to zero */
          }
        • Now we can move the active button down by 3px by using 
              nav a:active 
{
top: 3px;
}

          Quick and Easy Things for Dressing Up Your Site!

        • Note that these items are NOT REQUIRED for your final project, just fun things you can do :)

          Add Custom Fonts

          • Head over to the Google Fonts server here, https://fonts.google.com/
          • Choose the fonts you want (you can choose more than one).
            • Click on the font.
            • Click on the 'Select This Style' link.
            • Then browse to the next font and click on the 'Select This Style' link.
            • Add as many fonts as you like.
            • Now look on the right hand pane where is says 'Selected Families'
            • Scroll down to 'Use on web' and choose 'link'
            • The first grayed area are links to the external Google font server that seraches for your chosen font. Copy and paste this under your link to your external stylesheet for each page you want to include the font(s)
            • Now you need to call the fonts.
              • Scroll down to the second grayed area. This font-family property that calls your font(s). Add this to whatever selectors you like in your CSS!

           

          Add a Google Map

           

          Add a YouTube Video

           

          Add Audio