Welcome back. Remember yesterday we started a new section on building a piano via html and CSS. We started by laying some basic structures yesterday so we continue today. By the way, I am learning via free code camp.
- I targeted the id piano and changed the background-color, height and width.
- I set the margin to 80px auto
- Next target is the class keys. Changed the background-color, width and height.
- To the class keys a padding -left of 2px was added.
- Now time to shift the keys into place step by step.
- Time to style the keys themselves using the class key.
- Lets create magic with margin and float property now.
- Remember the pseudo-selectors that was introduced yesterday. A piano has black and white keys and currently we have only white keys, now to get the black keys, a new selector was used .key.black—key::after, the background-color is set and a new property was introduced – content. The content property is used to set or override the content of the element.
- The position and left properties was then added to styling the pseudo selector of the black keys.
- Lastly, width and height properties were added.
That's all for today. Please a comment.