Advanced CSS Lessons 1.1 - 1.

3 Reference Cheatsheet

Box model Grid Container CSS Pseudo-selectors

Margin Use display: grid and specify Pseudo-elements

columns/rows.
Border grid-template-columns grid-template-rows
h1::before {
Padding content: "-";
color: blue;
1fr 1fr 1fr 1fr 1fr 1fr
}
Content 50px auto 50px 50px auto 90px
Pseudo-classes
20% 20% auto 100px auto 20%
content-box a:hover { color: blue; }
.Container { /* First p margin */
display: grid;
border-box grid-template-columns: 50px auto 50px;p:nth-child(1) {
grid-template-rows: 50px auto 90px; margin-left: 10px;
} }
CSS Terminology /* Striped table rows */
tr:nth-child(odd) {
background: gray;
Grid Child Positioning }
selector
declaration block Optional: Child elements can be custom
positioned and sized. CSS Animation
grid-column grid-row
2/3 .Link {
property value color: blue;
2/ span 2 padding-left: 10px;
transition: color 1s,
Selector “Targets” a CSS rule 1/3 padding-left 3s;
Specificity The more specific the selec- }
tor it is, the more likely it is to 1 / span 2 1 / span 2
win against other selectors target- .Link:hover {
ing the same element color: green;
Responsive design Looking good on .ChildElement { padding-left: 20px;
mobile and desktop grid-column: 1 / span 2; }
Media queries If statements for CSS, grid-row: 1 / span 2;
apply CSS to browser sizes. }
Adding JavaScript to HTML
DOM Tree Terminology BEM
Responding to clicks
ˆ Parent: <div class="Main"> Block-Element-Modifier Naming
convention for CSS <div onclick="alert(’Hello’)">
– Sibling: <div>Sib</div> Block Standalone entity meaningful Click for annoying pop-up
– Element: <div> on its own. Use camel-case: </div>
* Child: <p>a</p> ComponentName.
* Child: <hr /> Element A single part of a
* Child: <p>b</p> block that has no stan- Modifying DOM
</div> dalone meaning. Use a dash:
– Sibling: <img src="s.png"/> ComponentName-descendentName. <div id="a" onclick="
</div> Modifier A variant of a block (or document.querySelector(’#a’)
element). Use two dashes: .innerHTML += ’+’
ComponentName--modifier. ">Plus</div>
CSS Variables
.OkBtn { background: orange; } Running on page load
:root { /* Definition */ .OkBtn-icon { width: 12px; }
--bg: #FEAAFE; .OkBtn--disabled { color: gray; } <script src="http://ex.amp/le.js">
--gap: 20px; </script>
} <div class="OkBtn--disabled"> <script> // Print to dev
.MainContent { /* Use */ <img src="ok.png" console.log("hi"); // tools console
background: var(--bg); class="OkBtn--icon" /> </script>
margin: calc(var(--gap) + 5px); Okay
} </div>

Kickstart Coding http://kickstartcoding.com/