Add new css articles

blog_posts/css-current-color.md

@@ -0,0 +1,36 @@
+---
+title: The currentColor CSS keyword
+type: tip
+tags: css,visual
+expertise: beginner
+author: chalarangelo
+cover: blog_images/picking-berries.jpg
+excerpt: The `currentColor` CSS keyword is a nifty alternative to custom properties for simple use cases.
+firstSeen: 2022-11-30T05:00:00-04:00
+---
+
+Modern CSS supports custom properties, yet the `currentColor` keyword precedes them by a few years. Thus, you might still find it in the wild and it is worth knowing what it does and how it works.
+
+```html
+<p>My <span>background</span> is the same color as my <a href="#">text</a>.</p>
+```
+
+```css
+p {
+  color: #101010;
+}
+
+p, p > * {
+  background-color: currentColor;
+}
+
+a {
+  color: #0077ff;
+}
+
+span {
+  color: #fd203a;
+}
+```
+
+`currentColor` contains the current value of the `color` property of the element. It is useful when you want to use the same color for multiple properties, such as `border-color` or `background-color`. It also respects the cascade, so if no value is provided for `color`, it will use the value of the `color` property of the parent element.

blog_posts/css-inherited-properties-cheatsheet.md

@@ -0,0 +1,51 @@
+---
+title: CSS inherited properties cheatsheet
+shortTitle: Inherited properties
+type: cheatsheet
+tags: css,layout
+expertise: beginner
+author: chalarangelo
+cover: blog_images/half-trees.jpg
+excerpt: A quick reference for inherited CSS properties.
+firstSeen: 2022-11-20T05:00:00-04:00
+---
+
+The [CSS specification](https://www.w3.org/TR/CSS21/propidx.html) clearly states which CSS properties are inherited but the related appendix is not the most user-friendly resource. Here's a quick reference of the inherited properties that you are most likely to run into:
+
+- `border-collapse`
+- `border-spacing`
+- `caption-side`
+- `color`
+- `cursor`
+- `direction`
+- `empty-cells`
+- `font-family`
+- `font-size`
+- `font-style`
+- `font-variant`
+- `font-weight`
+- `font-size-adjust`
+- `font-stretch`
+- `font`
+- `letter-spacing`
+- `line-height`
+- `list-style-image`
+- `list-style-position`
+- `list-style-type`
+- `list-style`
+- `orphans`
+- `quotes`
+- `tab-size`
+- `text-align`
+- `text-align-last`
+- `text-decoration-color`
+- `text-indent`
+- `text-justify`
+- `text-shadow`
+- `text-transform`
+- `visibility`
+- `white-space`
+- `widows`
+- `word-break`
+- `word-spacing`
+- `word-wrap`

blog_posts/css-style-default-links.md

@@ -0,0 +1,22 @@
+---
+title: "Tip: Style links without a class"
+shortTitle: Style default links
+type: tip
+tags: css,visual,interactivity
+expertise: beginner
+author: chalarangelo
+cover: blog_images/citrus-drink.jpg
+excerpt: A short summary of your story up to 180 characters long.
+firstSeen: 2022-11-23T05:00:00-04:00
+---
+
+When styling injected or generated HTML content, you might not have access to the classes or IDs of the elements you want to style. This can become especially annoying when dealing with link elements. Luckily, you can use the `:not()` selector with an appropriate attribute selector to check for the abscence of a class and style links accordingly.
+
+```css
+a[href]:not([class]) {
+  color: #0077ff;
+  text-decoration: underline;
+}
+```
+
+As a bonus tip, you can use [the previous tip about selecting any link](/articles/s/css-select-any-link) to further enhance this solution.

blog_posts/css-unitless-line-height.md

@@ -0,0 +1,25 @@
+---
+title: Why should line-height be unitless in CSS?
+shortTitle: Unitless line height
+type: tip
+tags: css,layout,visual
+expertise: intermediate
+author: chalarangelo
+cover: blog_images/gold-typewriter.jpg
+excerpt: You might have heard that `line-height` should be unitless, but do you know why?
+firstSeen: 2022-11-27T05:00:00-04:00
+---
+
+I've often heard that `line-height` should always be unitless. In my earlier coding years, I didn't question it much, but lately I've come to wonder why that is. In my mind `1.5` and `1.5em` should produce the same result, right? Turns out, they don't.
+
+There's a subtle difference between the two and it has to do with the fact that `line-height` is an inherited property. A unitless value will be inherited as-is, meaning the actual value will be recalculated for each element, accounting for the `font-size` of the element. However, a `line-height` with any unit will be calculated once and then inherited as a fixed value. This can cause vastly different results, especially if the declaration is in the `body` element or something similar.
+
+Speaking of the `body` element, it could be a good idea to define your base `line-height` as a unitless value there to minimize repetition:
+
+```css
+body {
+  line-height: 1.5;
+}
+```
+
+So, is `line-height` with units prohibited and should we always use unitless values? Not necessarily. Factors such as codebase conventions, design systems and personal preference play a role here. For example, maintaining an exact, perfect vertical rhythm with unitless `line-height` values can be a bit tricky. In such cases, using `line-height` with units can be a good idea, but remember to be consistent to avoid headaches.