1. Topics
● Basic CSS
– CSS Introduction
– Menu Types
– Common Menu Styling
– CSS Menu Information
– EXAMPLE !
– Quick Tips
– Ordering Elements
● Advanced CSS (CSS 3)
– CSS3 Information
– New Popular Features

2. CSS
● Cascading Style Sheets
● CSS defines HOW HTML elements are to be
displayed.
● Ways to insert CSS:
– External Style Sheet
– Internal Style Sheet
– Inline Style

3. Menu Types
● Menu's can be made in several ways. You can
use:
– Tables
– Separate Images
– Image maps
– Lists (Ordered / Unordered)

4. Menu (continued)
● The most common way to make a menu now
days is using a list.
● The benefit of using lists is you can do almost
anything to a them
● There are so many different ways you can
manipulate a list. Here are just a few:
– Background-color , Color
– Margin , Padding
– Line-height
– Font etc.

5. CSS INFO
● Lists are also the most Cross-Browser
Compatible ways to make a menu.
● It has been the Default way to make menus
since HTML3 was default.
● Example:

6. HTML / CSS
<div id="menu">
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Showcase</a></li>
<li><a href=”#”>Links</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
#menu { background-color: #333; }
#menu ul { padding: 0; margin: 0; }
#menu ul li {
line-height: 35px;
display: inline;
list-style: none;
}
#menu ul li a {
text-decoration:none;
color:#000;
}
#menu ul li a:hover { color: #00FF66; }

7. CSS EXAMPLE
#menu{background-color: #333;}
#menu ul{padding: 0px; margin: 0px;}
#menu ul li{line-height: 35px; display: inline; list-style: none;}
#menu ul li a{text-decoration: none; color: #000;}
#menu ul li a:hover{color: #00FF66;}

8. CCSS Quick Tips
● Commenting / Documenting
– Its simple
– Fast
– Saves time
– Helps others that view your code
● Ordering Style Names
– Get into one habit and stick to it! Don't have one
group alphabetical and the next completely
different.
– Keep it consistent!

9. ORDERING ELEMENTS
● The majority of people think that its best to order your elements
in the order that your HTML is structured.
● Example:
● Header, title, menu, sidebar, content,links paragraphs
headings, footer.
● WRONG!
● The correct way is: Documentation (author), IMPORTAINT
Reset, then more important things like: header, menu, footer,
sidebar, then in the bottom is headings,links, paragraphs,
images then anything else.

10. ADVANCED CSS(3)
● CSS3 is the NEW standard for website design.
It has the most advanced options for styling
your code (html elements)
● There are 25 NEW exiting new CSS functions
● The Majority of them still aren't Compattable in
browsers so they have “Browser Hacks” for a
few of them
● Here are the Most Popular

11. Popular CSS3 Selectors
Borders
● Border-image
● Border-radius
● Box-shadow
Backgrounds
● Background-origin and background-clip
● Background-size
● Multiple backgrounds
Color
● HSL colors
● HSLA colors
● Opacity
● RGBA colors
User-interface
● Box-sizing
● Nav-top, nav-right, nav-bottom, nav-left