CSS3 Interview Questions Part 2

6. What is the use of Float property in CSS?

Answer:

Float property is used to move or float the image to the right or the left along with the text wrapped around it.

Syntax:
float: none | left | right | initial | inherit;

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
            float: right;
           }
        </style>
    </head>
    <body>
        <p><img src="http://www.careerride.com/image/thumb/Aug/2017/celebrating-festivals.jpg" alt="Ganesha" width="140" height="95"> Festivals give us backdrop to be truly ourselves. We leave egos and troubles at home and eat, drink, dance together and live in the moment. They are so intoxicating that all good memories keep us fresh for many days even after the fest day.<br>We can't imagine a life without festivals. While we enjoy our festivals, we learn how to be social, secular and enjoy every bit of life. They often help us with self exploration and personal growth that can be catalyst for many positive changes in life.</p>
    </body>
</html>


Output:

css float

7. What do you know about pseudo-elements?

Answer:

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:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p::first-letter {
                color: #0000ff;
                font-size: xx-large;
            }
            p::first-line {
                color: #ff0000;
                font-variant: small-caps;
            }
        </style>
    </head>
    <body>
        <p>Festivals give us backdrop to be truly ourselves. We leave egos and troubles at home and eat, drink, dance together and live in the moment. </p>
    </body>
</html>


Output:

pseudo elements

8. What is the use of Z index function?

Answer:

Z index is used for specifying the overlapping element. Sometimes, overlapping may occur while using CSS for positioning HTML elements. Z index helps to avoid overlapping elements. It is a number which can be positive or negative. The default value of Z index is zero (0).

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <h1>Careerride.com</h1>
        <img src="http://www.careerride.com/image/Oct/2017/albatross-can-fly-800-km-in-one-day.jpeg" width="250" height="250">
        <p> Z index is used for specifying the overlapping element.</p>
    </body>
</html>


Output:

z index function

9. Which property is use to create box shadow and text shadow in CSS3?

Answer:

The 'box-shadow' property is used to create box shadow and the 'text-shadow' property is used to create text shadow in CSS3.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 250px;
                height: 50px;
                background-color: #FF00FF;
                box-shadow: 10px 10px;
            }
            h1 {
                color: white;
                text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
            }
        </style>
    </head>
    <body>
        <div><h1>Careerride.com</h1></div>
    </body>
</html>


Output:

box shadow and text shadow

10. How does class selector differ from an ID selector?

Answer:

Class selector can be applied to multiple HTML elements, whereas ID selectors are unique and can only be applied to a single element.

The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.

The id selector uses the id attribute of an HTML element to select a specific element. To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p.class-selector {
        background: yellow;
                text-align: center;
                color: blue;
                font-size: 200%
            }
            #id-selector {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <p class="class-selector">This is an example of class selector.</p>
        <p id="id-selector">This is an example of id selector.</p>
    </body>
</html>


Output:

class selector and id selector
▲