Day 4
Local Setup STEPS:
The problem with having background images, with CSS:
Solution:
the HTML's <img>
tag
<img
class="image"
src="https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg"
alt="MDN Logo"
/>
<img>
tag is an inline tag
margin and padding in CSS:
.demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
/* margin shorthand */
margin: 5px 5px 5px 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
/* padding shorthand */
padding: 5px 5px 5px 5px;
}
a {
background-color: lightblue;
color: black;
}
a:hover {
border: 5px dotted gray;
}
a:first-child {
background: floralwhite;
}
Conditional CSS:
:hover,
:focus,
:link,
:visited,
:active,
:nth-child(),
transitions
in CSS:
p {
transition-property: background-color;
transition-duration: 500ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
/* transition: background-color 300ms ease-in-out 0s; */
}
p:hover {
background-color: skyblue;
}
when value of a property changes on some user action, we can enrich the path to that change and make it visibly appealing for user.