Wednesday, March 16, 2016

HTML5 & CSS3 - Art History Project Day 2 Part 2

Today we also styled our navigation menu. First we need to go to File > New File in our menu of Cloud 9. Next lets save this as styles.css

Before we start styling you need to know about how a tag or an element is represented within a web browser. The content is what is inside a tag for example <h1>Home</h1>. The word Home would be the content, and now we can can use CSS to style Home.


To style Home we would have to apply css to the <h1></h1> tag. If we wished to change the color of our h1 tag we would have to use a color code. Colors on a computer are made up of Red Blue and Green, or RGB for short. In general their are two main ways to handle color:
  1. The first is hexadecimal numbers. Hexadecimal numbers go from 0-9, and A-F (0-15). Included in this scheme is that the hexadecimal numbers must have the hashtag in front of the numbers. For example: 
    1. #000000   this would be the color black 
  2. The second way to represent color is to use rgb(0,0,0) 
    1. With this method we could also set an alpha value or opacity (make it transparent). 
      1. We could specify this as rgba(0,0,0,0.4)  -  40% transparent
      2. The alpha value goes from 0.0 to 1.0 - The lower the alpha value the more transparent the color is.

         h1 {

             color:#ffffff;

            }
  1. Sometimes it is helpful to leave comments in a CSS file. There are generally two ways to do this:
    1. You can use two forward slashes //
      1. // This is a comment in CSS - Generally used for one line
    2. You can also use a forward slash and an asterisk followed by an asterisk and forward slash /*      */ 
      1. /* This is another type of comment in CSS */ - This type can span multiple lines.
  2. Let's start styling our web page!

* {               // This centers the entire html content 
   margin:0;
   padding:0;
}

/* This next style will center the header, force it to span 100% of the viewing window, force it to have a height of 80 pixels, and set the background color to be a gray color. */

header {         
    margin:0;
    padding:0;
    width:100%;
    height:80px;
    background-color:#616161;
}

/* If you do a Ctrl+S (Save) then you can save your work and then just simply go to the tab with your web page in it and refresh your browser to see the change. */

/* --- Navigation ----- */
nav ul {                      // Styles the Unordered list
    float:right;
    line-height: 60px;
    background-color:#616161;
    padding-right:70px;
}

nav li {                    // Styles the List Item
    display:inline;         // Makes the list items horizontal instead of vertical.
    list-style-type: none;  // Gets rid of the bullet in front of the list item
}

nav a {
    text-decoration: none;   // Gets rid of the underline on our link text.
    padding:10px;
    color:#ffffff;
    font-family: sans-serif;
}

nav a:hover {         // When you mouse over your the link it will change light blue
    color:#ADD8E6;
}
  1. Don't forget to Save your work! Ctrl + S or File > Save
  2. You should now have horizontal links on all of your pages. If you do not then look for typos or double check that you have <link href="styles.css" rel="stylesheet" > in between the <head></head> tag of each web page. 
Here is what we have so far:

We will style the <section></section> and <footer></footer> in the next class.

If you wish to explore different colors for your site you can go to http://html-color-codes.info/. This site seems to sum things up very nicely and has some examples and a video! Have fun!!!

Posted by at