Tables, Lists and Links

Question 1

Table properties

Answer 1

border: controls the border property of the table
you can manipulate a border’s color, style or thickness

border-collapse which allows padding and margin calculation to be included in the border’s width
values: collapse or separate

caption-side specifies either bottom or top for the caption to be placed
values: bottom, top (default), left, right

border-spacing controls the spacing of borders in-between cells
border-spacing: 2px 4px;
specifies horizontal and vertical

empty-cells is a property that you can use to toggle displaying or hiding the empty cells of a table
values: hide, show, etc

table-layout will alter the width of the table based on content size or fixed widths

Question 2

List properties

Answer 2

list-style-type controls the type of character to use to enumerate the list items.For example, you can specify letters only, numbers only, and more.

list-style-image will render an image in place of the bullet or alphanumeric value used to label the list item.Instead of seeing the number 1, for example, you would see the image of a lightning bolt.

list-style-position specifies the location to place the label for the list item.You will either use outside (which is default) and places the demarcating character outside the content flow; or inside, by contrast, which changes the position to be inside the content flow.

Question 3

Links/Anchor tag properties

a: link {color: red
background : white}
a: visited {}
a: hover {}
a : active {}

Answer 3

-applies to the link

link (default)

visited - when link has been clicked before

hover - when mouse is positioned over the link

active - mouse down (when user is actively clicking the anchor

Question 4

Units of measurement rules : absolute or relative

Answer 4

• you can have negative margin but not negative padding
• express properties in terms of a value
• express zero without a unit

Question 5

Absolute units

Answer 5

measurement is based on length of unit and not other element

ex:
cm
in
pixels
points 
picas

Question 6

Relative units

Answer 6

measurement is based on dimensions of another element
or component of the page

ex:
em: are relative to the font-size property of the current element

rem: are relative to the root element of the page
ch: relative to the width of the zero character

%: usually based on its parent element or the actual browser’s window depending on the property you are specifying

Question 7

Common height based properties

Answer 7

Unlike width which is ultimately based on a browser’s window, height, if expressed in terms of percent, is based on its parent element.

If you want to make a <div> element for example stretch to half the height of the window, you must first set the element and in some cases the element as well to have a height of 100%. Otherwise, the <div> element calculates 100% based on an undefined value which equates to 0. And so, 100 percent of zero will always equate to zero.

Width on the other hand is calculated different by the browser and always traces back to 100% of the window, even if you don’t expressly set the body or html elements to a specific width.</div></div>

Question 8

Box model*

Answer 8

-is a way for the drawing (rendering) engine to layout and display elements

-composed of 4 containers:
margin: outermost layer
border:
padding:
content:

• Margin is the outermost layer. It controls spacing from other elements.
• border property which allows developers to specify a color and outline for an elements.

-After border is padding, which controls the space between a border and the contained content.

You can also specify different values for each side of an element.

Question 9

Controlling sidderent sides

shorthand

Answer 9

You can also specify different values for each side of an element.
-div elements can have padding for top, bottom and side

If you specify two values as shown, the first will be used for the top and bottom sides and the second for the right and left sides.
div {
padding: 1px 2px 3px
}

Question 10

Position property (positioning)

Answer 10

-specifies the layout of elements on a webpage

valid values:
absolute
fixed
relative
static (default)

Question 11

Specifying position

Answer 11

after setting the layout, you can specify any offsets for any side (left, right, top, bottom)

ex: div { position: fixed;
top: 0;
}

Question 12

Relative positioning

Answer 12

• sets the element relative to its normal flow
• specify the left and/or top offsets

In practice, it is best to set the top and left properties as opposed to trying to set an element relative to a bottom or right edge. Also of note, elements that are positioned relative leave blank spaces where they would normally be.

Question 13

Absolute positioning

Answer 13

-sets relative to its parent or relative to the document body if the parent is positioned statically.

Question 14

Fixed positioning

Answer 14

-relative to the browsing window

Question 15

Z-index property

Answer 15

• browsers will render elements on top of another depending on position
• use the Z-index property to specify which element will reside on top of another

valid values:
integer values (if negative, it will be behind other elements)

Question 16

Float property

Answer 16

-used to set an element along the left or right of its container and allows text to wrap around it

or -

valid values:
left
right
none

Question 17

Clear property

Answer 17

specifies which sides(s) to disallow elements to float to

valid values:
left
right
both

Question 18

Overflow property

Answer 18

specifies how to display content that falls outside of its container

valid values:
hidden - hides content that flows out of container
scroll - scroll bars
visible - content overflows out of container
auto - contents that flows out is not displayed

Question 19

Positioning summary

Answer 19

You can use the float property to align an element to the right or left side of its container allowing text or other elements to wrap around it.And, also, the overflow property can specify how content that doesn’t fit inside its parent is rendered on the page.