hipages Group Front End Designer Adelaine Ho gave a Friday talk on CSS. hipages Group Friday talks are informal lunchtime presentations where members of our team share areas of expertise or passion with a cross functional group. Staff from all different departments attend to get an understanding of how other departments think.

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)

28. Pre-Framework Times
10034 lines

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/