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:
- 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:
- #000000 this would be the color black
- The second way to represent color is to use rgb(0,0,0)
- With this method we could also set an alpha value or opacity (make it transparent).
- We could specify this as rgba(0,0,0,0.4) - 40% transparent
- The alpha value goes from 0.0 to 1.0 - The lower the alpha value the more transparent the color is.
h1 {
color:#ffffff;
}
- Sometimes it is helpful to leave comments in a CSS file. There are generally two ways to do this:
- You can use two forward slashes //
- // This is a comment in CSS - Generally used for one line
- You can also use a forward slash and an asterisk followed by an asterisk and forward slash /* */
- /* This is another type of comment in CSS */ - This type can span multiple lines.
- 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;
}
- Don't forget to Save your work! Ctrl + S or File > Save
- 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!!!