• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css   whats on the menu.

Css whats on the menu.



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.

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.



Total Views
Views on SlideShare
Embed Views



1 Embed 2

http://css-tricks.com 2



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Css   whats on the menu. Css whats on the menu. Presentation Transcript

  • 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 solve aproblem
  • 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
  • Types of Stye SheetsThere are 3 ways to implement CSS on a web page. External Style Sheet Internal Style Sheet Inline Style Sheet
  • 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>
  • 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>
  • 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>
  • The MenuThis is our goalTo complete our goal we will use an internalstylesheet so we can easily look back andforth at the code.
  • 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; }
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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/.
  • ResourcesW3Schools.comCSS-Tricks.com - Chris CoyierPerishablePress.com Jeff Starr
  • Contact Info Name: Attila Hajzer Email: Attilahajzer5@gmail.comWebsite: http://attilahajzer.host-ed.net/ Make the next request!