CSSWhats on the menu
TopicsCSS IntroductionCSS and HTMLStylesheet TypesStylesheet ExamplesMenu ExampleExample ExplainedCommon Mistakes
Welcome to CSSCSS stands for Cascading Style SheetsStyles define how to display HTML ElementsStyles were added to HTM4.0 to...
HTML & CSS HTML was never intended to have tags.but instead to define the contents of adocument such as heading and paragra...
Types of Stye SheetsThere are 3 ways to implement CSS on a web page.    External Style Sheet    Internal Style Sheet    In...
EXTERNAL STYLESHEET HTML                                             CSS<!DOCTYPE html><html>                             ...
Internal Style Sheets<!DOCTYPE html><html><head><title>Internal Stylesheet</title><style>h1{    color: blue;}p{     margin...
Inline Styling<!DOCTYPE html><html><head><title>Inline Styling</title></head><body><h1 style=”color:blue”>This is a header...
The MenuThis is our goalTo complete our goal we will use an internalstylesheet so we can easily look back andforth at the ...
The Code               HTML                                                CSS<!DOCTYPE html>                             ...
Lists - HTMLThe menu is being constructed by anUnordered List.Unordered lists are used in so many ways inweb design such a...
Links - HTMLEach link has a start and end tag<a> and </a>.They also have other attributes such as: href,rel, name .etc.The...
General CSS Information Just like the HTML, CSS has beginning and ending symbols. CSS uses the Curly Brackets { and }. Eac...
Reset and 0* selects ALL elements on a website. and it isused for a reset such as margin:0; padding:0;.When declaring dime...
Menu - CSSThere are many property options for listitems bullets, you can make them bullets,numbers, letters, roman numeral...
Common MistakesYou need to use a doctype (Preferably html5doctype) <!DOCTYPE html> in your websiteswhen floating ANYTHING o...
ResourcesW3Schools.comCSS-Tricks.com - Chris CoyierPerishablePress.com Jeff Starr
Contact Info          Name: Attila Hajzer   Email: Attilahajzer5@gmail.comWebsite: http://attilahajzer.host-ed.net/       ...
Upcoming SlideShare
Loading in …5
×

Css whats on the menu.

971 views

Published on

the video describes how to make a basic CSS Navigation for websites and then describes the properties, steps as well as some background history on HTML and CSS.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
971
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Css whats on the menu.

    1. 1. CSSWhats on the menu
    2. 2. TopicsCSS IntroductionCSS and HTMLStylesheet TypesStylesheet ExamplesMenu ExampleExample ExplainedCommon Mistakes
    3. 3. Welcome to CSSCSS stands for Cascading Style SheetsStyles define how to display HTML ElementsStyles were added to HTM4.0 to solve aproblem
    4. 4. HTML & CSS HTML was never intended to have tags.but instead to define the contents of adocument such as heading and paragraphtags.In HTML 3.2 <font> and <color> tags wereadded which caused NIGHTMARES forweb developersThis was fixed in HTML 4.0 when the W3Cadded CSS Style Sheets
    5. 5. Types of Stye SheetsThere are 3 ways to implement CSS on a web page. External Style Sheet Internal Style Sheet Inline Style Sheet
    6. 6. EXTERNAL STYLESHEET HTML CSS<!DOCTYPE html><html> h1{<head> color: blue;<title>External Stylesheet</title> }<link rel=”stylesheet”ref=”style.css” /></head> p{<body> margin: 10px; }<h1>This is a header.</h1><p>This is a paragraph.</p></body></html>
    7. 7. Internal Style Sheets<!DOCTYPE html><html><head><title>Internal Stylesheet</title><style>h1{ color: blue;}p{ margin: 10px;}</style></head><body><h1>This is a header.</h1><p>This is a paragraph.</p></body></html>
    8. 8. Inline Styling<!DOCTYPE html><html><head><title>Inline Styling</title></head><body><h1 style=”color:blue”>This is a header.</h1><p style=”margin: 10px”>This is a paragraph.</p></body></html>
    9. 9. The MenuThis is our goalTo complete our goal we will use an internalstylesheet so we can easily look back andforth at the code.
    10. 10. The Code HTML CSS<!DOCTYPE html> *{margin: 0; padding: 0;}<html> ul{<head> list-style-type: none;<link rel="stylesheet" href="style.css"/> margin: 0; padding: 0;</head> }<body> li{<ul> ! display: inline;! <li><a href="#">Home</a></li> ! padding: 0; margin: 0;! <li><a href="#">About</a></li> }! <li><a href="#">Media</a></li>! <li><a href="#">Links</a></li> a{! <li><a href="#">Contact</a></li> ! margin:0;</ul> ! padding: 5px 40px 5px 8px; ! line-height: 30px;</body> ! color: white;</html> ! background-color: red; ! text-decoration: none; }
    11. 11. Lists - HTMLThe menu is being constructed by anUnordered List.Unordered lists are used in so many ways inweb design such as navigation, lists, footers,twitter feeds, image galleries etc.Each list has a start and finish tag <ul>, </ul>.Each list item has a start and finish tag aswell <li>,</li>.They are used to identify lists and items.
    12. 12. Links - HTMLEach link has a start and end tag<a> and </a>.They also have other attributes such as: href,rel, name .etc.The hash tag “#” is used to represent a nonused link, like a filler link.
    13. 13. General CSS Information Just like the HTML, CSS has beginning and ending symbols. CSS uses the Curly Brackets { and }. Each CSS property requires a semicolon “;” at the end of each property declaration.
    14. 14. Reset and 0* selects ALL elements on a website. and it isused for a reset such as margin:0; padding:0;.When declaring dimensions whether its sizeor position, 0 does not need the prefix em,in, px .etc.
    15. 15. Menu - CSSThere are many property options for listitems bullets, you can make them bullets,numbers, letters, roman numerals and evenimages.The margin: 0; padding: 0; properties removethe margin and padding from the un orderedlist as well as from every descendantelement.Then there are some visual enhancementproperties that are customizable to yourliking.
    16. 16. Common MistakesYou need to use a doctype (Preferably html5doctype) <!DOCTYPE html> in your websiteswhen floating ANYTHING or else it will notwork properly.* reset should NOT be used with Outline,Border or anything of that sort because itmay slow your websites performance. theMargin and padding is the most basic ofstylesheet resets. there are many availableon : http://css-tricks.com/8146-the-lean-mean-css-reset-machine/.
    17. 17. ResourcesW3Schools.comCSS-Tricks.com - Chris CoyierPerishablePress.com Jeff Starr
    18. 18. Contact Info Name: Attila Hajzer Email: Attilahajzer5@gmail.comWebsite: http://attilahajzer.host-ed.net/ Make the next request!

    ×