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

553
views

Published on


1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
553
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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