HTML&CSS

Question : Why title element is important?
Answer : This is the element represent, html page in the tab, also when you add this webpage as a bookmark then it will be a default name saved for the bookmark name.

Question : What is the benefit of using the label?
Answer : the for attribute of lable tag will able to associate the name with the element, and clicking on the label itself is good enough to add the focus and and selection to the given element.

Question : Does the box-sizing property affect the overall width or height of the elements?
Answer : Yes, border width, padding and margin is added to the width properties,
e.g.

h1 {
    line-height:40px;

    font-weight: bold;

    color: aqua;

    font-size: 40px;

    width: 300px;

    padding: 50px;

    margin: 50px;

    border : 10px dotted;

    text-align: center;

}

This means that the overall of width of the element is width value  + 2 * padding [ right + left ] + 2 * border [ left + right ].

Question : What is box-sizing property?
Answer : if we add the box-sizing property as border-box, then it will try to subtract the padding and border width to make sure the width is equal to 300 px like above example rather than, adding the padding vale + border width value to overall width of the content.

Note that the margin property is not counted as overall width of an element.

Question : What is the main differance between block and inline element.
Answer : All the block level element will take the available space, additionally two adjacent or sibling block elements are stack on each other i.e. they are separated with the line break, the example of block element are div, h1,h2,p.
But on the the other hand the inline elements are separated by space and they will only take space as they need, mostly based on the inner content, e.g. span, addition to that, they completely ignore the width and margin properties and outcome of the page will not have explicit effect of width and margin for the inline elements.

Question : can we convert inline element like span to behave like block element like div?
Answer : Yes, if we add the display property to the span as block, e.g span { display : block }, then it will be to behave like regular block element.

Question : What is descendant selectors?
Answer : this selector applies the rules to any children. e.g.

.content .contentTitle {
    font-weight: bold;

    font-style: italic;

}

So that means if we have a parent element with the class 'content' then any child, having the class contentTitle will have this rule applied, addition to that the child can be nested n level deeper and need not have to be immediate child.

<div class="content" id="tab2Content">
    <div>
        <p>
            <span class="contentTitle">I am title</span>
        </p>
    </div>
    Content of TAB 2 
</div>

Question : give example of the title and description where the content will float around the title, as we want to start the content as soon as our title is ending, and title text can be as big as 25px, but the content text may be 14px range.
Answer :

.content .contentTitle {
    font-size: 25px;

    font-weight: bold;

    font-style: italic;

    float: left;

    margin-right: 5px;

}

So that means the element will float on the left side of screen and preceding or non floating elements will displayed right next to the floating element, even though internally the element is block element like div tag.

Question : Now if you don't want then next element to float around the floated element, can we do anything about it?
Answer : Yes we can use the clear properties, e.g.

.content .contentTitle {
    font-size: 25px;

    font-weight: bold;

    font-style: italic;

    float: left;

    margin-right: 5px;

}

.content .contentDescription {
    font-weight: normal;

    font-style: normal;

    clear: left;

}

Now the contentDescription will need not have to float, and hence it will behave like regular block element, i.e. it will shown in the next line rather, starting from the end of the contentTitle.

Question : What will happen if we apply float:left, addition to the behavior which move everything towards left, what else happen.
Answer : It start behaving like display:block, hence padding and width property will be start ownered by the elements.


Question : Give an example of @keyframe?
Answer : The below example is for making a image bounce up and down, and finally it will come back to the original position.

<head>
    <style>
        figure img:target{
            animation-name: slideDown;
            animation-duration: 5s;
            animation-timing-function: linear;
        }
        @keyframes slideDown {
            0% { transform: translateY(-100%)}
            10% { transform: translateY(100%)}
            20% { transform: translateY(-80%)}
            30% { transform: translateY(80%)}
            40% { transform: translateY(-50%)}
            50% { transform: translateY(50%)}
            60% { transform: translateY(-30%)}
            70% { transform: translateY(30%)}
            80% { transform: translateY(-10%)}
            90% { transform: translateY(10%)}
            100% { transform: translateY(0%)}

        }

    </style>
    <script>
        function backToNormal() {
            setTimeout(function (){
                var sharkImage = window.location.href.split('#');
                window.location.href = sharkImage[0];
            },6000);

        }

    </script>
</head>
<body>
<nav class="grouping">
    <figure>
        <img id="shark" src="blueShark.jpg" alt="sharky" width="200" height="220" style="float: left">
    </figure>
    <a href="#shark" onclick="backToNormal()">Click me to animate shark</a>

</nav>
</body>

Question : Write a animation which can cover a picture and show it for some time then hide?
Answer:

<head>
    <style>
        figure span {
            display: inline-block;
            transform: translateX(-100%);
            background-color: blue;
            height: 220px;
            width: 200px;
        }
        figure span:target {
            animation-name: slideSide;
            animation-duration: 5s;
            animation-timing-function: ease;
        }

        @keyframes slideSide {
            0% { opacity: .1 ; background-color: yellow}
            10% { opacity: .2 ;background-color: orange}
            20% { opacity: .3 ; background-color: green}
            30% { opacity: .4 ; background-color: lightblue}
            40% { opacity: .5 ;background-color: cyan}
            50% { opacity: .6 ; background-color: wheat}
            60% { opacity: .5 ;background-color: aqua}
            70% { opacity: .4 ; background-color: rosybrown }
            80% { opacity: .3 ;background-color: hotpink }
            90% { opacity: .2 ;background-color: blue }
            100% { opacity: .5; background-color: blue ; }

        }
    </style>
    <script>
        function backToNormal() {
            setTimeout(function (){
                var sharkImage = window.location.href.split('#');
                window.location.href = sharkImage[0];
            },8000);

        }

    </script>
</head>
<body>
<nav class="grouping">
    <figure>
        <span id="cover"></span>
        <img id="shark" src="blueShark.jpg" alt="sharky" width="200" height="220" style="float: left">
    </figure>
    <a href="#cover" onclick="backToNormal()">Cover me with the blue sheet</a>

</nav>
</body>