CSS glossary entries for ‘B’

background: The background property is a CSS ‘shorthand property’ which allows you to set all of the ‘background properties’ on a given CSS ‘layout box’, in a single statement.
Background position layer: See ‘background positioning area’.
Background positioning area: In CSS, the background positioning area is part of a 'layout box's ‘box model’ that background images are positioned with. The background positioning area is either the layout box's ‘padding-box’, ‘border-box’ or ‘content-box’.
Background properties: Background properties are all the CSS properties which style the backgrounds of CSS ‘layout boxes’. They include: ‘background-attachment’, ‘background-blend-mode’, ‘background-clip’, ‘background-color’, ‘background-image’, ‘background-origin’, ‘background-position’, ‘background-repeat’, ‘background-size’, ‘background’.
background-clip: The background-clip property is a CSS property which determines whether an element's background extends underneath its border. It applies equally to background images and background colours. If no background is set, this background-clip only has a visual effect when the border itself has transparent or semitransparent regions set by ‘border-style’ or ‘border-image’.
background-color: The background-color property is a CSS property which specifies ...background-color is a CSS property that sets the colour on the background of a CSS ‘layout box’.
background-image: The background-image property is a CSS property which specifies the URL of an image to be rendered on the background of a selected ‘layout box’.
background-origin: The background-origin property is a CSS property which specifies the ‘background positioning area’, i.e. it determines whether the background image should be positioned within the selected area's ‘padding-box’, ‘border-box’ or ‘content-box’.
background-position: The background-position property is a CSS property which specifies the position of each ‘background-image’. This position is specified as horizontal and vertical offset distances from top left corner of the ‘background position area’. That area is determined by the ‘background-origin’ for each given background image.
background-repeat: The background-repeat property is a CSS property which specifies how a ‘background-image’ is tiled, or not within its ‘background position area’. The default setting of background-repeat:repeat ensures that any image which is smaller than the background area it is set on, will tile from left to right and top to bottom until copies of the image fill the entire area. background-repeat:no-repeat prevents tiling entirely. While background-repeat:repeat-x and background-repeat:repeat-y respectively create single lines of horizontally or vertically repeating tiles.
background-size: The background-size property is a CSS property which determines the proportion of a background area that should be covered by a background image, i.e. it may cause the image to be re-scaled if the background area is larger or smaller than the image's native size.
Before selector: The before selector (E:before or E::before) is a CSS ‘pseudo-class selector’ which targets the beginning of a given element's content. It functions in almost exactly the same way as the ‘after selector’, except that additional content is inserted into the browser ‘DOM’ as a new ‘first child’, rather than as a ‘last child’. Just like the ‘after selector’ it is most commonly used as part of a ‘clearfix’ recipe or ‘mixin’. See ‘double colon selectors’ and ‘single colon selectors’ for explanations of why this selector has 2 syntaxes.
Begins with selector: The begins with selector (E[attr^="value"]) is a CSS ‘attribute selector’ which targets all the elements in a document containing a specified attribute whose value begins with the quoted substring. For example a[href="https"] selects only anchor elements which contain a href attribute whose value begins with the https URL schema.
Block level element: A block level element is a HTML element which browsers are required to display as ‘block’ ‘layout boxes’, i.e. they usually stack vertically, with their top edge positioned directly beneath the bottom edge of the preceding block in normal flow. If a block is the ‘first child’ of its containing block, its top edge will be aligned to the top ‘content edge’ of the parent. Block boxes are allowed to contain both ‘block’ and ‘inline’ layout boxes. Block level elements have ‘auto widths’ by default, so the position of their outer edges is determined by ‘offsets’ (or the lack of offsets) from the ‘content edge’ of their ‘parent’ block.
border: The border property is a shorthand CSS property which allows you to set all of the ‘border properties’ on a given CSS ‘layout box’ in a single statement.
Border Box Model: The border box model is a CSS ‘box model’ in which the ‘width’ (or ‘height’) property of a selected ‘layout box’ sets the combined width (or height) of its ‘content area’ plus ‘padding area’ plus ‘border area’. This means that if the sum of explicitly set width (or height) plus ‘padding’ plus ‘margin’ properties is greater than the space available inside the parent container, the browser resets the content width to ‘auto’; to ensure that all available space is used without overflowing the parent container. For around a decade, ‘Internet Explorer’ used the border box model for laying out ‘block boxes’ and ‘inline boxes’ when in ‘quirks mode’ (which it usually was). This, along with ‘hasLayout’, was one of the two principal sources of ‘cross-browser compatibility’ problems from the late 1990s to the late 2000s. All modern browsers can be instructed to use the border box model identically, by using this ‘property-value pair’: box-sizing:border-box.
Border edge: The border edge is the outer edge of the border area in a CSS ‘layout box’. If the box has margins, the border edge marks the boundary between the border area and the margin area.
border-bottom: The border-bottom property is a CSS ‘shorthand property’ which allows you to set all of the ‘border properties’ on the bottom edge of a given CSS ‘layout box’, in a single statement.
border-box: In CSS, the border-box is the area occupied by a 'layout box's border. Its outside is bounded by the ‘border edge’ and its inside by the ‘padding edge’. Its size is determined by the CSS ‘border properties’.
border-collapse: The border-collapse property is a CSS property which specifies the layout model to use for data tables. Its primary purpose is to allow designers to choose between a ‘collapsed border’ model and a ‘separate border’ table layout, i.e. between one in which table cells respectively share borders or each have their own independent borders.
border-color: The border-color property is a CSS property which specifies the colour to use for drawing a ‘border’. Colours can be solid block colours or be semi-transparent depending on the type of value given.
border-left: The border-left property is a CSS ‘shorthand property’ which allows you to set all of the ‘border properties’ on the left edge of a given CSS ‘layout box’, in a single statement.
border-radius: The border-radius property is a CSS ‘shorthand property’ which specifies the radius of all four corners of a given CSS ‘layout box’.
border-right: The border-right property is a shorthand CSS property which allows you to set all of the ‘border properties’ on the right edge of a given CSS ‘layout box’, in a single statement.
border-spacing: The border-spacing property is a CSS property which sets the spacing between ‘table cells’. For most ‘layout box’ types the space between boxes is determined by margin, but margins are not allowed on table cells, because adjacent cells sometimes share the same border.
border-style: The border-style property is a CSS property which sets the style of line which the browser should draw the border on a given CSS ‘layout box’.
border-top: The border-top property is a CSS shorthand property which allows you to set all of the ‘border properties’ on the top edge of a given CSS ‘layout box’, in a single statement
border-width: The border-width property is a CSS property which specifies the width, in given units of measurement, for a CSS ‘layout box’.
bottom: The bottom property is a CSS property which specifies the offset for the bottom of a ‘positioned’ ‘layout box’ from the ‘content edge’ of its ‘container’, i.e. from the bottom of its positioning context
box-shadow: The box-shadow property is a CSS property which specifies the direction (‘inset’ or ‘outwards’), offsets (‘offset-x’ and ‘offset-y’), ‘blur’, ‘spread’ and colour of shadows around the edges of CSS ‘layout boxes’.
box-sizing: The box-sizing property is a CSS property which specifies the ‘box model’ which a browser should use to layout the components of a given ‘layout box’
Braces: A brace is ‘curly bracket’, e.g. {}. Braces are used in CSS to delimit the beginning and end of ‘rules’. Designers and developers call these characters braces to distinguish them from other types of ‘bracket’, e.g. ‘parentheses’, ‘square brackets’ and ‘angle brackets’.
Bracket: See ‘braces’, ‘parentheses’, ‘square brackets’ and ‘angle brackets’. Although some developers use this term to mean ‘square brackets’ we consider this to be ‘bad practice’, since only a minority of developers (and hardly any lay people) will instantly and unambiguously recognise which type of bracket is being referred to. Indeed, the first connotation for the vast majority of English-speakers will be parentheses.
Browser prefix: See ‘experimental prefix’