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: –Polyfills can be used to make up for lacksPolyfills Cross-browser testing –Many options, free and paid, existMany options Browser market share gives an idea whom you may choose to ignoreBrowser market share

The CSS Box Model: 2D Source:

The CSS Box Model: 3D Source:

Colours in HTML and CSS

Hexadecimal numbers (Hex) Binary numbers (base 2) – –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 Hex 8F0B

Color combinations Computer monitors use the primary colours of LIGHT (RED, GREEN, BLUE) Source: primary-colors-edition.htmlhttp://triadstrategies.typepad.com/triadvocate/2012/02/friday-happy-hour- primary-colors-edition.html

HTML colour names Source:

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 withVarious options exist –Line height can be quite trickyLine height 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 propertiesShortcut codes –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 label Radio buttons must share the same name attribute in order to work mutually exclusivelyRadio buttons

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 seeWeb fonts