11. What is meant by Block-level elements?
Answer:
Block-level element is an element that takes up the full width available.
A block-level element always starts on a new line means it has a line break up before and after it.
Following are some of the Block-level elements.
- <div>
- <h1> - <h6>
- <p>
- <form>
Example:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:#85C1E9;padding:10px;">
<h3>Block elements</h3>
<p>Block element is an element that takes up the full width available.<br> A block-level element always starts on a new line means it has a line break up before and after it. </p>
</div>
</body>
</html>
12. What is Sprite?
Answer:
Sprite is a collection of images put into one single image.
It reduces the number of HTTP requests, load time of page and bandwidth.
You can show and hide different parts of the sprite depending upon what you need using CSS positioning.
13. What is Flexbox in CSS3?
Answer:
Flexbox (or Flexible Box) is a new layout mode in CSS3.
This box model provides an improvement over the block model.
It is a layout mode that accommodates different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
14. What is meant by Style Property Inheritance?
Answer:
Style property Inheritance is a rule.
This rule allows a style property of a child tag to inherit the same property of the parent tag, if that property is not defined on the child tag.
This inheritance rule is very important because a lots of style properties are defined on the parent tags and inherited to the child tags.
15. How pseudo-classes are different from pseudo-elements?
Answer:
Pseudo classes are used to add style and special effects to some selectors which is being used inside some class. Following is the syntax,
Syntax: selector:pseudo-class {property:value;}
e.g. - a:link {color:#FF0000;}
Pseudo classes can be combined with other classes as well. For example,
Syntax: selector.class:pseudo-class {property:value;}
e.g. - a.red:visited {color:#FF0000;}
CSS pseudo-element are used to style specified parts of an element. There are two pseudo-elements:
1. first-line
2. first-letter
The ::first-line pseudo-element is used to add a special effect to the first line of a text.
The ::first-letter pseudo-element is used to add a special effect to the first character of a text.
Example:
p::first-letter {
color: #0000ff;
font-size: xx-large;
}
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
