- Layout Styling via CSS

Layout Styling via CSS

Layout Styling

It is now time for us to give some structure to these <div> elements. We purposely gave each of these elements a name (ID or class name), so that we can specify it without the risk of erroneously selecting other elements.

Refer to the following screenshot and give it a try:

The result is a series of stacked boxes:

As you can see, each ID-ed element can be selected using "#" as a prefix. Note that the "#container" element serves as, well, a container to all the child elements, making sure that the website has a horizontal constraint and is centred to the page via auto margin.

Let us proceed with the "grandchildren" elements under "intro" and "gallery" (note that #intro and #gallery are now without height, and that class elements are selected using "." prefix):

Definitely not the most desirable effect: this is because we haven't specified that these elements are to be sitting next to (not on top of) each other. We can address this by implementing "display: inline-block":

One more thing: we still need to revisit the HTML file to ensure that there are no whitespaces between these column elements. Annoyingly enough, these spaces register as a real pixel in between these elements and can introduce unwanted gaps between the boxes. Below are two methods you can use to eliminate the gaps:

The result is a group of <div> elements that closely resemble the original design:

Screencast Recording