Contrary to what is often thought, the CSS property vertical-align does not align vertically an inline item within a block element. For example, a picture will not be centered vertically within its div container using the value ‘middle’.
Instead the CSS property vertical-align is used to vertically align an element within a table cell or inline elements in relation to other inline elements.
Below, I will use the vertical-align property and its different values to position an image in relation to a text (both inline elements) contained in a div container.
Continue to read >>
css align,
css property,
css vertical-align,
vertical align
The css property list-style allows to specify the type of markings for our list, changing the default bullet with an image (list-style-image), chosing its position (list-style-position) or the type of bullets using specific names (list-style-type).
Even if the style is applied to the list itself - html element <ul> or <ol> - the property list-style is about its inner elements <li> and to be more precised, its lateral marking.
Css rules for list-style:
ul {list-style: <value list-style-type> <value list-style-position> <value list-type-image>;}
Continue to read >>
css bullets,
css list,
css list-style,
css list-style-image,
css list-style-type-style,
css list-type-position,
css marking,
css property
With the css property text, we can specify the css style of an element’s text:
- color: the text color
- text-align: the text align to the left, right, centered or justified
- text-decoration: the text ‘decoration’ like underlined, overlined, lined-trough or also blinking
- text-transform: the transformation of each word’s first letter or of all the text in capital or lower case
- text-indent: the indent of the first line of a paragraph
- letter-spacing: the space in between each letter
- word-spacing: the space in between each word
- line-height: the space in between each line of text
- white-space: the interpretation of the blank space in the text
- direction: the direction of the text from left to right or right to left
Continue to read >>
css line-height,
css nowrap,
css space,
css text,
css text-align,
css text-decoration,
css text-indent,
css underline,
css white-space,
css word-spacing,
text color
The css property float with its values left and right allows to remove an element from its natural flux and move it towards the left or right, useful, for examples, to create the structure of a web page on more columns, horizontal menu, wrapping text around an image…
Instead, the css property clear with its values left, right, both avoids that a floated element position itself next to another block element, clearing its right or left or both sides from any elements.
Next, the characteristics of both css properties float and clear with concrete examples of their application.
Continue to read >>
clear both,
css clear,
css float,
CSS Properties,
float left,
float right
While it is possible to position the elements horizontally on the x-axis and vertically on the y-axis using specific css properties such as position, the css property z-index allows to position the elements on a z-axis modifying the depth of the elements and their normal stacking order.
Example:
Continue to read >>
css property,
css z-index,
z-index
The css property overflow indicates to the browser what to do with the content which overflow the limits of its containing block. This means that this property is only applied to elements with a fixed measure.
If the values for width and/or height are not specified, the property overflow is useless and the containing block will redimensions itself based on its content.
The property overflow accepts 4 values: visible, hidden, scroll and auto.
Continue to read >>
css,
css overflow,
CSS Properties
An important aspect in using css is to be able to select an element to apply to it the css style.
This selection can be done based on the position of the element in the page’s structure (css selector), on a specific name given to the element (class and id) or on information other then the page structure or name (pseudo-class and pseudo-element).
To facilitate the reading of this article, I added the index of selection methods classified as css selector, class and id, pseudo-class e pseudo-element:
Continue to read >>
class id,
css,
css class,
css id,
css property,
css rule,
css select,
css selector
