Creative Web 02 - HTML & CSS Basics

Download Creative Web 02 - HTML & CSS Basics

Post on 26-Jun-2015




0 download

Embed Size (px)


<ul><li> 1. #Creative Web HTML &amp; CSS </li></ul> <p> 2. #HTML Structure &amp; content 3. Sir Tim Berners-Lee Invents the Internet of today 1989 4. #HTML ! declares an html 5 document wraps all html holds meta-data, css &amp; the title holds all visible elements, that define structure and content. 5. #HTML - documents An html document always has the file extension .html and should be saved as an UTF-8 document. Whitespace between tags is mostly ignored. ! defines the document as an html 5 document. MUST be the first element and on line 1. ! wraps everything after doctype, has no real usage. ! holds meta tags, css files and the title tag. ! holds all the content that will be displayed in the browser. 6. #Head Your Name | Photography Place meta tags, css files and the title (important for seo) here. 7. #HTML - The element holds general info (metadata) about the html document. This mainly including the title, meta-tags and linked style sheets files. ! charset declares the character encoding (utf-8 enables characters like , or ). Short syntax is widely supported. Should be the first tag in the head. ! description ca. 150 chars, describe page content, may be used by search engines to display as result text. ! robots tells search engines how to index your page ! title ca. 60 chars, different for every page, descriptive, including key words for the given page 8. #Body </p> <div> <ul><li>list item</li> </ul></div><p> Holds all the content that will be displayed in the browser. 9. #HTML - The element holds all the content that will be displayed in the browser. ! Elements are defined by a compulsory opening and closing tag </p> <p>. ! Void elements like do not have a closing tag. Those are very rare. ! Child elements like the need to be within a defined parent element, for li this is a </p> <ul><li>, </li></ul> <ol><li> or . 10. #Style Enforce a good coding style to make it easy to maintain your HTML. 1 TAB indentation per nesting level new elements are placed on new line </li></ol> <div> <ul><li>list item</li> </ul></div><p> 11. #HTML coding style This coding style makes it easy to maintain your html. ! Use only lowercase for everything (tags, attributes, classes,). Only copy text may use mixed or upper case. ! Indentation use 1 TAB as indentation per nesting level. ! Elements on new line every block, list, or table element should be on a new line with indentation per level. ! Use </p> <p> for paragraphs, never use <br />. 12. #CSS Styling the web. 13. Hkon Wium Lie *1965 Norway / Opera 14. #CSS CSS (Cascading Style Sheets) is a styling language used to define the formatting &amp; looks of a document written in a markup language (e.g. HTML). Cascading means that a style with a lower specificity is replaced by a style with a higher specificity. ! Developed by Hkon Wium Lie and Bert Bos 1994-96 Current Version CSS 3 (not fully implemented) 15. #Cascading A more specific style overwrites a less specific one. 16. #Cascading CSS employes a Cascading method to deal with multiple competing styles for one element. This means CSS starts from the most generic set of style-rules and overwrites rules that are different in more specific rule-sets. ! If a generic rule says all text is red and another rule says the first headline is blue, the first headline will be blue, because it is more specific. 17. The level of detail with which something is described. a circle (generic) a red circle (specific) #Specificity 18. #CSS Specificy Specificy: The more detailed you specify an element, the higher its specificy. You should however aim for a good code structure, so that you do not need to be very specific. If you need to be very specific, you are likely to overwrite much code, which makes your CSS hard to maintain. 19. #Selectors An HTML-Element is selected by using Classes, IDs, etc. .logo #navi img </p> <div> <ul><li> 20. #CSS Selectors Specificy: element selectors (e.g. img) are less specific than classes which are less specific than IDs. ! Elements can be used with different classes. Classes can be used multiple times. IDs may only be used once per document. ! You should always use classes and never IDs or element selectors, if you do not have a really good reason for it. This will help in preventing specificity-problems. 21. #Multi-element selectors You can specify a selector with multiple selector-elements. .navigation.main-navi {} no space! space, but not . (dot) 22. #Hierarchical selectors You can specify an element within another element. .navigation .main-navi {} </li></ul><div> </div> 1 space! ul is placed within div 23. #Advanced CSS Selectors Multi-element selectors: an element can be selected by using multiple selectors which are present on this one element (e.g. ID + class, multiple classes, etc.) this makes the selector more specific. You should try to only do this if really necessary. .class-one.class-two{} #elementid.class-two{} Hierarchical selectors: an element can be selected in relation to its parents. For e.g. you can select an element with a class .child within an element .parent. .parent .child{} 24. #What is a rule A CSS-file has a very flat hierarchy, only selectors &amp; rules selector { attribute: value; /*</div>