Post-Module CSS

BTM 395: Internet Programming

Web browser usability and compatibility

• Web standards are a goal, but support for standards is a moving target– Which browsers support which

features: http://caniuse.com/– Polyfills can be used to make up for

lacks• Cross-browser testing

– Many options, free and paid, exist• Browser market share gives an

idea whom you may choose to ignore

The CSS Box Model: 2D

Source: http://www.dcs.bbk.ac.uk/~ptw/teaching/css/notes.html

The CSS Box Model: 3D

Source: http://hicksdesign.co.uk/boxmodel/

Colours in HTML and CSS

Hexadecimal numbers (Hex)

• Binary numbers (base 2)– 1000111100001011– Computer love it, humans… ???

• Decimal numbers (base 10)– 36619– Humans love it, computers… ???

• Hexadecimal numbers (base 16)– 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

– 8F0B– Computers love it, computer scientists love it

Binary

1000

1111

0000

1011

Hex 8 F 0 B

Color combinations

• Computer monitors use the primary colours of LIGHT (RED, GREEN, BLUE)

Source: http://triadstrategies.typepad.com/triadvocate/2012/02/friday-happy-hour-primary-colors-edition.html

HTML colour names

Source: http://www.w3schools.com/cssref/css_colorsfull.asphttp://www.w3schools.com/tags/ref_colorpicker.asp

The Cascade

• Fundamental rule of precedence– inline style > ID > class > element– Interpret “>” to mean “has greater precedence than”– The more specific the selector, the higher the

precedence it gets– For pseudo-elements, consider their meaning and

scope to determine precedence• Other points to note

– User style sheets may exist; browser style sheets always exist

– !important jumps precedence, but avoid using it—work within normal precedence rules

– Avoid using inline styles, since it makes overriding precedence harder

Various CSS tips

CSS properties to note

• Font sizing– Various options exist, but em or % are most

consistent and easiest to work with– Line height can be quite tricky

• Display vs. visibility– display: none removes element from a

page—it no longer exists (except in the DOM)

– visibility: hidden hides the element, but leaves its space

• Shortcut codes exist for various properties– Order usually doesn’t matter, since values

are normally mutually exclusive

Form elements

• For the form label element, the for attribute refers to the id, not to the name of the referenced element

• Radio buttons must share the same name attribute in order to work mutually exclusively

Other CSS tips

• There are many, many selectors available

• Case sensitivity– HTML: case insensitive– CSS: generally case insensitive, except that

class and ID names are case sensitive– JavaScript: case sensitive– PHP: case sensitive– Conclusion: make your life easier and

always assume case sensitivity!• Web fonts let you specify fonts that you

can guarantee your user will see