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
Binary
Hex
1000
1111
0000
1011
8
F
0
B
– 8F0B
– Computers love it, computer scientists love it
Color combinations
• Computer monitors use the primary
colours of LIGHT (RED, GREEN, BLUE)
Source: http://triadstrategies.typepad.com/triadvocate/2012/02/friday-happy-hourprimary-colors-edition.html
HTML colour names
Source:
http://www.w3schools.com/cssref/css_colorsfull.asp
http://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