16. How inline and block elements are different from each other?
Answer:
Inline elements don't have line breaks. It doesn't have elements to set width and height.
An inline element does not start on a new line.
Examples of inline elements:
Block elements do have line breaks and they define the width by setting a container. It also allowed setting height. It can contain the elements that occur in inline elements.
A block-level element always starts on a new line.
Examples of 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>A block-level element always starts on a new line.</p>
</div>
<h3>Inline elements</h3>
<p>My <span style="color:red">Inline elements</span> does not start on a new line.</p>
</body>
</html>
17. How to you override the underlining of hyperlinks?
Answer:
The concept of override the underlining of hyperlinks in CSS is done by using control statements and using external style sheet. For Example:
A { text-decoration: none; }
Suppose this is being written in CSS file and in the anchor tag in HTML, the format is being written as:
<a href="career.html" style="text-decoration: none">link text</a>
So, anything you write as inline will override the style for the hyperlink used in external style sheet.
18. What is the use of CSS float?
Answer:
CSS float is useful when you don't have to give width for an element or you don't want to keep the element fixed. It allows the elements to be given left or right boundaries to expand and wrap all other elements. Float is basically used for images and for layouts.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p><img src="http://www.careerride.com/image/thumb/Aug/2017/triple-talaq.jpg" alt="Triple talaq">
Triple talaq (also known as talaq ul bidat/talaq-e-biddah or talaq-e-mughallazah) is a form of irrevocable Islamic divorce practiced by Muslims in India before it was declared unconstitutional here. It permitted a Muslim man to legally divorce his wife by uttering talaq (Arab word for divorce) thrice. It also permitted the Muslim community to initiate a divorce through various means such as verbal, written or even electronic form.</p>
</body>
</html>
19. What is the use of object-fit property in CSS3?
Answer:
The object-fit property is used to specify how an image or video should be resized to fit its container.
The object-fit property can have the following values:
fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit.
contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
none - The replaced content is not resized.
scale-down - The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:300px;
object-fit:fill;
}
</style>
</head>
<body>
<h2>object-fit Property</h2>
<img src="http://www.careerride.com/image/Oct/2017/albatross-can-fly-800-km-in-one-day.jpeg">
</body>
</html>
20. What is graceful degradation?
Answer:
Graceful degradation is a concept that allows a system to continue to operate properly in the event of a failure of a component.
When a developer creates a website he creates it to take advantage of the latest browser support etc. but care should also be taken to render the website properly on older browsers.
In this way the designer is able to get a wider audience by stepping down some of the features to provide basic functionality to people with older browsers.
