CSS glossary entries for ‘A’

Active selector: The Active selector (E:active) is a CSS ‘pseudo-class selector’ which targets an element which is being activated by the user. This usually means that it selects an element which the user is holding their mouse button down over, but has yet to release it. Such mouse-down selection is typically matched when the user activates an element by using the keyboard TAB key to get to it. It is most often used on <a> and <button> HTML elements, but can be used on any ‘activate-able element’.
After selector: The After selector (E:after or E::after) is a CSS ‘pseudo-class selector’ which targets the end of a given element's content. It's purpose is to allow designers to insert additional content, which does not exist in the HTML source code, into the visually rendered version of a web page. This extra content is set as the double-quoted value of the CSS ‘content’ property. It is included in the browser ‘DOM’ as a new ‘last child’ and is rendered as an ‘inline’ layout box, by default. This default rendering can be overridden by setting a non-inline value on the display: property for the new last child. The After selector is most commonly used as part of a ‘clearfix’ CSS recipe or ‘mixin’. See ‘double colon selectors’ and ‘single colon selectors’ for explanations of why this selector has 2 syntaxes.
align-content: The align-content property is a CSS property which specifies the alignment of the lines within a flexible container (‘flexbox’), if those lines do not consume all of the available space on the ‘cross-axis’. The property has no effect on its own, i.e. it only functions in the context of other flexbox properties.
align-items: The align-items property is a CSS property which specifies the alignment of items within the current 'flex line' of a ‘flexible box’
align-self: The align-self property is a CSS property which specifies the alignment of ‘flex items’ within the current 'flex line' of a ‘flexible box’, i.e. overriding the ‘align-items’ value. If any of the margins on flex items' 'cross-axis is set to auto, the align-self values are ignored.
Alpha channel: The alpha channel is the part of an image which is semi-transparent (or ‘alpha-blended’).
Angle brackets: Angle brackets are sometimes referred to as ‘pointy brackets’ (e.g. <>) and are never used in CSS, partly because they are used in HTML to delimit the beginning and end of a tag.
appearance: The appearance property is a CSS property which determines how an element is displayed using platform-specific styling, i.e. it sets the styling of the given element using platform-specific themes. For this reason, it is typically used with an ‘experimental prefix’ (‘browser prefix’), e.g. moz-appearance, webkit-appearance, etc. If the browser employs themes from the user's operating system, this property modifies those themes. If not, it simply modifies that browser's unique styles. Prefixed versions of the appearance property are most commonly used to suppress browser-specific themes in favour of a cross-platform ‘look and feel’, especially in form design.
aspect-ratio: The aspect-ratio property is a CSS3 property which sets the aspect ratio of a CSS ‘layout box’. It is almost exclusively used in ‘media queries’ and typically in prefixed form, e.g. ‘device-aspect-ratio’.
Attribute selector: Attribute selectors are CSS selectors which target an element that has a specified attribute on its opening tag. The simplest attribute selector (the ‘has selector’) targets elements that merely possess the specified attribute. More complex attribute selectors target elements when the value(s) of the specified attribute wholly, or partially, match a given pattern. Attribute selectors include: the ‘has selector’, the ‘contains (hyphen-separated) selector’, the ‘contains selector’, the ‘substring selector’, the ‘begins with selector’, the ‘ends with selector’, the ‘equals selector’
Auto width: An auto width is one which is set automatically by the browser. When an auto width is set on the content of a block ‘layout box’, that content expands to fill all the space that remains in the parent's ‘content box’ after the selected box's padding, borders and margins have been accounted for. Since most blocks have no padding, borders or margins, and their default width setting is ‘auto’, blocks typically occupy the entire width of their parent's content box. Auto widths on margins allow the browser to allocate all remaining space within a container to the given margin, after specifically set widths have been acounted for. If both left and right margins have auto widths, the browser will divide the remaining space equally between them. If all the specifically set widths on a box add up to less than the width of a container, browsers will reset the right margin to an auto width, so that it consumes all the unused space. Padding is not allowed to have auto width settings. If you set auto widths on the content and on both margins of a selected box, the browser will accept the auto setting on the content, but reset both margin widths to zero. That's because the browser would have no sensible means of deciding what proportion of the remaining space in the box should be allocated to each of the three areas. It, therefore, gives priority to reserving sufficient space for the content.