WDD - Implementation (CSS and HTML)

Question 1

Explain the purpose of the CSS float property.

Answer 1

The float property places an element on the left or right side of its container.

Question 2

Write a CSS rule to put any images in the class cartoonImage to the right of the page

Answer 2

.cartonImage{float:right;}

Question 2

Explain the purpose of the CSS height and width properties.

Answer 2

The CSS height and width properties are used to set the height and width of an element.

Question 2

Complete the CSS rule below to make a section of the webpage about Newcastle appear on the left hand side of the page with the following dimensions -300px × 200px
#newcastle{
}

Answer 2

newcastle{

width: 300px;
height: 200px;
float:left;
}

Question 3

Describe the effect of the CSS display:none property.

Answer 3

The element is not displayed.

Question 3

Describe the effect of the CSS display:inline property.

Answer 3

The element is dislayed on the same line as the preceding element.

Question 3

Describe the effect of the CSS display:block property.

Answer 3

The element is displayed as a block, generating line breaks before and after.

Question 4

Write a CSS rule to hide the section of a website shown below?

<div>
<p> Burger </p>
<p> £7.99 </p>
</div>

Answer 4

burgerInfo{display:none;}

Question 5

The a website contains the following HTML

<section>
<p>Fruits</p>
<p>Vegetables</p>
<p>Animals</p>
</section>

Write a CSS rule (without using float) which will make the content display on website as shown below.
Fruits Vegetables Animals

Answer 5

.categories p{display: inline-block;}

Question 6

What is the difference between display block and display inline?

Answer 6

Block elements start on a new line and fill the whole width. Inline elements stay in the same line and only take up as much space as needed.

Question 7

Describe the difference between CSS margins and padding.

Answer 7

The margin property is used to create space around an element outside its border.
The padding property is used to create space around an element inside its border.

Question 8

What does clear: both; do?

Answer 8

Clear both removes the effect of any floats elements on both sides.

Question 8

The layout around and image of the the jungle should have 10 pixel gaps above and to the left of the image, there should also be a gap of 20 pixels to the right of the image .
Create a CSS rule for this image.
.jungleImage {}

Answer 8

.jungleImage { margin-top:
10px; margin-left: 10px ;
margin-right: 20px ;}
OR
.jungleImage { padding-top:
10px; padding -left: 10px ;
padding -right: 20px ;}

Question 9

What does clear: left; do?

Answer 9

Clear left removes the effect of any floats elements on the left side.

Question 10

What does clear: right; do?

Answer 10

Clear right removes the effect of any floats elements on the right side.

Question 11

Explain what this code will do
nav ul {
list-style-type: none;
}

Answer 11

Remove Bullet Points from the nav bar

Question 12

Write a CSS rule to remove the bullet points from the nav bar

Answer 12

nav ul {
list-style-type: none;
}

Question 13

Explain what this code will do
a:hover {
background-color: green;
}

Answer 13

It will change the background colour to green when the mouse hovers over an anchor (link)

Question 14

Write a CSS rule which the appearance of the link in the nav bar to have a blue background and red text when the mouse hover overs it

Answer 14

nav ul li a:hover {
background-color: blue;
color: red;
}

Question 15

The following code has been used to remove the bullet points from the nav bar:
nav ul {
list-style-type: none;
}
Explain why the unordered list in the nav bar will display differently to any other unorder list in the website?

Answer 15

The code uses a descendant selector this code only selects and modifies unordered lists in the nav element therefore other unordered list are not affected.

Question 16

Write a CSS rule to create a horizontal navigation bar so that:
no bullet points are shown,
each item is placed horizontally with 100 px width for each element and the text in the center, 10 pixels padding in added around each link, when the cursor goes over the the link the background is blue and the text is yellow.

Answer 16

nav ul {
list-style-type: none;
}

nav ul li {
float: left;
width: 100px;
text-align: center;
}

nav ul li a {
display: block;
padding: 10px;
}

nav ul li a:hover {
background-color: blue;
color: yellow;
}

Question 17

Write a CSS rule to to make all content in the following classes have a red background. Top and Middle

Answer 17

.top, .middle { background-color: red;}

Question 17

A section of the CSS code for styling a website is shown below:

main {background-color: red;}
#king {background-color: red; padding: 10px;}
p {padding: 10px;}
h1 {color: white; font-size: 22px; padding: 10px;}
main h2 {padding: 10px;}

Use grouping selectors to re-write the code to make it more efficient

Answer 17

• main, #king
  {background-color: red}
• # king, p, h1, main h2{padding: 5px}
• h1 {color: white; fontsize: 22px}

Question 18

Write a CSS rule to to make all margins for images, h2 and h3 headings 20 pixels,

Answer 18

h2,h3,img {margin:20px;}

Question 19

Describe a grouping selector.

Answer 19

CSS selectors can be grouped together, allowing the same style to be applied to multiple elements. e.g h1, h2, p { color:green; }

Question 20

What type of CSS rule has been used below? h1, h2, p { color:green; }

Answer 20

A grouping selector

Question 21

Create a CSS rule to make any text in the paragraph elements in the main section of the website purple

Answer 21

main p{ color: purple; }

Question 22

State the type of selector shown below and state its effect footer p {font-size: 10px; }

Answer 22

** Desendant Selector** The CSS rule would only be applied to paragraphs in the footer element.

Question 23

What HTML Layout elements are used to define the major areas of a web page.

Question 24

write a CSS rule to make this HTML element yellow

Make me yellow.

Answer 24

#yellow { background-color: yellow; }

Question 25

write a CSS rule to make this HTML element yellow

Make me yellow.

Answer 25

.yellow { background-color: yellow; }

Question 26

Write the html tags which would be used to create a form element on your web page

Question 27

Write the HTML which would allow a users to enter there first name in a form

Answer 27

First Name:

Answer 28

Surname: