crome extention: Color Zillla Options
<head>
<style>
p {
background-color: #fee101; /rgb(254, 225, 1);
}
</style>
</head>
<body>
<form>
<p>
When we were children, we used to think that when we were grown-up we would no longer be vulnerable. But to grow up is to accept vulnerability... To be alive is to be vulnerable. -Madeleine L'Engle
</p>
</form>
</body>
p {
background-color: rgba(254, 225, 1, 0.35) a=alpha(opacity)
}
<head>
<style>
p {
background-color: #fee101;
}
a {
color: #fee101;
}
</style>
</head>
<body>
<form>
<p>
When we were children, we used to think that when we were grown-up we would no longer be vulnerable. But to grow up is to accept vulnerability... To be alive is to be vulnerable. -Madeleine L'Engle
</p>
<div>
<a href="#">Go to Website</a>
</div>
</form>
</body>
<style>
:root {
--main-color:#fee101; variable: two dash, no spaces
}
p {
background-color: var(--main-color);
}
a {
color: var(--main-color);
}
</style>
add variable(custom property) element 'root'. You can save main color inside of the root.
<head>
<style>
:root {
--main-color: #fee101;
--minor-color: #423530;
--default-border: 2px dotted var(--minor-color);
}
p {
background-color: var(--main-color);
}
a {
color: var(--main-color);
border: var(--default-border);
}
</style>
</head>
<body>
<form>
<p>
When we were children, we used to think that when we were grown-up we would no longer be vulnerable. But to grow up is to accept vulnerability... To be alive is to be vulnerable. -Madeleine L'Engle
</p>
<div>
<a href="#">Go to Website</a>
</div>
</form>
</body>
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: transformations (0) | 2021.05.06 |
|---|---|
| KokoaTalk Clone Coding: transitions (0) | 2021.05.05 |
| KokoaTalk Clone Coding: pseudo selector (0) | 2021.05.05 |
| KokoaTalk Clone Coding: states 2 (0) | 2021.05.05 |
| KokoaTalk Clone Coding: states 1 (0) | 2021.05.05 |
