Skip to main content

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>

Comments

Popular posts from this blog

Collections JAVA

Collection Question:Comparable and Comparator? Comparable Comparator Comparable provides single sorting sequence. In other words, we can sort the collection on the basis of single element such as id or name or price etc. Comparator provides multiple sorting sequence. In other words, we can sort the collection on the basis of multiple elements such as id, name and price etc. Comparable affects the original class i.e. actual class is modified. Comparator doesn't affect the original class i.e. actual class is not modified. Comparable provides compareTo() method to sort elements. Comparator provides compare() method to sort elements. Comparable is found in java.lang package. Comparator is found in java.util package. We can sort the list elements of Comparable type byCollections.sort(List) method. We can sort the list elements of Comparator type   byCollections.sort(List,...

React

Question : What are the different types of components? Answer : There are two types of component, function component and the class component, 1. Functional component : They are also called as the stateless component, they accept the props and returns the DOM. They are the most basic way of defining the component in the React. 2. Class Component : They are also called as the stateful component. They are more versatile way of defining the component where they have the state and props, the difference between state and props is the state can be changed but props can not be changed once defined. Question : Describe the following webpack.config.js var config = {     entry: './main.js',     output: {         path: __dirname,         filename: 'index.js',     },     devServer: {         inline: true,         port: 8080     }, module: {       ...

12 - HTML 5 and CSS

HTML 5 Question : If I do not put <! DOCTYPE html> will HTML 5 work? Answer : No, browser will not be able to identify that it’s a HTML document and HTML 5 tags will not function properly. Diff between HTML 5 Layout and HTML 4 or previous HTML? Answer : A typical web page has headers, footers, navigation, central area and side bars. Now if we want to represent the same in HTML 4 with proper names to the HTML section we would probably use a DIV tag. But in HTML 5 they have made it more clear by creating element names for those sections which makes your HTML more readable. Below are more details of the HTML 5 elements which form the page structure. <header> : Represents header data of HTML. <footer> : Footer section of the page. <nav> : Navigation elements in the page. <article> : Self-contained content. <section> : Used inside article to define sections or group content in to sections. <aside> : Represent side bar contents of a...