Your SlideShare is downloading. ×
Css Website Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css Website Design


Published on

1 Comment
  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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