HTML & CSS (2021)

Common HTML Tags CSS Examples CSS Selectors

selector Tag div { color: blue; }

name attribute(s)
declaration block Class .class-name { color: blue; }
opening ID #id_name { color: blue; }
contents
closing Containment (match children)
property value
/* Match all divs in #a */
Paragraph #a div { color: blue; }
Text /* Divs immediately in #b */
<p>Paragraph of text</p> #b > div { color: blue; }
p { /* Wildcard: anything in #c */
Styling font-size: 16pt; #c > * { color: blue; }
text-align: center;
color: green;
<em>Italic</em> and font-family: "Arial"; Pseudo-elements (add content)
<strong>bold</strong> font-weight: bold;
line-height: 20px;
Image h1::before { content: "-"; }
}
<img src="image.jpg" /> Sizing Pseudo-classes (match by position)

Link (aka “anchor”) div { /* First p margin */

height: 30px; p:nth-child(1) { margin: 10px; }
<a href="http://google.com/"> width: 100%; /* Striped table rows */
Link to Google margin-left: 20px; tr:nth-child(odd) { color: gray; }
</a> padding-top: 10px;
}
Headers Grid Container
Block styling
<h1>Huge</h1> <h2>Big</h2>
... <h6>Small</h6> grid-template-columns grid-template-rows
.highlighted-area {
display: block; 1fr 1fr 1fr 1fr 1fr 1fr
Freeform box-sizing: border-box;
<div></div> (block) and background: yellow; 50px auto 50px 50px auto 90px
<span></span> (inline) border: 2px solid green;
border-radius: 10px; 20% 20% auto 100px auto 20%
Semantic }
<section>, <article>, and more .container-element {
Transition (animates properties) display: grid;
Comment grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px auto 90px;
.fading-link {
<!-- Ignored text --> transition: color 1s, }
padding-left 3s;
}
Box model .fading-link:hover { Grid Child Positioning
color: green;
padding-left: 20px; grid-column grid-row
Margin }
2/3
Border
2/ span 2
Padding CSS Display
1/3
Content block fill available width, word-wrap 1 / span 2 1 / span 2
inline children (e.g. paragraph)
inline word-wrap (e.g. strong)
content-box inline-block square block within word- .child-element {
wrapped text (e.g. emoji or icon) grid-column: 1 / span 2;
flex line up children, control spacing grid-row: 1 / span 2;
border-box grid position children in grid }

Modern HTML (2021) kickstartcoding.com A cheatsheet by Kickstart Coding