properties

< css
Jump to: navigation, search

properties

This article is Not Ready.



Summary

CSS properties are the key to altering the styling of HTML elements in your web documents.


API Name Summary
font-variant Selects a normal, or small-caps face from a font family. Also possible by using the font shorthand.
align-content Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
align-items Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how justify-content aligns items along the main axis.
align-self Allows the default alignment to be overridden for individual flex items.
alignment-adjust This property allows precise alignment of elements, such as graphics, that do not have a baseline-table or lack the desired baseline in their baseline-table. With the alignment-adjust property, the position of the baseline identified by the alignment-baseline can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element.
alignment-baseline
all-space-treatment Specifies the treatment of all consecutive white space characters (with no exception for line feed characters).
animation Shorthand property to define a CSS animation, setting all parameters at once.
animation-delay Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.
animation-direction Defines whether an animation should run in reverse on some or all cycles.
animation-duration Defines the length of time an animation takes to complete one cycle.
animation-fill-mode Defines what values are applied by the animation outside the time it is executing (before and after the animation).

By default, an animation does not affect property values between the time it is applied (when the animation-name property is set on an element) and the time it begins execution (determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (determined by the animation-duration property). The animation-fill-mode property can override this behavior.

animation-iteration-count Specifies how many times an animation cycle should play.
animation-name Defines the list of animations that apply to the element.
animation-play-state Defines whether an animation is running or paused.
animation-timing-function Describes how the animation will progress over one cycle of its duration.
appearance Allows changing the style of any element to platform-based interface elements or vice versa.
backface-visibility Determines whether or not the “back” side of a transformed element is visible when facing the viewer.
background This background property is a shorthand property for setting the color, position, size, repeat, clip, origin, attachment, and image of the element.

The background- properties provide fundamental styles to an element, such as color, image, and position. CSS3 adds more properties for handling backgrounds, including properties that improve the mobile web experience. Many CSS background properties can be set, at the same time, with this background property.

background-attachment Defines if a background image scrolls with the content or stays fixed.
background-blend-mode This property describes how the element's background images should blend with each other and the element's background color.

The value is a list of blend modes that corresponds to each background image. Each element in the list will apply to the corresponding element of background-image. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

background-clip Specifies how an element’s background is clipped.
background-color Sets a color to fill up the background of an element it is applied to and accepts any valid CSS color.
background-composite
background-image Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients.
background-origin Specifies what the background-position property is relative to.
background-position background-position allows you to set the placement of a background-image on the element it is applied to. background-position generally takes two values, which set the horizontal and vertical position of the background image inside the element.
background-position-x Sets the horizontal position of a background image.
background-position-y Sets vertical starting position of a background image.
background-repeat Background-repeat defines if and how background images will be repeated after they have been sized and positioned
background-size Specifies the size of the background images.
baseline-shift Obsoleted - spec retired, not implemented.
behavior Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior.
block-progression Sets the block progression and layout orientation: deprecated in favor of the writing-mode property.
border Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. It can be used to set border-width, border-style and border-color, or a subset of these.
border-bottom Shorthand property that defines the border-width, border-style and border-color of an element's bottom border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the bottom border — border-bottom-width, border-bottom-style and border-bottom-color.
border-bottom-color Sets the color of the bottom border. This page explains the border-bottom-color value, but often you will find it more convenient to fix the border's bottom color as part of a shorthand set, either border-bottom or border-color.

Colors can be defined several ways. For more information, see Usage.

border-bottom-left-radius Defines the shape of the border of the bottom-left corner.
border-bottom-right-radius Defines the shape of the border of the bottom-right corner.
border-bottom-style Sets the style of an element's bottom border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style.
border-bottom-width Sets the width of an element's bottom border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.
border-collapse Border-collapse can be used for collapsing the borders between table cells.
border-color The CSS border-color property sets the color of an element's four borders. This property can have from one to four values, made up of the elementary properties:

The default color is the currentColor of each of these values.

If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, respectively. Providing three values sets the top, vertical, and bottom values, in that order. Four values set all for sides: top, right, bottom, and left, in that order.

border-corner-shape Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). Works along with border-radius to specify the size of each corner effect.
border-image Shorthand property that defines an image to be displayed and its positioning, instead of a solid color, for 'border' property. It can be used to set border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat, or a subset of these.
border-image-outset The border-image-outset property describes, by which amount the border image area extends beyond the border box.
border-image-repeat The border-image-repeat CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.
border-image-slice Divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.
border-image-source The property border-image-source is used to set the image to be used instead of the border style. If this is set to none the border-style is used instead.
border-image-width The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges.
See more pages...