Download to read offline
Uploaded byhipages
Html and CSS 101 - hipages Group Friday talk
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.
More Related Content
Similar to Html and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talk
- 2. What is HTML? 0HTML 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 vsNon-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 0Combination 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? 0CSS “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 HTMLand 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 • • • • • Stylesdeclared 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 Sourcesand 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 CSSSpecificity? 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 !importantis 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 willwin? http://adelaineho.public.hip/html_templates/presentation/specificity2.html
- 20. Coding for CrossBrowser Compatibility
- 21. Coding for CrossBrowser Compatibility 0 Famous IE6 Bugs • Misbehaving Floats • Double Margin on Floats • Staircase Effect • Centering Layout
- 22. Misbehaving Floats Expected: 2 elementsare 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 onFloats 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 0Want 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 elementsand 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 youpromise 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 ourCurrent 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)
- 28.
- 29.
- 31. We’ll Go MoreTechnical… 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 MoreTechnical… 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/