Html and CSS 101 - hipages Group Friday talk
Download as PPTX, PDF1 like557 views
The document provides an overview of HTML and CSS, outlining their definitions, structures, and examples. It discusses the differences between semantic and non-semantic HTML elements, various types of CSS styles, and the importance of CSS specificity and performance. Additionally, it addresses best practices for coding, cross-browser compatibility, and the significance of maintaining a reusable and consistent CSS framework.
Html and CSS 101 - hipages Group Friday talk
- 2. What is HTML? 0 HTML 0 “HyperText Markup Language” 0 Language for creating web pages 0 Composed of “tags”/elements 0 Should be structured, following a semantic flow (understood by browser and developer)
- 3. Technical Jargon?!? 0 Tags (also known as elements) – has attributes, values
- 4. Semantic Elements vs Non-Semantic 0 Non semantic elements (tells nothing about its content) • <div>, <span> etc 0 Semantic elements (clearly defines its content) • <p>, <img> etc • <table>, <form> etc
- 5. HTML Examples 0 HTML 0 Combination of “tags” which should have a semantic flow 0 Ordered, structured, hierarchical
- 6. HTML Examples Code <div class="media_block“ id=“wrapper”> <img src="/images/128x128.gif" alt="pladceholder image" class="media” /> <div class="media_desc"> <p class="important pbn mbn">I am a 'Media Block' :)</p> <p class="pan man">Lorem ipsum dolor sit amet...</p> </div> </div> Output
- 7. What is CSS? 0 CSS “Cascading Style Sheets” (3 types) • Inline • Internal • External Language to style and format of a document Combination of “rules” made of “declarations” and “selectors”
- 8. Technical Jargon?!? 0 Rules • Made up of Declarations and Selectors 0 Declaration • Made up of Properties and Values
- 9. CSS Examples 0 CSS • Combination of “rules” • Structured and grouped by “selectors” • Anything from color to font sizes to positioning
- 10. What is HTML and CSS?
- 11. CSS Syntax 0 Element img {border: none;} 0 ID #id_red {color: red;} 0 Class .class_blue {color: blue;} 0 Pseudo a:link {color: green;} tr:first-child {background-color: grey} 0 Override .class_pink {color: pink !important}
- 12. CSS Types 0 Inline • • • • • Styles declared on each HTML tag Loaded on each page load Bad practice – not encouraged! (Nightmare… NOOOOOO!!) Not resuable Extremely poor performance
- 13. CSS Types 0 Internal • Styles declared on page • Loaded on each page load – poor performance • Considered bad practice… BUT… (no black and white?) only if you have to… A/B Testing?
- 14. CSS Types 0 External • Styles declared on separate file • Best practice • Cached by browser – faster performance • Could be more than 1 file, later combined and minified (compressed and optimised)
- 15. CSS: Different Sources and Order of !importance 1. User agent – the browser’s default stylesheet 2. User defined – user can define styles in their browser 3. Author – CSS on the site visited (inline, internal, external) There is this override rule called… !important 4. Author !important 5. User !important (A user might want a larger font or a different color, for example)
- 16. What is CSS Specificity? 0 The beauty of CSS – “cascading” 0 Order, which rule takes priority? • “Who would win in a fight? • How it is calculated? (Rules of Specificity) • Star Wars fan anyone? http://www.stuffandnonsense.co.uk/archives/images/specificity wars-05v2.jpg
- 17. CSS Specificity 0 !important is Superman – can beat anything – bad practice 0 Inline styles – bad practice 0 IDs 0 Location dependent 0 Class 0 When two selectors have the same specificity, the last one wins 0 Misconception: the order of class makes no difference
- 18. A little test… who will win the fight? http://adelaineho.public.hip/html_templates/presentation/specificity.html
- 19. Another test… who will win? http://adelaineho.public.hip/html_templates/presentation/specificity2.html
- 20. Coding for Cross Browser Compatibility
- 21. Coding for Cross Browser Compatibility 0 Famous IE6 Bugs • Misbehaving Floats • Double Margin on Floats • Staircase Effect • Centering Layout
- 22. Misbehaving Floats Expected: 2 elements are floated with a parent wrapper around it. The Fix 0 Add overflow:hidden to parent wrapper – works every time! {overflow:hidden} is KING!!! IE output:
- 23. Expected: Double Margin on Floats 2 elements are floated with a parent wrapper around it. The Fix 0 Add overflow:hidden to parent wrapper – works every time! {overflow:hidden} is KING!!! IE output:
- 24. Large Scale Websites 0 Want to reuse CSS as much as possible • Avoid re-inventing the wheel 0 Performance is key 0 Consistency is hard to maintain 0 Specificity grows over time 0 Difficult to tell which rule takes precedence
- 25. Framework 0 Reusable elements and CSS (media blocks yaaaay!) 0 Think flexibility! • Separate layout/positioning with stylistic styles 0 Multiple classes in the same tag/element is not a bad thing 0 Avoid !important and location specific CSS 0 Should be easy to use • new developers join the team – as Craig likes to put it… “adzvinci code” - #adzfail! 0 WAR against designers and front-end developers…
- 26. Developer: Do you promise every time we have this button on the site, it will be green with no border, grey text and bolded?? Designer: I promise! Developer: Can you put your life on it, it won’t change? Designer: Yes! Developer: OK A few months later… Designer: Here’s the wireframe… Developer: Doh!
- 27. Overview of our Current Framework Components: 0 960 grid • positioning and layout 0 Fonts • any fonts we wish to embed 0 Core • our own positioning/layout classes (margin/padding/widths/heights) 0 Base Skin • stylistic elements which can be shared across all our apps (HIP, NTP, PETs) 0 Application Skin • stylistic elements specific to app (only HIP etc)
- 29. Current CSS Framework 833 lines
- 31. We’ll Go More Technical… 0 DEBATE: Balance between reusable CSS and clean HTML – still something I am trying to figure out?!?! How many CSS classes in one element?
- 32. We’ll Go More Technical… 0 DEBATE: What are good practices and bad practices? • IE Conditional statements? • Progressive Enhancement v.s Pixel Perfect Layout? • Location specific CSS • Best Practice? http://www.maxdesign.com.au/articles/the-myth-of-best-practice/