Cascading Style Sheet -

Goal: Learning how to create a navigation bar using Cascading Style Sheets

• Styles can be placed right inside a tag, after the tag word with the syntax: style = "name:choice;name:choice" as in

• <h1 style="color:blue;text-align:center">A page with no styles</h1>

• A list of possible tags are in http://www.w3schools.com/cssref/default.asp

• Styles can also be moved up into the header area so that every tag of that type will use the style automatically:

• Place the styles inside the <head> tag as a style tag set.

<head>
<style type="text/css">
body {color:red }
h1.bluetype { color:blue }
h1.greentype {color:green}
</style>
</head>

o For h1 to get the .bluetype style use: <h1 class="bluetype">

• Styles can be moved out to an external Style Sheet by placing in a file on your site and setting a reference to that sheet.

</head>

o The external stylesheet would contain exactly what was in the internal style sheet: (in our example, the filename is mystyle.css, and it contains:

body {color:red }
h1.bluetype { color:blue }
h1.greentype {color:green}

• A navigation bar is a set of text for links that are positioned in a certain place, while the body is positioned in a different place. If the same placement is made on all pages, the navigation bullets appear to stay separate from the body of the text.

• Inside the body, set it to move over 11 em : <body style = “padding-left: 11 em”>

• Inside the ul tag for the bullet of the link, set it to start at the top of 2 em and left corner of 1 em and the width of 9 em. Notice that the 11 em is farther than the 9 em used for the link width.

• Move these styles into a stylesheet so that you only need one file to use on all your pages:

At the top of each page, link the style sheet to your page:

The external stylesheet would contain exactly what was in the internal style sheet:

body {padding-left: 11em;}

ul.navbar {
   list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }

Inside your page, the navigation bar can use <ul class = "navbar">

<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="links.html">Links</a>
</ul>