<p> Advanced CSS Tips</p><p>1. Putting id or class in a tag – examples: In external css file (or embedded) In tag, in html file h3#red { color: red; } id="red" h3.blue { color: blue; } class="blue" a#spec:hover { color: green } id="spec" a.spec:hover { color: MidnightBlue } class="spec"</p><p>2. General Advanced CSS tips:1 a) font-family:  Some sources say font-family should not use lower case (Arial, not arial)  Generic fonts can be used: serif, sans-serif, cursive, monospace b) margin: auto; -- equal margins are calculated by browser c) separating tags: commas, space, greater than div, p div p div > p applies to both applies if p inside div applies only if p is (directly or indirectly) directly inside div d) Other "basic" examples:  * – applies to every element  div * – applies to every element within div</p><p>3. Bulleted lists: a) first-child: applies only to first "li" in list – so, for example, li:first-child <ul> <li> – this is first-child <li> <li> <li> </ul> b) nth-child(#): applies to nth "li" in list – so, for example, li:nth-child(4) <ul> <li> <li> <li> <li> – this is nth-child(4) </ul></p><p>1 Tips from here to end are from: https://www.codecademy.com/ </p><p>Last updated: 5/7/18 – 15:13:16 Page 1 of 2 Advanced CSS Tips</p><p>4. Borders: a) Adjust width, height, and border; perhaps margins and border-radius b) Examples  Simple border (which will be a rectangle) – do not change border-radius: width: 300px; height: 30px; margin-bottom: 20px; border: thick solid blue;  Rounded corners – add: border-radius: 30%;  Circle – add: make width and height identical; border-radius: 100%;  Square – add: make width and height identical; border-radius: 0%; 5. Adjust bullets for menus: a) display: inline; – side by side, without bullets (display: inline-block; is similar) display: block; – on top of each other, without bullets display: none; – does not show (display: hidden; is similar) many other types of display b) list-style-type: none; – no bullets c) Other bullets for menus:  float: right; – similar to align=right float: left; – similar to align=left  clear: right; clear: left; clear: both; – try all 3 in index.html  overflow: auto; – adds text box around image as well  position: static; – default position: absolute; – relative to the previous positioned element position: relative; – relative to the previous element position: fixed; – such as lower right of page  z-index: -1; puts image behind text z-index: 1; puts image in front of text also inherit, initial, and other values</p><p>Last updated: 5/7/18 – 15:13:16 Page 2 of 2</p>