CSS Properties

Question 1

What is align-content?

Answer 1

It aligns a flex container’s lines within the flex container when there is extra space on the cross-axis. This property has no effect on single line flexible boxes.

Question 2

What is align-content?

Answer 2

It aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction.

Question 3

What is align-self?

Answer 3

It aligns flex items of the current flex line overriding the align-items value. If any of the flex item’s cross-axis margin is set to auto, then align-self is ignored.

Question 4

What is background?

Answer 4

Shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

Question 5

What is background-attachment?

Answer 5

If a background-image is specified, the background-attachment CSS property determines whether that image’s position is fixed within the viewport, or scrolls along with its containing block.

Question 6

What is background-clip?

Answer 6

The background-clip CSS property specifies whether an element’s background, either the color or image, extends underneath its border.

If there is no background image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

Question 7

What is background-color?

Answer 7

The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.

Question 8

What is background-image?

Answer 8

The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

Question 9

What is background-origin?

Answer 9

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

Note that background-origin is ignored when background-attachment is fixed.

Question 10

What is background-position?

Answer 10

The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Question 11

What is background-repeat?

Answer 11

The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn’t let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.

Question 12

What is background-size?

Answer 12

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

Question 13

What is bleed?

Answer 13

This property specifies the extent of the page bleed area outside the page box. This property only has effect if crop marks are enabled.

Question 14

What is border?

Answer 14

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that border-image, though not settable using this shorthand, is reset to its initial value, that is, none. This allows to use border to reset any border settings set earlier in the cascade. As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings.

Question 15

What is border-bottom?

Answer 15

The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.

Question 16

What is border-collapse?

Answer 16

The border-collapse CSS property selects a table’s border model. This has a big influence on the look and style of the table cells.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.

Question 17

What is border-color?

Answer 17

The border-color CSS property is a shorthand for setting the color of the four sides of an element’s border: border-top-color, border-right-color, border-bottom-color, border-left-color

Question 18

What is border-image?

Answer 18

The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.

The border-image is used instead of the border styles given by the border-style properties. It is important to note that if the computed value of border-image-source, which can be set either by border-image-source or the shorthand border-image, is none, or if the image cannot be displayed, the border styles will be used.

Question 19

What is border-radius?

Answer 19

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

Question 20

What is border-spacing?

Answer 20

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

This property applies only when border-collapse is separate.

Question 21

What is border-style?

Answer 21

The border-style CSS property is a shorthand property for setting the line style for all four sides of the elements border.

Question 22

What is bottom?

Answer 22

The bottom CSS property participates in specifying the position of positioned elements.

For absolutely positioned elements, that is those with position: absolute or position: fixed, it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block.

For relatively positioned elements, that is those with position: relative, it specifies the distance the element is moved above its normal position.

However, the top property overrides the bottom property, so if top is not auto, the computed value of bottom is the negative of the computed value of top.

Question 23

What is box-shadow?

Answer 23

Interactive tool allowing to generate box-shadow.
The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Question 24

What is break-after?

Answer 24

The break-after CSS property describes how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored.

Each possible break point, that is each element boundary, is under the influence of three properties, the break-after value of the previous element, the break-before value of the next element and the break-inside of the containing element.

To define if a break must be done, the following rules are applied:

If any of the three concerned values is a forced break value, that is always, left, right, page, column or region, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).
If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.
Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.

Question 25

What is break-before?

Answer 25

The break-before CSS property describes how the page, column or region break behavior before the generated box. If there is no generated box, the property is ignored.

Each possible break point, that is each element boundary, is under the influence of three properties, the break-after value of the previous element, the break-before value of the next element and the break-inside of the containing element.

To define if a break must be done, the following rules are applied:

If any of the three concerned values is a forced break value, that is always, left, right, page, column or region, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).
If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.
Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.

Question 26

What is caption-side?

Answer 26

The caption-side CSS property positions the content of a table’s on the specified side.

Question 27

What is clear?

Answer 27

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Question 28

What is clip?

Answer 28

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

Question 29

What is color?

Answer 29

The CSS color property sets the foreground color of an element’s text content, and its decorations. It doesn’t affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.

Note that the color value must be a uniform color, which may include a transparency value from CSS3 onwards. It can’t be a which is an in CSS.