Designer, Code Monkey,
Cyclist, Gamer, Coffee Addict
at Love Creative UK
p {
color: DarkGoldenRod;
font-size: 50px;
font-weight: bold;
text-align: center;
}
<p>Hello Bristol!</p>
currentColor always resolves to the value
of the color property
h1 {
color: currentColor;
}
body {
color: DarkGoldenRod;
}
hr {
background: currentColor;
}
<p>Hello Bristol</p>
<hr>
The inherit keyword can be used in any
CSS property.
It always corresponds to the computed value
of the parent element.
h1 {
color: inherit;
}
<p>Hello Bristol</p>
<hr>
<p>
<a href="www.liamjaydesigns.com">www.liamjaydesigns.com</a>
</p>
body {
color: DarkGoldenRod;
}
a {
color: DarkGoldenRod;
}
body {
color: DarkGoldenRod;
}
a {
color: inherit;
}
body {
color: DarkGoldenRod;
}
a {
color: inherit;
text-decoration: inherit;
}
.callout {
position: relative;
color: #6b592e;
border: 1px dashed #5c5a60;
background-color: #fffce0;
padding: 0.75rem;
border-radius: 8px;
}
.callout:before {
content: "";
position: absolute;
top: -0.55em;
left: 1em;
padding: 0.5em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
<ol>
<li>Item 1</li> |
<li>Item 2</li> |
<li>Item 3</li> |
<li>Item 4</li> |
<li>Item 5</li>
</ol>
li {
display: inline-block;
}
li {
display: inline-block;
}
li + :before {
content: ' | ';
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
More info: https://tinyurl.com/ycb27tbn
html {
font-size: 100px;
}
.wrapper {
width: 4ch; /* 1 ch is the width of a "0" */
}
Allows for perfect element + text scaling.
ch — Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.