1 / 13

Post-Module CSS

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

norah
Download Presentation

Post-Module CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Post-Module CSS BTM 395: Internet Programming

  2. 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/ • Polyfillscan 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

  3. The CSS Box Model: 2D Source: http://www.dcs.bbk.ac.uk/~ptw/teaching/css/notes.html

  4. The CSS Box Model: 3D Source: http://hicksdesign.co.uk/boxmodel/

  5. Colours in HTML and CSS

  6. 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

  7. 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

  8. HTML colour names Source: http://www.w3schools.com/cssref/css_colorsfull.asp http://www.w3schools.com/tags/ref_colorpicker.asp

  9. 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

  10. Various CSS tips

  11. 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

  12. 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

  13. 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

More Related