Topics
● Basic CSS
– CSS Introduction
– Menu Types
– Common Menu Styling
– CSS Menu Information
– EXAMPLE !
– Quick Tips
–...
CSS
● Cascading Style Sheets
● CSS defines HOW HTML elements are to be
displayed.
● Ways to insert CSS:
– External Style S...
Menu Types
● Menu's can be made in several ways. You can
use:
– Tables
– Separate Images
– Image maps
– Lists (Ordered / U...
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...
CSS INFO
● Lists are also the most Cross-Browser
Compatible ways to make a menu.
● It has been the Default way to make men...
HTML / CSS
<div id="menu">
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Showcase</a><...
CSS EXAMPLE
#menu{background-color: #333;}
#menu ul{padding: 0px; margin: 0px;}
#menu ul li{line-height: 35px; display: in...
CCSS Quick Tips
● Commenting / Documenting
– Its simple
– Fast
– Saves time
– Helps others that view your code
● Ordering ...
ORDERING ELEMENTS
● The majority of people think that its best to order your elements
in the order that your HTML is struc...
ADVANCED CSS(3)
● CSS3 is the NEW standard for website design.
It has the most advanced options for styling
your code (htm...
Popular CSS3 Selectors
Borders
● Border-image
● Border-radius
● Box-shadow
Backgrounds
● Background-origin and background-...
Upcoming SlideShare
Loading in …5
×

Css Website Design

843 views

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
843
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Css Website Design

  1. 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. 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. 3. Menu Types ● Menu's can be made in several ways. You can use: – Tables – Separate Images – Image maps – Lists (Ordered / Unordered)
  4. 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. 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. 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. 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. 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. 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. 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. 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

×