This page has been robot translated, sorry for typos if any. Original content here.

Formatting a block of pseudo-classes and pseudo-elements

Block formatting

A block in cascading sheets of styles is considered to be a fragment of the page or its full volume, placed in containers <P> and <DIV> , and <BODY> (if the page as a whole). Formatting the block is to change its parameters, such as: block width and height, outer and inner indents from its borders, color and appearance assignment as separate lines (borders), and general background.

Dimensions of the block in styles are specified in the width and height properties, while, as everywhere in such cases, negative values ​​can not be specified. In some cases, for the design of the pages it is necessary to resort to variable block dimensions. For this, CSS provides the properties min-width , min-height (minimum width and height of the block) and max-widht / max-height (maximum values).

External indents from the block dictate the parameters: margin , margin-left , margin-right , margin-top and margin-bottom . Similarly, the padding property is found.

When specifying the background of the div block, you need to apply the background-color property, the choice of which value is indistinguishable from the general application of colors. In case you want to use any image as a background, then apply the background-image property, while in the value specify the address and file name of the desired image. Limit the repetition of the image in the background of the block with the background-repeat property and its values: repeat-x (repeat on the X-axis), repeat-y (on the Y axis) and no-repeat (without repetitions). If necessary, fix the background image, in order for it to remain stationary while scrolling, use the value fixed in the background-attachment property.

To change the block frame parameters , properties that begin with the word BORDER are used. So with the help of border-width it is possible to set the same values ​​for all four borders of the block, and in the values border-left-width , border-right-width , border-top-width and border-bottom-width , a specific boundary is described. In a similar view, apply: border-color (the color of the border of the block) and border-style (the appearance of the lines). About the last property it is necessary to add that they have several values ​​that we have not yet learned:

  • solid, groove, ridge, double - the frame lines will be solid, dented, convex and double, respectively.
  • inset - the block is completely depressed.
  • outset - a volumetric block view.
  • none - no lines.

From the above, we can assume that the style of the block can have the following form:

.box {width: 200px; height: 100px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 15px; padding: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; border-color: # 202020; border-style: solid}

Formatting pseudo-classes and pseudo-elements

This category includes elements of Web pages, which are difficult to attribute to ordinary elements. Pseudo-classes are links , first-child and lang (language). In the CSS 2.0 specification, they are described as:

  • a: link - properties of the normal link.
  • a: active - properties of the active link.
  • a: visited - the properties of the visited link.
  • a: hover - the properties of the link when you hover the mouse over it.
  • a: focus - link property at focus
  • first-child - selects the first element among the following.
  • lang - formatting of elements depending on the use of languages ​​on the page.

In cascading style sheets, when formatting links, the same values ​​apply as for normal text. When describing other pseudo-classes in CSS, the symbol ">" is preceded by their values.

Pseudo-elements in styles include properties:

  • first-letter - formats the first character for the first line.
  • first-line - a separate formatting of the first line of the text block is assigned.
  • after - assigns the location of the object after the current element.
  • before - assigns the location of the object to the current element.