modern-html-css.md

---

title: HTML & CSS (2021) cheatsheet: HTML and CSS topic: Modern HTML (2021) headergfx: true credits: true ...

Common HTML Tags {-}

\

Paragraph : \

```html
<p>Paragraph of text</p>
```

Styling : \

```html
<em>Italic</em> and
<strong>bold</strong>
```

Image : \

```html
<img src="image.jpg" />
```

Link : (aka "anchor")

```html
<a href="http://google.com/">
    Link to Google
</a>
```

Headers : \

```html
<h1>Huge</h1> <h2>Big</h2>
... <h6>Small</h6>
```

Freeform : \

 `<div></div>`{.html} (block) and `<span></span>`{.html} (inline)

Semantic : \

 `<section>`{.html}, `<article>`{.html}, and more

Comment

: \

```html
<!-- Ignored text -->
```

Box model {-}

\

\columnbreak

CSS Examples {-}

\

Text : \

p {
    font-size: 16pt;
    text-align: center;
    color: green;
    font-family: "Arial";
    font-weight: bold;
    line-height: 20px;
}

Sizing : \

div {
    height: 30px;
    width: 100%;
    margin-left: 20px;
    padding-top: 10px;
}

Block styling : \

.highlighted-area {
    display: block;
    box-sizing: border-box;
    background: yellow;
    border: 2px solid green;
    border-radius: 10px;
}

Transition : (animates properties)

.fading-link {
    transition: color 1s,
                padding-left 3s;
}
.fading-link:hover {
    color: green;
    padding-left: 20px;
}

CSS Display {-}

block : fill available width, word-wrap inline children (e.g. paragraph)

inline : word-wrap (e.g. strong)

inline-block : square block within word-wrapped text (e.g. emoji or icon)

flex : line up children, control spacing

grid : position children in grid

\columnbreak

CSS Selectors {-}

Tag \ \ \ div { color: blue; }{.css}

Class .class-name { color: blue; }{.css}

ID \ \ \ \ #id_name { color: blue; }{.css}

Containment : (match children)

/* Match all divs in #a */
#a div { color: blue; }
/* Divs immediately in #b */
#b > div { color: blue; }
/* Wildcard: anything in #c */
#c > * { color: blue; }

Pseudo-elements : (add content)

h1::before { content: "-"; }

Pseudo-classes : (match by position)

/* First p margin */
p:nth-child(1) { margin: 10px; }
/* Striped table rows */
tr:nth-child(odd) { color: gray; }

Grid Container {-}

\

.container-element {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px auto 90px;
}

Grid Child Positioning {-}

\

.child-element {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}