Page 99 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

4.4.3 Outline Properties Notes

New properties in CSS2 allow outlines to be created for an element to help it stand out from
other elements. CSS Outlines are very similar to borders except for several subtle differences:
 Border sides can be independently controlled, Outline sides cannot. The visual effects for
an outline are uniform for all sides.
 Outlines may be non-rectangular.
 Outlines do not take up space in the box-rendering model; they are rendered on “top” of
the element’s box. An outline does not affect the position or size of the rendering box.
OUTLINE
Outline-color
Outline outline-style
outline-width
color
outline-color
invert
none | dotted | dashed | solid | double | groove | ridge | inset |
outline-style
outset
thin | medium | thick
outli ne-width
length

Example:
BUTTON {outline-width: thick}
focus {outline: thick solid black}
:active {outline: thick solid red}

4.4.4 List Properties

Lists are used to organize and render one or more data items with some relationship to each
other. With a list structure, extra information is used to give some indication of the degree of
relationship between the items.
However, this extra information is not actually stored in the document itself, it is generated
automatically when it is rendered. List structures generate two blocks for each item of rendered
data - a box for each data item, along with a separate marker box for the visual list iteration
object (such as a bullet, number, or image) that is created by the system. The list properties
control the type and placement of the marker box in list contexts.

LIST & MARKERS
list-style-type
list-style list-style-position
list-style-image
none
list-style-image
url
list-style-position inside | outside
none | disc | circle | square | decimal | decimal-leading- zero |
lower-roman | upper- roman | lower-alpha | up- per-alpha | lower-
list-style-type greek | lower-Iatln | upper-Iatin | hebrew | armenian | geor- gian |
cjk-ideographic | hiragana | katakana | hira- gana-iroha | katakaa-
iroha
auto
ma rker-offset
length

LOVELY PROFESSIONAL UNIVERSITY 93