diff --git a/README.md b/README.md
index 53aba9d9..83161c10 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ A collection of tips to help take your CSS skills pro.
1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing)
1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted)
1. [Use `:root` for Flexible Type](#use-root-for-flexible-type)
-1. [Inherit `font` on Form Elements for a Better Mobile Experience](#inherit-font-on-form-elements-for-a-better-mobile-experience)
+1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience)
1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
@@ -67,7 +67,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you
#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)
-> [!NOTE]
+> [!TIP]
> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset.
[back to table of contents](#table-of-contents)
@@ -171,7 +171,7 @@ You can check if a font is installed locally before fetching it remotely, which
/* Full name */
local("Dank Mono"),
/* Postscript name */
- local("Dank-Mono"),
+ local("Dank Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
@@ -251,7 +251,8 @@ body {
}
```
-Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.
+> [!TIP]
+> Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ)
@@ -365,7 +366,8 @@ It may have a strange name but using the universal selector (`*`) with the adjac
In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`.
-For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*.
+> [!TIP]
+> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq)
@@ -441,7 +443,7 @@ a[href^="http"]:empty::before {
}
```
-That's pretty convenient.
+That's really convenient.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx)
@@ -557,7 +559,8 @@ img::after {
}
```
-Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).
+> [!TIP]
+> Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).
[back to table of contents](#table-of-contents)
@@ -631,21 +634,19 @@ body {
[back to table of contents](#table-of-contents)
-### Inherit `font` on Form Elements for a Better Mobile Experience
+### Set `font-size` on Form Elements for a Better Mobile Experience
-Some form controls do not inherit typographical styles by default. To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `