Day 40: Learning CSS Variables by Building a City Skyline.

How time runs! Starting a new section today on learning CSS Variable by building a City Skyline(hmmmmmm).

Let me quickly show you the steps I took:

1. Started by adding the !DOCTYPE html declaration at the top of the document so the browser knows what type of document it's reading.

1. Added an opening and closing html tags below the DOCTYPE. I didn’t forget to add the language type.

1. Next, I added opening and closing head and body tags within the html element.

1. Within the head, a meta element with a charset of UTF-8 was nested, a title element with a title of City Skyline, and a link element that links my styles.css file to my html document was also added.

1. Added a border to everything by using the * selector, and gave it a border of 1px solid black. This is a trick that helps visualize where elements are and their size. I will remove this later. (In CSS, you can target everything with an asterisk).

1. Also added a box-sizing of border-box to everything.

1. Gave the body a height of 100vh. Removed the default margin from the body by setting the margin to 0. Finally, set the overflow property to hidden to hide any scroll bars that appear when something extends past the viewport.

1. Created a div element in the body with a class of background-buildings. This will be a container for a group of buildings.

1. Gave the background buildings element a width and height of 100% to make it the full width and height of its parent, the body.

1. Nested a div with a class of bb1 in the background buildings container. Gave .bb1 a width of 10% and height of 70%. this will be your first building.

That's all for today. This is a free course on freeCodeCamp and I am enjoying every step of it. Remember to drop a comment. Thank you.