CSS glossary entries for ‘I’

ID selector: The id selector (#id) is a CSS selector which targets an element by its unique name, i.e. by the value of its id attribute. The generic ID selector is simply, a hash sign (#) followed by the ID name. For example #pullquote {} would select the one element on a page with id="pullquote" in its opening tag. Browsers do not check for uniqueness, so the selector cannot be relied upon, if the site designer or owner allows two or more elements on the same page to have the same id attribute value. Generally speaking, the browser will only apply an ID-selecting rule to one in a set of elements sharing the same ID. ID selectors can be combined with other selectors (e.g. type selectors or class selectors), but that should rarely be necessary, since the ID itself is a unique, entirely specific, identifier. It is, occasionally, useful to combine an ID selector with a type or class selector (or with the !important flag) in order to override another rule using the same ID selector.
image-orientation: The image-orientation property is an ‘experimental property’ which determines how to correct the default orientation of an image. The value is usually an angle, specifying so many degrees of rotation e.g. (image-orientation:-90deg), but it can instruct the browser to use EXIF information contained in the image file (from-image) or flip. Should only be used with a ‘browser prefix’.
Importance: Importance is a factor used by CSS processors (browsers) to decide which of the conflicting styling instructions in the ‘cascade’ should be implemented. In the simplest case, a ‘property-value pair’ with an !important flag is considered more important than one which lacks it. When all conflicting ‘property-value pairs’ have the ‘important flag’, or none of them have it, their relative importance is evaluated by looking at their ‘source’. In this case, user-created styling instructions override, designer styling instructions, while designer styling instructions override built-in browser styles.
Important flag: The important flag (!important) is a CSS value which can be appended to any ‘property-value pair’ to indicate that it should override an otherwise identical ‘property-value pair’ which lacks the flag. It's only use for designers, is to override their own styling instructions or those of their colleagues. It cannot override an identical ‘property-value pair’ created by a user, and it is not required to override built-in browser styles. See ‘cascade’, ‘source’, ‘importance’, ‘specificity’ and ‘order’.
Indirectly adjacent selector: The Indirectly adjacent selector (E~E) is a CSS ‘relationship selector’ which targets all the specified elements which come anywhere after the earlier specified element, but within the same immediate container. For example h2~p will select all the paragraphs in a container that follow a section heading, regardless of how far after the heading they occur and regardless of which element types stand between them and the heading. This flexibility means that the selector is much more robust than the ‘directly adjacent selector’ when pages or application interfaces are dynamically updated, i.e. it will continue to work, no matter how many new elements are injected between it and the previously specified element. Many of us prefer to call this selector the ‘subsequent sibling selector’, because the English word adjacent suggests an immediate proximity which will often not apply.
Inline box: An inline box is the CSS ‘layout box’ type associated with ‘inline elements’. Inline boxes stack horizontally in lines (following the ‘directionality’ of the default document language) and wrap onto subsequent lines when their content is too wide to fit into their initial ‘anonymous line box’. Because inline boxes are designed to accommodate ‘running text’ their ‘box model’ does not allow margins and padding to be set on them, since those properties would disrupt the normal spacing of words and lines. Inline boxes can have ‘borders’ set on them, but since those borders can also disrupt the normal spacing of words and lines, it is always advisable to think very carefully before using them.
inline content: Is HTML content which is designed to flow from one line to another within ‘block boxes’, as if it were running text. In most cases inline content is, in fact, running text.
Inline element: An inline element is an HTML element type which is displayed (by default) as if it were a word or phrase contained within a line of ‘running text’. The vast majority of inline elements are, in fact, used to markup words and phrases. The most commonly used non-text inline elements are the various types of <input> element used in form design. Inline elements can be rendered using non-inline box models, by setting the ‘value’ of the CSS display property on them to something other than inline. For example, it is normal to render the link anchors on menu buttons using display:block, so that the click-able area associated with the <a> element expands to fill the entirety of their parent block (usually a list item). If this is not done, and the <a> element retains its default ‘inline box’ layout, users can only activate the link by clicking on the text content of the link anchor.
Inline layout box: See ‘inline box’
Inline level element: See ‘inline element’.
Invalid selector: The invalid selector (E:invalid) is a CSS4 'pseudo-class selector. It matches <input> and <form> elements whose content fails to validate for the given ‘input type’. The primary use cases for the invalid selector are to highlight form fields with incorrect data entry and to draw attention to related error messages and tips. Like most CSS4 selectors it has limited support in current browsers, but ‘gecko’ browsers have an experimental -moz-ui-invalid pseudo-class, which applies in a subset of :invalid cases.