selector {
declaration;
property: value;
}
(The whole thing is a rule/ruleset)
https://twitter.com/chriseppstein/status/1100115119437111296
Making sure a container with floated blocks in it expands to fit them
Wrapping only long lines, but making others break by word:
white-space: pre-wrap; // whitespace and newline preserved, line breaks added to wrap lines white-space: pre-line; // newline characters are preserved, but other whitespace is collapsed, and line breaks are added to wrap lines overflow-wrap: break-word; // To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. word-wrap: break-word; // alias for overflow-wrap, not sure which browsers support which hyphens: auto; // browser hyphenates where necessary
Centered:
background-position: center;
background-repeat: no-repeat;
Cover:
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Fit:
background-position: center;
background-repeat: no-repeat;
background-size: contain;
@media only screen and (min-width: 600px) {
}
Mobile-first means the larger size (min-width) is the override
/* Drawn from points on https://css-tricks.com/overriding-default-button-styles/ */
.unstyled-button {
background: none;
border: none;
padding: 0;
text-align: left;
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
}
height: 100%
- percentage of containing block’s heightheight: 100vh
- 100% of viewport’s height (does not exclude header or footer)height: calc(100vh - 65px)
- subtract header