Question

Give the CSS code required to make the entire web page shown in Figure 2 (on the following page). You are to label your answers using the form 4a), 4b), 4c) etc. The design requirements are as follows:

a. The page should full the entire screen. [1]
b. The body should have no margins or padding. [1]
c. The left and right sidebars must be positioned appropriately. [2]
d. The navigation bar section must have the following properties [1]
i. Occupy seven percent (7%) of the page height.
ii. Background color #581845
e. The navigation links in the header must have the following properties: [4]
i. Georgia font
ii. Bold
iii. Centered
iv. White text color
v. Set bottom border to solid when hovered over
f. The area between the navigation section and the footer must be eighty-six percent (86%) of
the page height. [I]
g. The footer section must have the following properties: [1]
i. Occupy seven percent (7%) of the screen height.
ii. Text should be white in color.
h. Any link on the page, when hovered over must change its background color to #C70039.
[1]
i. Any link on the page, when active, must change its background color to #FFC300. [1]
j. Both sidebars must have a background color of #FCEFF1 [1]
k. The left-sidebar must have the following properties: [1]
i. Links must have a text color of #FF5733.
ii. Change link text color to white when hovered over

Answer 1

Here is the CSS code that would fulfill the design requirements for the web page described:

4a)

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

4b)

body {

margin: 0;

padding: 0;

}

4c)

.left-sidebar, .right-sidebar {

position: absolute;

height: 100%;

}

.left-sidebar {

left: 0;

}

.right-sidebar {

right: 0;

}

4d)

.navigation-bar {

height: 7%;

background-color: #581845;

}

4e)

.navigation-bar a {

font-family: Georgia;

font-weight: bold;

text-align: center;

color: white;

}

.navigation-bar a:hover {

border-bottom: solid;

}

4f)

.main-content {

height: 86%;

}

4g)

.footer {

height: 7%;

color: white;

}

4h)

a:hover {

background-color: #C70039;

}

4i)

a:active {

background-color: #FFC300;

}

4j)

.left-sidebar, .right-sidebar {

background-color: #FCEFF1;

}

4k)

.left-sidebar a {

color: #FF5733;

}

.left-sidebar a:hover {

color: white;

}

Step-by-step explanation:

Note that this CSS code assumes that the left sidebar has a class of "left-sidebar", the right sidebar has a class of "right-sidebar", the navigation bar has a class of "navigation-bar", the main content area has a class of "main-content", and the footer has a class of "footer". You will need to add these classes to the relevant elements in your HTML code for the CSS styles to be applied.