Post-Module CSS BTM 395: Internet Programming
Feb 22, 2016
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