CSS glossary entries for ‘F’

Firefox: Firefox is an open source web browser based on the ‘gecko rendering engine’. It is produced by the non-profit Mozilla foundation and is particularly favoured by CSS web developers, because if its strict adherence to ‘web standards’ plus its unmatched range of built-in and add-on web developer tools.
First child of type selector: The First child of type selector (E:first-of-type) is a CSS ‘pseudo-class selector’ which targets any element which is the first of its type within its immediate container. So for example, if a <section> container began with <h2> immediately followed by an <img> and then by a series of paragraphs, the following selector would target only the first of those paragraphs: p:first-of-type. This is a very important selector, because it is significantly more robust than the ‘:first-child’ selector. The fact that the selection does not require the target to be in any particular position within a container means the selection would continue to work, no matter how many non-targeted elements are dynamically added to its container.
First child selector: The first child selector (E:first-child or E::first-child) is a CSS ‘pseudo-element selector’ which matches the first element within a given element. Among its most common uses is the selection of table components, e.g. to select the first row in a table in order to style the column headers, or to select the first cell in a table row in order to style the row headers. See ‘double colon selectors’ and ‘single colon selectors’ for explanations of why this selector has 2 syntaxes.
First letter selector: The first letter selector (E:first-letter) is a CSS ‘partial selector’ which matches the first letter in a given element. Its most common use is to style the first letter of paragraphs as a ‘drop capital’ or ‘illuminated capital’.
First line selector: The first line selector (E:first-line) is a CSS ‘partial selector’ which matches the first line in a text block, i.e. a block containing flowed inline text. Technically speaking, this selector matches the first ‘anonymous line box’. In ‘fluid boxes’ the number of words in the matched line will vary with the width of the element selected.
First page selector: The First page selector (@page:first) is a CSS selector which matches the first ‘page box’ in a paged media set.
flex: The flex property is a CSS3 shorthand property which determines how the dimensions of a ‘flex item’ should adjust to fill available space within a ‘flexible box’ container. The dimensions of these flex items are adjusted by ‘flex-grow’ or ‘flex-shrink’ factors, i.e. flex-grow determines how flex items should be stretched to fill their container, while flex-shrink determines how they should shrink to prevent them from overflowing it.
Flex box: See ‘flexbox’ and ‘flexible box’.
Flex item: A flex item is a CSS ‘layout box’ whose parent is a ‘flexible box’.
flex-basis: The flex-basis property is a CSS3 property which sets the initial size of ‘flex items’, i.e. their size before adjustments to the size of the 'flexible box; they are contained within.
flex-direction: The flex-direction property is a CSS3 property which determines whether the ‘main axis’ of a ‘flexible box’ is horizontal or vertical, i.e. whether its ‘flex items’ form rows or columns. Items will stack in source code order by default, but flex-direction:row-reverse and flex-direction:column-reverse will reverse that order.
flex-end value: The flex-end value is a CSS value which can be set on ‘align-content’, ‘align-items’, ‘align-self’ and justify-content properties. The flex-end value ensures that the lines (or columns) within a ‘flexbox’ container are packed from the end of the container, i.e. it only has an effect when the lines (or columns) within a ‘flexbox’ do not consume all of the container's space.
flex-flow: The flex-flow property is a CSS3 shorthand property which allows you to specify both the ‘flex-direction’ and ‘flex-wrap’ properties in a single statement.
flex-grow: The flex-grow property is a CSS3 property which sets the ‘flex grow factor’ of an individual ‘flex item’, i.e. it sets the extent to which that flex item should grow in proportion to the other flex items in the same ‘flexible box’ container. For example, items with a flex grow factor of 3 will grow to 3 times the extent of items with a flex grow factor of 1.
flex-shrink: The flex-shrink property is a CSS3 property which sets the ‘flex shrink factor’ of an individual ‘flex item’, i.e. it sets the extent to which that flex item should shrink in proportion to the other flex items in the same ‘flexible box’ container. For example, items with a flex shrink factor of 3 will shrink to 3 times the extent of items with a flex shrink factor of 1.
flex-start value: The flex-start value is a CSS3 value which can be set on ‘align-content’, ‘align-items’, ‘align-self’ and justify-content properties. The flex-start value ensures that the lines (or columns) within a ‘flexbox’ container are packed from the start of the container, i.e. it only has an effect when the lines (or columns) within a ‘flexbox’ do not consume all of the container's space.
flex-wrap: The flex-wrap property is a CSS3 property which specifies whether ‘flex items’ stack in a single line or can be flowed into multiple lines. The default value for this property is nowrap, i.e. flex items will stack in a single line and overflow if the sum of their widths along the ‘main axis’ are greater than the with of their ‘flexible box’ container. Set the value to wrap to allow flow into multiple lines or to wrap-reverse to force the items in multi-line flow to be stacked in the reverse of HTML source code order.
flexbox: Flexbox is natural language shorthand for ‘flexible box’, as defined by the CSS3 CSS Flexible Box Layout Module, i.e. it is not a keyword used within the vocabulary or syntax of CSS itself.
Flexbox center value: When applied to a ‘flexible box’ alignment property, the center value ensures that layout lines within the flexible container are packed to its centre.
Flexible box: A flexible box (or ‘flexbox’) is the CSS ‘layout box’ associated with an element which has ‘flex’ properties set upon it. It is a container whose dimensions, and those of its contents, will automatically adjust to changes in ‘viewport’ size or orientation (without the need for ‘media queries’). The designer can align the items contained within flexible boxes in various ways and those alignments will be maintained when the dimensions of the container and its items stretch or shrink . See ‘flex’.
float: The float property is a CSS property which specifies whether or not a CSS ‘layout box’ should behave as a ‘float box’. ‘float’ is also natural language shorthand for the concept of a float box. float:left and float:right convert a layout box into a float and shift it, respectively, towards the left or right hand sides of its parent container. float:none prevents a CSS layout box from being treated as a float, i.e. converts it back to its default layout box type.
Float area: In CSS, a float area is the 2-dimensional space within a ‘float box’.
Float box: A float box is the CSS layout box associated with an element which has either float:left or float:right set on it, i.e. a layout box whose top edge is positioned in normal flow but then slides to the left or right padding edge of its container. When an element is designated as a float, it is displayed as a ‘block’ even if it is an ‘inline element’.
Float layout box: See ‘float box’.
Focused selector: The focused selector (E:focus) is a CSS selector which targets a given element only when that element has the browser's focus, i.e. it can only apply to elements that are ‘activate-able’ and will only apply to elements that would be activated if the user were to press the Enter key (or click mouse button 1) at this moment.
font: The font property is a CSS shorthand property which allows you to set all of the individual ‘font properties’ in a single statement.
font-family: The font-family property is the CSS for setting the ‘typeface’ to be used on a given selection. Although not required by the standard, we strongly recommend that you provide a ‘comma-separated list’ of typeface names as the value for of this property, i.e. a ‘font stack’. Any typeface name containing spaces should be quoted. The final typeface listed in every font stack should be a generic one, e.g. ‘serif’, ‘sans-serif’, ‘monospace’, etc.
font-size: The font-size property is a CSS property which specifies the size of text in a given selection, as measured by the distance between the top of the ascenders and bottom of the descenders in the current font. The font-size also defines the size of the current em unit of measurement. And the ‘line-height’ of current text is typically specified as a proportion of the The font-size.
font-style: The font-style property is a CSS property which determines whether selected text is rendered using a normal (‘roman’ or regular), ‘italic’ or ‘oblique’ typeface.
font-weight: The font-weight property is a CSS property which specifies the weight, or boldness, of the font used in selected text. The range of values which will affect the rendered text is determined by the specific font which a given browser is using. Many fonts have only ‘bold’ and ‘normal’ weights, i.e. the respective equivalents of 400 and 700 on the conventional font weight scale of 100 to 900.
Future selector: The future selector (E:future) is a CSS4 ‘pseudo-class selector’ which targets elements that are in the future on a time-dimensional canvas.