CSS

Question 1

How do you create a new font to use in a website?

Answer 1

@font-face {
font-family: emulogic;
src: url(“../fonts/umulogic.ttf”);
}

NOTE: If using firefox, the font has to be in the same folder as the css.

Question 2

Having created a new font called emulogic, how would I apply it to all elements on the page?

Answer 2

• {
  font-family: emulogic;
  }

Question 3

What is the order of applying stylesheets?

Answer 3

External, internal, then inline style elements

Question 4

What are the two types of element that are often used to apply CSS to content of a webpage?

Answer 4

span and div

Question 5

What CSS attribute would you use to make text indent a little?

Answer 5

p {
text-indent: 2em;
}

Question 6

What is the difference between p.first and p .first?

Answer 6

p.first means choose a paragraph that has the class first.

p .first means choose an element within a paragraph that has the class first.

Question 7

What does ex and em measure?

Answer 7

ex typically measures the height of an item in a web browser (ex is height of lower case x)

em typically measures the width of an item (em is the width of an uppercase M).

Question 8

Suppose a 1px black box is placed around text, padding adds space where?

Answer 8

Inside the content box

Question 9

Suppose a 1px black blox is placed around text, margin adds space where?

Answer 9

Around the outside of the content box

Question 10

What are the four kinds of positioning in CSS?

Answer 10

Absolute, relative, float and fixed

Question 11

Why would you set the containing div as a relative?

Answer 11

Because it needs to be a positioned block to qualify as a container - this must be either Relative or Absolute

Question 12

Why do you not have to specify the top / left position in an outer containing block if you have set it to relative?

Answer 12

By setting it to relative, it behaves like a “static” block, but positioned. So it will automatically take the 0, 0 position on the page - then just specify width / height

Question 13

Absolute on an object means the positions are relative too…

Answer 13

the boundaries of the containing object.

Question 14

What attribute can I specify to set the order of rendering on a page?

Answer 14

z-index: 10;

Question 15

Is relative positioning good for laying out blocks of text?

Answer 15

Not really - absolute positioning is probably better.

Question 16

What does relative positioning actually do?

Answer 16

It moves the object relative to where it should be in the document… however, everything else renders as if it is in the original, correct position.

Question 17

What is the most common use of relative positioning?

Answer 17

To set the position of an outer containing block (so it qualifies as a reference point).

Question 18

If there is an object that is floating to the left, how do you make sure text that follows it doesn’t wrap?

Answer 18

clear: left;

Question 19

Do fixed elements fit within the flow of a document?

Answer 19

No, they are taken out of the flow and do not affect the layout of the page.

They also do not affect / create scroll bars

Question 20

What is a common use of the fixed positioning attribute?

Answer 20

Menus

Question 21

margin: 25px 50px 75px; sets which sides?

Answer 21

top is 25px
right and left is 50px
bottom is 75px

Question 22

margin: 25px 50px; sets which sides?

Answer 22

Top and bottom margins 25px

Right and left margins are 50px;

Question 23

margin: 25px sets which sides?

Answer 23

All four margins are 25px;

Question 24

Which direction do margin settings follow?

Answer 24

Clockwise (top, right, bottom, left)

Question 25

Do floated elements add to the height of a container element?

Answer 25

No

Question 26

If a floating element doesn’t add to the height of a container, how might you fix it?

Answer 26

You need to clear the floats. One way is to add an empty paragraph at the end, and use CSS to remove floats:

XHTML:
< p class=”clear” />
CSS
.clear { clear: both; }

Question 27

What issue does I.E. have with styling unordered lists, and how do you fix it?

Answer 27

The list will be hard against (even over) the left margin. You need to set the last (left side) field of the margin to 1em to make it closer to consistent between browsers.

margin: 0 0 1.4ex 1em;

Question 28

How do you link in a stylesheet?

Answer 28

< link rel=”stylesheet” type=”text/css” href=”css/main.css” />