Create a WebSite with CSS - Part II

Here we are going to discuss about creating a css menu for your website and formatting the website's content.

For the menu we used an unordered list.

As you can see there's nothing new in the HTML code. So let take a look at the CSS code.

- line 44 - "#menu ul{.... " we add style to all

tags that are included in the HTML element that has the <<id="menu">>

- line 48 - display property - in our case "display:block" makes a HTML element to take up the full width available and has a line break before and after it. The opposite   is  "display:inline" which makes a HTML element to only take up as much width as necessary, and does not force line breaks. 

This property can also hide HTML elements, "display:none".

- line 50 - the same thing as on line 44, but for the tag.

- line 53 - text-decoration property - we used it with the value none to remove the underline from links. Other values for this property are: overline; line-through; underline; blink.

- line 55 - color property - tells the browser the text color of that element.

- line 57 - the same thing as on line 50. The style here, being applied to the "hover" state of the link. When you put your mouse over the link it will be underline.

Here we have the content, on line 34 is id="content_1" for the first page, on the second page id="content_2" and so on. 

STOP! when we create a website to launch online we will use only id="content". I've made id="content_no." just for you so you can see that are different pages. 

A real website, you would have a different content for every page so you don't have to use different ids.

on line 46 there are two end tags (

). One is for content and the other for the

with the middle ID.