IES: CSS-deck 14

Question 1

border-collapse: collapse- how different, collapsed borders should appear (visibility eval)

Answer 1

visibility eval: border-style value -“hidden” takes precedence

Question 2

border-collapse: collapse- how different, collapsed borders should appear (width eval)

Answer 2

• the greater width of two visible borders takes precedence
• Ex. two borders to collapse: one is 5 px wide, the other is 10 px wide. The 10 px border takes precedence.

Question 3

border-collapse: collapse- how different, collapsed borders should appear (style eval)

Answer 3

• Style eval: two visible borders of equal width - the border style of greater value takes precedence
• (border styles set in descending value order)
  1. double
  2. solid
  3. dashed
  4. dotted
  5. ridge
  6. outset
  7. groove
  8. inset

Question 4

border-collapse: collapse- how different, collapsed borders should appear (color eval)

Answer 4

• color eval: two visible borders of equal width and identical style- the border color of greater value takes precedence
• (value is determined in the descending status order)
  1. cell
  2. row
  3. row group
  4. column
  5. column group
  6. table

Question 5

display

Answer 5

• Can accept a range of values to specify that a selected element should be treated as a table component
• (values in this range emulate the default behavior of HTML tags a browser automatically applies to table components)
• (CSS display value, HTML tag equivalent)
  1. table, <table>
  2. table-row, <tr>
  3. table-header-group, <thead>
  4. table-row-group, <tbody>
  5. Table-footer-group, <tfoot>
  6. table-column, <col>
  7. table-column-group, <colgroup>
  8. table-cell, <th> or <td>
  9. table-caption, <caption>
• (these values can be used to specify table features to an XML doc -browser will display as if an HTML table)

Question 6

marker

Answer 6

• indicates the beginning of an item in a list
• typically a bullet in an <ul> unordered list
• typically an incrementing number in an ordered list <ol>
• (browser conducts an item count in each case, but it is usually only used with an ordered list)

Question 7

list-style-type

Answer 7

• list? property
• Can specify an alternative type of marker for any list
• Keywords:
  1. disc
  2. circle
  3. square
• (both number and alphabetical markers display incrementing item count)
• (number marker types)
  1. lower-roman
  2. upper-roman
  3. decimal
  4. decimal-leading-zero
• (alphabetical marker types)
  1. lower-latin
  2. upper-latin
  3. lower-greek
  4. armenian
  5. georgian
• Miscellaneous
  1. none

Question 8

list-style-image

Answer 8

• an image may be specified as a marker by stating its path in the parentheses of the url value
• Ex. {list-style-image: url(tick.png) disc;}
• (the disc, according to this example, is specified as the alternative marker if and when the designated image is not available)

Question 9

marker typical formatting

Answer 9

1. browser creates block-level content box for the entire list
2. creates inline content boxes for each list item
3. automatic left margin insets list item content boxes
4. Marker appears on the right edge of this margin area but outside the list item content boxes

Question 10

list-style-position

Answer 10

• keywords:
  1. “inside”
  2. “outside”
• (determines where markers should appear relative to the list item content boxes)

Question 11

CSS shorthand: markers

Answer 11

• rather than separate styles for the list-style-type, list- style-image, and list-style-position
• specify a value for each as a space-separated list to the list - style property
• (the values may appear in any order)
• (where any value is omitted, the default value will be assumed)

Question 12

nested lists: list-style

Answer 12

• keywords/values:
  1. “inherit”
  2. “none”
• “inherit”: specifies the nested list(s) should adopt the list-style of the containing element
• “none”: suppresses the nested list(s) from adopting the list-style of the containing element
• (lists of either type may be nested with their marker position and type specified independently)

Question 13

A navigation bar

Answer 13

1. a list of hyperlinks
2. particular CSS style rules applied to an HTML list
3. markers are removed (the list-style-type is specified as “none”)
4. browsers defaults margins and paddings are removed
5. list hyperlinks styled with display: block;
6. text-decoration: none; - removes default underlines

Question 14

Hyperlinks can indicate status by:

Answer 14

1. adding a class for styling - to indicate the current location on the website
2. adding a :hover pseudo-class after the selector

Question 15

vertical nav bars: typically

Answer 15

• specify a fixed width value for the list

Question 16

horizontal nav bars:

Answer 16

• can float the list items
• can hide the overflow to maintain visibility of the bar

Question 17

pseudo-classes

Answer 17

• used to indicate the state of a hyperlink
  1. a:link (default)
  2. a:visited
  3. a:hover
  4. a:active

Question 18

dropdown box:

Answer 18

• a content box that is hidden
• when the user places the cursor over an active element, the content box becomes unhidden
• at this point, the box appears to offer further information, a larger image (when cursor is over a thumbnail), or a list of clickable options
• creation:
  1. active element styled with position: relative;
  2. drop-down box positioned directly beneath the active element with position; absolute;
  3. Dropdown box should have z-index value specified to place it above any existing page content
  4. include a universal box-sizing: border-box;

Question 19

box-sizing: border-box;

Answer 19

• a universal rule
• allows padding and border to be included within the total width and height of the active element and of the drop-down box
• The default value is “content-box” (the content area is the width and height that are applied)
• if the element is specified as 100px x 100px, the content box is 100px by 100px (With the padding and border, the element will be wider and higher than 100px)

Question 20

dropdown content transparency:

Answer 20

• to specify a background value for the drop-down content is important
• by default, the drop-down is transparent: the background value prevents the underlying, visible content to interfere with the drop-down content