CSS and SASS

Selector Examples Name Notes > a > b a > b > c Child Matches when element B is one level below (the child) of element A.

See Styling Ordered List Numbers ol, ul { counter-reset:li; } ol > li, ul > li { position: relative; margin: 0 0 0px 2em; list-style: none; } ol > li:before, ul > li:before { content: counter(li); counter-increment: li; position: absolute; left: -2em; width: 2em; margin-right: 8px; font-weight: 600; text-align: center; } ul > li:before {

img.responsive { max-width: 100%; -ms-interpolation-mode: bicubic; }

The more of these “best-practices” you follow, the easier your job will be. Style the smallest view first. Work outward, pulling the view wider until something gets ugly, create a media query, and fix it. The design dictates the breakpoints, NOT the device size. Popular device sizes change constantly, better to make the design expand

<style>/* CSS code here */</style> <link rel=”stylesheet” name=”myStyles” href=”myStyles.css”> The name attribute is optional and for humans only. W3: HTML5 link MDN: link

.group:after { content: “”; display: table; clear: both; }

A cheat-sheet with reminders, references and examples for working with CSS and SASS.