HTML and CSS- Introduction: What is HTML and CSS?- Examples and Specificity- Cross Browser Compatibility- Framework- More Technical Discussions

What is HTML?

0HTML0 “HyperText Markup Language”0Language for creating web pages0Composed of “tags”/elements0Should be structured, following a semantic flow

(understood by browser and developer)

Technical Jargon?!?0Tags (also known as elements) – has attributes, values

Semantic Elements vs Non-Semantic

0Non semantic elements (tells nothing about its content)• <div>, <span> etc

0Semantic elements (clearly defines its content)• <p>, <img> etc• <table>, <form> etc

HTML Examples0HTML

0 Combination of “tags” which should have a semantic flow0 Ordered, structured, hierarchical

HTML ExamplesCode<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

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”

Technical Jargon?!?0Rules• Made up of Declarations and Selectors

0Declaration• Made up of Properties and Values

CSS Examples0CSS• Combination of “rules”• Structured and grouped by “selectors”• Anything from color to font sizes to positioning

What is HTML and CSS?

CSS Syntax0 Element

img {border: none;}

0 ID#id_red {color: red;}

0 Class.class_blue {color: blue;}

0 Pseudoa:link {color: green;}tr:first-child {background-color: grey}

0 Override.class_pink {color: pink !important}

CSS Types0 Inline• Styles declared on each HTML tag• Loaded on each page load • Bad practice – not encouraged! (Nightmare… NOOOOOO!!)• Not resuable• Extremely poor performance

CSS Types0 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?

CSS Types0External • 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)

CSS: Different Sources and Order of !importance

1. User agent – the browser’s default stylesheet2. User defined – user can define styles in their

browser3. Author – CSS on the site visited

(inline, internal, external)

There is this override rule called… !important

4. Author !important5. User !important

(A user might want a larger font or a different color, for example)

What is CSS Specificity?

0The beauty of CSS – “cascading”0Order, 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/specificitywars-05v2.jpg

CSS Specificity

0 !important is Superman – can beat anything – bad practice0 Inline styles – bad practice0 IDs 0 Location dependent0 Class0 When two selectors have the same specificity, the last one wins0 Misconception: the order of class makes no difference

A little test… who will win the fight?

http://adelaineho.public.hip/html_templates/presentation/specificity.html

Another test… who will win?

http://adelaineho.public.hip/html_templates/presentation/specificity2.html

Coding for Cross Browser Compatibility

Coding for Cross Browser Compatibility

0Famous IE6 Bugs• Misbehaving Floats• Double Margin on Floats • Staircase Effect• Centering Layout

Misbehaving Floats2 elements are floated with a parent wrapper around it.

The Fix0 Add overflow:hidden to parent

wrapper – works every time! {overflow:hidden} is

KING!!!

Expected:

IE output:

Double Margin on Floats

2 elements are floated with a parent wrapper around it.

The Fix0 Add overflow:hidden to parent

wrapper – works every time! {overflow:hidden} is

KING!!!

Expected:

IE output:

Large Scale Websites

0Want to reuse CSS as much as possible• Avoid re-inventing the wheel

0Performance is key0Consistency is hard to maintain0Specificity grows over time0Difficult to tell which rule takes precedence

Framework0Reusable elements and CSS (media blocks yaaaay!)0Think flexibility!• Separate layout/positioning with stylistic styles

0Multiple classes in the same tag/element is not a bad thing

0Avoid !important and location specific CSS0Should be easy to use• new developers join the team – as Craig likes to put it…

“adzvinci code” - #adzfail!0WAR against designers and front-end developers…

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!

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)

Pre-Framework Times

10034 lines

Current CSS Framework

833 lines

We’ll Go More Technical…0DEBATE: Balance between reusable CSS and clean

HTML – still something I am trying to figure out?!?! How many CSS classes in one element?

We’ll Go More Technical…

0DEBATE: 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/