Task 4a - Position, Box-Sizing and Opacity CSS Properties

There are two very useful properties in CSS i.e. position and box-sizing. You must have good understanding how both of these work. Below I have explained two tasks that should help you to understand them.

Position and Opacity

Before doing this task, I suggest you read basics of different values of position e.g. static, relative, fixed, and absolute. Then do the below task to see how position of one element can effect others.

Using position property you can change the default position of an element on HTML page. From below screen you can see, the element with text is placed at top of image. A container div contains img and text (in span element). The text has property postion:absolute & bottom:0px and the container div has the property postion:relative. Below is how it looks like.

You can clearly see, the text element is placed at top of the image. If we change the text span to div and apply width property, it shall look like this:

Though the text div is placed on image but its not clear from the result because text div width is same as contianers'. We can apply opacity property on text div, it helps to see whats in background. After applying opacity property, it shall look like this.

 I have not shared the solution so that you can think and practice. Definitely you can explore other sites to see solutions of such positioning cases.

Box-Sizing

Another very important CSS property is box-sizing. As you know, by default the width and height of an element is sum of following sizes:

1. Width 
2. Padding 
3. Border

So if we apply CSS property width:500px, border-width:10px, and padding:20px, the total width of element would become 560px. Border and padding are added twice because of both sides. In templates designing, you often need to change the size of border and paddings, when doing so, you have to change the value of width and height as well so that the element stay within the alocated space in layout, it makes it difficult to change these properties because of mental load of calculating sizes again and again.

Consider the following CSS properties. 

.box {
        width: 500px;
        color:#2b669a;
        background-color: #d9edf7;
        font-size: 30px;
        font-family: Roboto;
        font-weight: 500;

        padding:20px;
        border: 10px solid darkgray;
    }

    .alpha{
        box-sizing: border-box;
    }

box class is applied on first element i.e. div. box and alpha class is applied on second element. Whats the difference? when we set box-sizing:border-box, the given width (and height) is the width of whole element. If we also specify padding and border, browser automatically reduce the size of content based sum of border and padding sizes. 

In first case, when only box class is applied, the box-sizing:content-box is used (the default). So by default, the specified width is the width of content only. If we also specify the border and paddings, the total width of element increases accordingly.

Task: Build basic 2 column layout with header and footer using box-sizing:border-box and div as contianers. Analyze how it makes managing sizes easy. You may start working on cnn.com and use same properties there.