CSS
Styling header elements
h1, .h1 { font-family: $font-family–body; font-size: 1.125rem; font-weight: $font-weight–bold; letter-spacing: .075em; line-height: 1.5555555556; margin: 0; @media only screen and (min-width: $break–laptop) { font-size: 2.25rem; line-height: 1.2222222222; } } h2, .h2 { font-family: $font-family–body; font-size: 1.125rem; font-weight: $font-weight–bold; letter-spacing: .075em; line-height: 1.4285714286; margin: 0; @media only screen and (min-width: $break–laptop) { font-size: 1.75rem; letter-spacing: .05em; line-height: … Read moreStyling header elements
CSS selector: attribute containing string
div[id^=”pg-“]:nth-child(1) { margin-top:6.25rem; }
The :is Selector
I imagine a lot of us have had to write some gnarly CSS like this in the past: .post h1, .post h2, .post h3 { line-height: 1.2; } .post img, .post video { width: 100%; } Thankfully, CSS has got our back again with the :is pseudo-class. That CSS can now be hugely simplified into … Read moreThe :is Selector
Adding Steve’s image shadows
#hp-banner p:after { content: “”; position: absolute; z-index: -1; bottom: -52px; left: 0; display: block; height: 57px; width: 100%; background: url(images/GRAFF-CONCAVE.png) center bottom/100% 57px no-repeat; } .entry-content img:not([src*=”.png”]) { padding-bottom: 35px; padding: 0 0 35px !important; background: transparent url(images/GRAFF-CONVEX.png) no-repeat 50% 100%; background-size: 90% 35px; }
Uncommon CSS Properties
Uncommon CSS Properties