Powered by GitBook

Magento Front End Developer - Test Questions

Use CSS Effectively

7. Use CSS Effectively to Customize Magento Look and Feel (9%)

Key Areas of Study

Understand as much CSS2 as you can.
1.9 comes with a responsive theme - know your media queries.

Questions

7.1 Given the folling HTML code - what colour would the `<span>` text be within the paragraph? The browser width has been set to 600px.

<html>
    <head>
        <style>
            .urgent {
                color: yellow;
            }

            @media (min-width: 600px) {
                .urgent {
                    color: blue;
                }
            }

            @media (max-width: 599px) {
                .urgent {
                    color: red;
                }
            }
        </style>
    </head>
    <body>
        <p>This is just a <span class="urgent">paragraph</span></p>
    </body>
</html>

A. Yellow
B. Blue
C. Red
D. Black

7.2 How many `<li>` elements would show in the first row of this grid?

<html>
    <head>
        <style>
            ul {
                width: 100%;
            }
            ul li {
                display: block;
                float: left;
                width: 20%;
                padding: 0 2.5%;
                border: 1px solid grey;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>Block</li>
                <li>Block</li>
                <li>Block</li>
                <li>Block</li>
            </ul>
        </div>
    </body>
</html>

A. One
B. Two
C. Three
D. Four

7.3 Based on the code below, what color will the background colour be of the div tag?

<style>
    div { background: #000; }
    #darker { background: #333; }
    .lighter { background: #FFF; }
</style>

<div class="lighter" id="darker" style="background: #F00"></div>

A. black
B. grey
C. white
D. red

7.4 What would be the expected outcome of the following code?

<html>
    <head>
        <style>
            .container {
                width: 100%;
            }
            .left {
                float: left;
                clear: left;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">BOX1</div>
            <div class="left" style="clear:right">BOX2</div>
            <div class="left" style="clear:none">BOX3</div>
        </div>
    </body>
</html>

A. 
BOX1
BOX2BOX3

B.
BOX1BOX2BOX3

C.
BOX1
BOX2
BOX3

D.
BOX1BOX2
BOX3