CSS

Question 1

CSS Comment Line

Answer 1

/* This is a CSS comment */

Question 2

Create an id selector

Answer 2

#joeid {
}

Question 3

Create a class selector

Answer 3

.joeclass {

}

Question 4

Background color

Answer 4

body {
background-color: #FFFFFF;
}

Question 5

Background image

Answer 5

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

Question 6

Background image that repeats horizontally

Answer 6

body{
background-image: url(‘image.jpg’);
background-repeat: repeat-x;
}

Question 7

Background image that repeats vertically

Answer 7

body {
background-image:url(‘image.jpg’);
background-repeat: repeat-y;
}

Question 8

Background image in a set position(upper right corner) that doesn’t repeat

Answer 8

body {
background-image: url('image.jpg';
background-repeat: no-repeat;
background-position: right top;
}

Question 9

background-position properties

Answer 9

left top;
left center;
left bottom;
right top;
right center;
right bottom;
center top;
center center;
center bottom;
%x %y; (top left = 0% 0%, bottom right = 100% 100%)
xpos ypos;(top left 0px, 0px)
inherit; - Specifies that the setting of the background-position property should be inherited from the parent element.

Question 10

background-repeat properties

Answer 10

repeat; - repeats horizontally and vertically(default)
repeat-x; - repeats horizontally
repeat-y; - repeats vertically
no-repeat; - does not repeat
inherit; - Specifies the setting of the background-repeat property should be inherited from the parent element.

Question 11

background-clip properties

Answer 11

border-box - The background is clipped to the border box.
content-box - The background is clipped to the content box.
padding-box - The background is clipped to the padding box.

Question 12

background-origin properties

Answer 12

border-box - The image is positioned relative to the border box.
content-box - The image is positioned relative to the content box.
padding-box - The image is positioned relative to the padding box.

Question 13

background-image properties

Answer 13

length - Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”.
percentage - Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”.
cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
contain - Scale the image to the largest size such that both its width and its height can fit inside the content area.

Question 14

What is the CSS Box Model?

Answer 14

Margins –> Border –> Padding –> Content