http://www.codestyle.org/css/Glossary.shtml

This document is a glossary of terms used in relation to CSS and is part of the CSS style guide section of Code Style. If you cannot find the term you are seeking defined here, please use the article feedback form below to request a definition.

border
The border property is a conceptual perimeter line around an element, between the inner padding and outer margin space; it should not be applied if it is set border: none. The border keyword is a shorthand property name composed of a border-style, border-width and border-colour. Each of these properties can be set individually and to each side of an element: top, right, bottom and left.

The border width is set using standard CSS length units and contributes to the overall height and width of an element. The border colour is set using standard CSS colour values. The border style is one of a set of named types: solid, dotted, dashed, solid, double, groove, ridge, inset and outset. The last four border types are intended to give the illusion of three dimensional indented groove, outdented ridge, recessed inset and embossed outset.

p.Warning {

  border:             solid red 1px;
}

h2.NewSection {

  border-top:         double #333 0.3em;
}

h3 {

  border-top-color:   silver;
}

p.Information {

  border-style:       groove;
}

div.PullQuote {

  border-right-width: 3px;
}

blockquote {

  // top, right, bottom, left lengths
  border-width:       1px 2px 3px 4px
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

class selector
A syntax for specifying a CSS selector by means of a general purpose, repeatable class attribute of an element. The name of class selectors in style rules is preceded by a full stop or period, ., e.g.:

.Condensed {

  letter-spacing:   0.1em;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

contextual selector
A syntax for specifying a CSS selector by means of the context in which an element or attribute occurs in the markup structure of a document. In CSS level 1, the syntax takes the form of the element names in a space separated sequence. For instance, contextual selectors may refer to a strong element within a dt element, or a p element with the class attribute "Classic" enclosing an abbr element:

dt strong {

  font-weight:      bold;
  letter-spacing:   0.2em;
}
p.Classic abbr {

  font-style:       italic;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

declaration
A corresponding pair of property and value parameters which suggests a CSS style for a given selector. Numerous declarations can be made in the same style rule, with a trailing semicolon after each, enclosed by a pair of curly braces. In the following example color: red is a single declaration, background: white; is a second:

em {

  color:            red;
  background:       white;
}

Note that a trailing semicolon is not strictly required after the last declaration, but using them always may help avoid syntax errors when editing stylesheets.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

element
An HTML or markup element to which a CSS declaration might be associated. A named element is the simplest form of CSS selector.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

float
The CSS float property sets an element to the left or right of its containing element in a way that other elements flow around it, typically an image set to the side of a run of text. For example, an element set with float: left will be positioned to the left edge of the containing element, allowing for any left margin it may have, and any left padding the containing element has; elements that follow it in the markup will flow around the right hand side taking account of any right margin of the floated element.

Other elements may only flow around a floated element if their combined widths fit within the container. If several elements are floated to the same side they will sit horizontally alongside each other where space allows, then beneath the first row with appropriate top and bottom margins respectively. To override this behaviour use the clear: left property to place the elements beneath each other down the left hand side. The float: right and clear: right declarations combined have the opposite effect. The defaults are float: none and clear: none.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

grouped selector
A convenient means of specifying a range of selectors in a comma separated list to which the same style declaration applies, e.g.:

h1, h2, h3 {

  font-family:      serif;
  font-weight:      bold;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

id selector
A syntax for specifying a CSS selector by means of a unique id attribute of an element. The name of id selectors in style rules is preceded by a hash or pound symbol, #, e.g.:

#Subtitle {

  letter-spacing:   0.1em;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

list-style
The CSS list-style property is a shorthand that specifies the type and position of list item markers in ordered and un-ordered lists. The different list types are commonly used to the apply different marker types at each level of nested lists. The list-style property is composed of a list item type, position and image, which can each be specified separately, e.g. list-style-image: url(/bullet.png).

The marker type is used to set the shape of the bullet marker for un-ordered lists, one of circle, disc or square. The image value replaces the marker type with a custom image, but should be backed up with a marker type in case images are not rendered.

For ordered lists there is a range of numeric marker types, the most common being decimal, lower-alpha (a, b, c), lower-roman (i, ii, iii) and upper-roman (I, I, II). Greek, Armenian, Georgian and Latin numbering schemes are also available.

The list-style-position property may be inside or outside. The default outside setting places all list item text in a block to the right of the list marker. The inside setting places the marker in the same block as the list item text so that the text wraps beneath the marker on multiple lines.

ul.Shell {

  list-style:       inside url(/bullet.png) disc;
}

ol.Academic {

  list-style:       outside lower-roman;
}

ul.Party {

  list-style-image: url(/rosette.png);
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

margin
The CSS margin property represents the external space between the border of an element and any adjacent elements. The margin keyword is a shorthand property that applies to four sides of an element, which may have different values and can be declared separately for each side, e.g. margin-bottom: 1em.

Margin contributes to the overall height and width of an element, but is not additional between two adjacent elements. If an element has margin-bottom: 1em and the element below has margin-top: 2em, the upper element’s margin falls within the lower element’s and whichever margin is greater will apply.

div.CallOut {

  // 1em margin all round
  margin:           1em;
}

pre {

  // 1em top and bottom, 0em left and right
  margin:           1em 0em;
}

blockquote {

  // top, right, bottom, left
  margin:      1em 0em 0.5em 5em;
}

h1 {

  // 4em margin on top only
  margin-top:  4em;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

media, media dependent, media descriptor, @media, at-media, print media, projection media
See CSS2 media stylesheet glossary.

padding
The CSS padding property represents the internal space between the content of an element and its border. The padding keyword is a shorthand property that applies to four sides of an element, which may have different values and can be declared separately for each side, e.g. border-top: 0.5em. Padding contributes to the overall height and width of an element.

div.CallOut {

  // 5px padding all round
  padding:          5px;
}

p {

  // top, right, bottom, left lengths
  padding:          0.5 1em 5em 3em;
}

blockquote {

  // 0.5em top and bottom, 1em left and right
  padding:          0.5em 1em;
}

h2 {

  // 4em padding on top only
  padding-top: 4em;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

position
The CSS position property specifies where an HTML element should be rendered in the browser canvas and is associated with the top and right properties. The default position value is static, which means that an element should be rendered in its normal position in the document flow and any top and left properties should be disregarded. A relative position is like static, except that top and left declarations do take effect and offset with respect to its original “natural” location.

The position: absolute setting means that an element will be positioned with respect to the position and dimensions of its containing element. In this case, the top and left properties may be applied, but also right and bottom, which adjust the position with respect to the other sides of the containing element. So bottom: 2em would place the bottom margin of an element 2 em above the bottom margin. Position fixed sets the top, left, right and bottom lengths with respect to the browser window, so when the page scrolls the element stays in the same place.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

property
A named style attribute or parameter for a markup element specified in a stylesheet declaration, e.g. color, background, font-family, margin etc., which is assigned a specific value. Properties are always followed by a colon to separate them from their value pair.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

pseudo class, or pseudo class selector
A syntax for selecting markup elements which have subsidiary or context-sensitive attributes in the context of document navigation or positioning, including hyperlinks. The state of these “false” classes in a elements in particular may help indicate that a hyperlinked document has been visited, but this condition is not specified by an explicit class or id attribute of the element, e.g.:

a:visited {

  color:            purple;
  background:       white;
}

Other pseudo class selectors include first-letter and first-line, which are determined by the position of text in p elements for instance.

p:first-letter {

  font-size:        larger;
}

Actions: Follow-up, clarify or correct this definition. Submit a new term.

rule, or style rule
The complete specification of an individual style including the selector, property and value. The term rule applies whatever form the selector takes and however many declaration pairs are present.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

selector, or simple selector
A logical “handle” or identifier by which style declarations are associated with specific elements of a document. Selectors may apply broadly to a named HTML element, such as <h3> or <p>, an HTML element with a named attribute value, particularly a class or id value. A simple selector is one which matches an element name only.

See also: grouped selector and contextual selector.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

Shorthand properties
Shorthand property names have the effect of combining several associated properties in a single declaration. The shorthand property name replaces all the individual property names and the values are given in a comma separated list. For instance, the shorthand property font can be used to specify styles for font-style, font-variant, font-size, line-height and family in a single declaration. The border property can be used to set border-width, border-style, color. In this case, the styles are set on all four sides of the relevant box.

.MenuBox {

  font-family:   arial,
                 helvetica,
                 sans-serif;
  font-size:     smaller;
  border-width:  1px;
  border-style:  solid;
  border-color:  #CCC;
}

.MenuBox {

  font:          smaller,
                 arial,
                 helvetica,
                 sans-serif;
  border:        solid 1px #CCC;
}

Where shorthand property values are omitted, the default values for the relevant properties are used to keep the declaration syntax concise. For example, the background property is often used as if it only set the background colour of a selector but it is actually a shorthand selector for background-color, background-image, background-repeat, background-attachment and background-position.

Actions: Follow-up, clarify or correct this definition. Submit a new term.

style sheet, or stylesheet
A collection of one or more style rules, specified in an HTML style element or external CSS file attached by an HTML link element. CSS stylesheets have the content type text/css, typically have the file extension .css and may specify one or more media types to which the styles should be applied:

<link rel="stylesheet" type="text/css"
     href="Stylesheet.css" media="screen">

<style type="text/css" media="print">

  h1, h2, h3{

    font-family:    sans-serif;
  }
</style>

Actions: Follow-up, clarify or correct this definition. Submit a new term.

user agent
A software application which is used to view a document to which styles have been applied. Typically, this would be a Web browser which visually displays HTML, but CSS can be applied to content for a range of media devices which have media specific style properties.

See also CSS2 media stylesheet glossary.

value
A length, quality, type or URL assigned to a style property for an element. CSS properties each have specific ranges of value or token types which may be declared for them. For instance, color properties have values specified by named color tokens (silver, purple, maroon), or RGB colour components in the decimal range 0 to 255 or hexadecimal equivalent. Other style properties take length values, URL values or other tokens such as float, repeat-y and both, which define how an element is rendered in a specific user agent.

Advertisements