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 style sheets is considered to be a fragment of a page or its full volume, placed in containers <P> and <DIV> , as well as <BODY> (if the page as a whole). Formatting a block is changing its parameters, such as: the width and height of the block, the external and internal indents from its borders, the assignment of color and appearance of both individual lines (borders) and the general background.

The dimensions of the block in the styles are specified in the properties width and height , while, like everywhere else in such cases, you cannot specify negative values. In some cases, for the design of the pages have to resort to variable dimensions of the block. To do this, CSS provides the min-width , min-height (minimum width and height of the block) and max-widht / max-height properties (their maximum values).

External indents from the block dictate the parameters: margin (indents are the same), margin-left (indent only on the left), margin-right (indent on the right), margin-top (indent from the top) and margin-bottom (indent from the bottom). Similarly, the padding property is used (indent within a block).

When setting the background of a div block, you need to apply the background-color property, the choice of the value of which is indistinguishable from the general use of colors. In case you want to use an image as a background, then use the background-image property, and specify the address and file name of the desired image in the value. You can limit the repetition of an image in a block's background with the background-repeat property and its values: repeat-x (repetition on the X axis), repeat-y (on the Y axis) and no-repeat (no repetitions). If you need to lock the background image, in order to keep it still when scrolling, use the fixed value in the background-attachment property.

To change the parameters of the block frame , apply properties that begin with the word BORDER. So with the help of border-width you can set the same values ​​for all four borders of the block, and in the values ​​of border-left-width , border-right-width , border-top-width and border-bottom-width a specific border is described. For a similar presentation, apply: border-color (the color of the lines of the border frame of the block) and border-style (the appearance of the lines). About the last property you need to add that they have several, unexplored values, we have:

  • solid, groove, ridge, double - the frame lines will be solid, indented, convex and double, respectively.
  • inset - the block is fully depressed.
  • outset - volume view of the block.
  • none - no lines.

From the above, it can be assumed that the block style may 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 that 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 a normal link.
  • a: active - active link properties.
  • a: visited - properties of the visited link.
  • a: hover - properties of the link when you hover the mouse on it.
  • a: focus - link property with focus
  • first-child - selects the first element among the following.
  • lang - formatting elements depending on the application of languages ​​on the page.

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

Pseudo-elements in styles include properties:

  • first-letter - formats the first character for the first line.
  • first-line - 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.