1. CSS part 2
Outro

2. Some CSS Properties z-index: auto | <integer>
Controls stacking elements
position: fixed | absolute | static | relative | sticky
Sticky is experimental (for now)
clear: none | left | right| both

3. Multiple Column Layout
Use floats for layout
Use divs with explicit widths and floats specified to achieve multiple column layout
Use percentages to achieve fluid design
Use max-width and min-width to restrict stretching and shrinking of content
Use margin to center divs

4. Transitions State changes usually occur instantly
Transitions exist to smooth out the change
Four properties need to be defined:
CSS property to change (transition-property)
How long transition takes (transition-duration)
How the transition accelerates (transition-timing-function)
Whether there’s a pause before transition starts (transition-delay)

5. Transitions Shorthand syntax:
transition: property duration timing-function delay;
Transition multiple properties by separating values for each property with a comma

6. Transform

7. Transform
Transform: rotate(angledeg) | translate(xpx,ypx) | scale(z) | skew(xdeg,ydeg);
You can apply multiple transfroms by spacing functions, eg: transform: rotate(90deg) scale(1.5) skew(30deg, 40deg);

8. Keyframes Animation Transitions define two states (start and end) only
Intermediate states calculated automatically
Programmer can explicitly define intermediate states rule
Example: DO IT YOURSELF

9. CSS Reset Browsers (User Agents) provide their own style sheet
Users may want to override this style sheet for consistency
This is achieved using a ‘CSS Reset’
Many reset style sheets exist. Find some

10. CSS Image Replacement
Replace text with image when no appropriate font exists
Multiple approaches exist
#tmp{
Text-indent: 100%;
overflow: hidden;
whitespace: nowrap; }

11. CSS Sprites
Use image replacement technique to improve page performance
Load one large image instead of loading several smaller ones
Use bakcground-position property and image replacement techniques to display the correct image
Example: Do it yourself

12. SASS & LESS Extension to CSS language
Add variables, maths, nesting and mixing in rules
Need to be compiled to native css
Reduce production
SASS; sass-lang.com
LESS; lesscss.org

13. Styling Forms Forms using HTML exclusively are ugly
Little CSS is enough to see a drastic improvement
Properly aligned forms increase user engagement

14. Styling Forms
Start with basic style: block level properties, clearing floats
Align labels by using float, text-align, and making the label block-level
Fix fieldsets (eg removing border) and style buttons appropriately

15. Styling tables border-collapse: separate | collapse
border-spacing: horizontalpx verticalpx
empty-cells: show | hide | inherit
Individual cells can be styled as necessary

16. Responsive Web Design
Page layout adapts to available screen size

17. Responsive Web Design Fluid Layout Flexible images Media Queries
Use percentage when defining widths
Flexible images
Img{max-width: 100%;}
Media Queries
Deliver styles based on media (screen, mobile,…)

18. Responsive Web Design
Start with setting viewport in head element using meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
This sets the viewport to the width of the device (mobile or desktop)

19. Responsive Web Design
Media Queries start followed by media, like screen, followed by condition
@media screen and (min-width:480px;){
/*mobile specific styles here*/ }
This media query targets screens that have a viewport min-width of 480px (bigger than mobile devices)

20. Responsive Web Design Strategies:
Mobile first approach; design for mobile and style to scale
Usually RWD have two layouts; mobile and desktop. Some include a 3rd for tablets
There is an increasing array of devices with different widths. This is why developers are moving away from px in favour of em when defining media queries (Future proofing)

21. Conclusions
CSS is sometimes enough for RWD, other times JavaScript may be necessary
When the user experience varies greatly between mobile and desktop, developing two different sites may be better than RWD
This is an introduction. The web is the ultimate resource for knowledge expansion