CSS3 Interview Questions

CSS3 interview questions

These CSS3 questions have been designed for various interviews, competitive exams and entrance tests. We have covered questions on both basic and advanced concepts which will help you improve your skills to face interview questions on CSS3.

Who is this CSS3 interview questions designed for?

All the Front End developers, UI/ UX developers and designers will find these questions extremely useful. All freshers, BCA, BE, BTech, MCA and college students wanting to make a career in front end designing will be highly benefitted by these questions.

CSS3 interview questions topics

This section covers CSS3 topics like - Rounded Corners, Border Images, Backgrounds, Colors, Gradients, Shadows, Transitions, Animations, Images, Box Sizing, Media Queries etc.

1. Which property is use to give rounded corners in CSS3?

Answer:

The 'border-radius' property is used to give rounded corners in CSS3. The rounded corners can be given to any element using this property.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #rcorners {
                border-radius: 15px;
                border: 2px solid #000000;
                background: #00FFFF;
                padding: 20px;
                width: 150px;
                height: 50px;    
            }
        </style>
    </head>
    <body>
        <p>Rounded corners for an element with a background color and border:</p>
        <p id="rcorners">Rounded corners!</p>
    </body>
</html>


Output:

rounded corner

2. What is the syntax for adding multiple background images in CSS3?

Answer:

CSS3 allows you to set multiple background images by calling local stored images.

Following syntax is used for adding multiple background images.

Syntax:
background-image: url(img1.gif), url(img2.gif);

Example:

<html>
    <head>
        <style>
            #bg {
                background-image: url("/home/careerride8/careerride8/CSS3-Example/images/background.jpg"), url("/home/careerride8/careerride8/CSS3-Example/images/back-ground.jpg");
                background-position: right bottom, left top;
                background-repeat: no-repeat;
                width: 300px;
                height: 300px;  
            }
        </style>
    </head>
    <body>
        <div id="bg">
            <h1>Hello World!</h1>
        </div>
    </body>
</html>


Output:

background

3. What do you know about word wrapping in CSS3?

Answer:

In CSS3, word wrapping means breaking the long words into next line.

Syntax:
word-wrap: break-word;

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #wordwrap {
                width: 10em;
                border: 1px solid #0000ff;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <p id="wordwrap"> Delhi has a serious problem when it comes to pollution, withpreviousDiwalisturninginto a nightmare for residents.</p>
    </body>
</html>


Output:

word wrap

4. What is the use of Media Queries in CSS3?

Answer:

Media Queries use the @media rule to include a block of CSS properties only if a certain condition is true.

Example:

@media screen and (max-width: 480px)
{
    body
    {
        background-color: green;
    }
}

If the browser window is smaller than 480px, the background color will change to green

5. What is the syntax to avoid repetitive background images using CSS?

Answer:

To avoid repetitive background images, you can use "background-repeat" property with no-repeat value.

"background-repeat" property has two values: repeat and no-repeat.

By default background-repeat property has repeat value.

Example:

<html>
    <head>
        <style>
            #bg{
                background-image: url("/home/careerride8/careerride8/CSS3-Example/images/background.jpg");
                background-repeat: no-repeat;
                width: 300px;
                height: 300px;  
            }
        </style>
    </head>
    <body>
        <div id="bg">
        <h1>Hello World!</h1>
    </body>
</html>


Output:
no repeat