Effects

Question 1

A web page you are working on has a very thin banner image that is contained in a div tag. It was originally intended that the image would be repeated across the banner to create a gradient effect, but the original coder did not complete this functionality. How would you fill the whole banner with the image without changing the image size?

Answer 1

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

This is achievable by making use of the background-repeat attribute. If it is set to repeat-x, the image will repeat across the banner container, i.e. background-repeat: repeat-x;

Question 2

You wish to show part of a larger image without necessarily editing the image in a graphics program. Give the skeleton code for how you could use CSS to show only the top right part of a large image within a smaller div container showing?

Answer 2

divcontainer {background-position: right top;}

Question 3

To create a header for a website, your client wants the image not to be savable by right-clicking, so you decided to embed the image in a div tag. Give the skeleton code for this

Answer 3

divheader {background-image: url(‘imgname.jpg’);}

Question 4

Your client wishes to create an animation that would change the font size of a paragraph to 22px when the mouse is positioned over it. However, the client wishes not to use scripting for fear that it would not work if scripting is disabled. Give the skeleton code for how this can be achieved using only CSS.

Answer 4

p:hover {font-size: 22px;}

Question 5

How would you create an animation effect with CSS only using two images, in which the first image changes to the second one on a web page when the mouse is moved over the first image?

Answer 5

The strategy is to show the first image in a div tag as its background-image. The hover event can be captured via #image1div:hover and a new background-image can be assigned, which will disappear when the mouse moves out.

Question 6

Your client wishes to make the color of links that have already been clicked on a web page as red. Write the skeleton CSS to achieve this.

Answer 6

a: link {color:#FF0000;} /* unvisited link /
a: visited {color:#00FF00;} / visited link /
a: hover {color:#FF00FF;} / mouse over link /
a: active {color:#0000FF;} / selected link */

Question 7

Suppose your friend is a beginner in CSS and comes to you for advice on how to make a mouse-over effect so that the underline of hyperlinks goes away when the mouse
is moved over the links. What advise will you give?

Answer 7

This can be done using CSS alone, via a:hover {text-decoration: none;}

Question 8

A web page contains help links and the specifications require that the mouse should change to the help cursor when the mouse is moved over these categories of help links. Give your CSS only code skeleton on how you can do this.

Answer 8

.helplinks:hover{cursor:help;}

Question 9

You are contacted to increase the spacing between all letters to 2px and increase the font size to 18px on a web page. This is required so that the web page can be read more easily by visually challenged readers. Provide your CSS code skeleton.

Answer 9

body {font-size: 18px; letter-spacing:2px; }

Question 10

A new feature that is part of the CSS3 specification recommendation is having a transparency attribute for images. Most modern browsers have implemented this already. Are you aware of this, and if yes, what is this attribute?

Answer 10

Opacity

Question 11

What is background-attachment used for

Answer 11

scroll - the background scrolls along with the element.
fixed - The background is fixed with regard to the viewport
local -The background scrolls along with the element’s contents
initial - Sets this property to its default value
inherit- Inherits this property from its parent element.