CSS Reference
CSS Property List
| Name | Description |
|---|---|
| @font-face | a web font(CSS3) |
| @keyframes | one or more key frames for an animation (CSS3) |
| animation | Shorthand property for animations (CSS3) |
| animation-delay | a delay before an animation starts (CSS3) |
| animation-direction | how alternate repeats of an animation are performed (CSS3) |
| animation-duration | the duration of an animation (CSS3) |
| animation-iterationcount | the number of times an animation will be repeated (CSS3) |
| animation-name | the name for an animation (CSS3) |
| animation-play-state | playing or is paused (CSS3) |
| animation-timingfunction | the function to calculate values between key frames(CSS3) |
| background | all background values. |
| background-attachment | background attachment, useful for scrolling regions. |
| background-clip | Sets the area where the background color and image are visible. (CSS3) |
| background-color | background color. |
| background-image | the image for the background. |
| Sets the point for the background image. (CSS3) | |
| background-position | Positions the image. |
| background-repeat | the repeat style for the background image. |
| background-size | the size for the background image. (CSS3) |
| border | all border values for all edges. |
| border-bottom | all border values for the bottom border. |
| border-bottom-color | the color for the bottom border. |
| border-bottom-leftradius | the corner radius for curved borders. (CSS3) |
| border-bottom-rightradius | the corner radius for curved borders. (CSS3) |
| border-bottom-style | style for the bottom border. |
| border-bottom-width | width for the bottom border. |
| border-collapse | the display style for borders on adjacent table cells |
| border-color | the border color for all edges. |
| border-image | for image-based borders. (CSS3) |
| border-image-outset | the area outside the border box used for displaying the image. (CSS3) |
| border-image-repeat | the repeat style for the border image. (CSS3) |
| border-image-slice | the offsets for the image slices. (CSS3) |
| border-image-source | the source for the border image. (CSS3) |
| border-image-width | the width of the image border. (CSS3) |
| border-left | left border shorthand. |
| border-left-color | the color for left border. |
| border-left-style | the style for the left border. |
| border-left-width | the width for the left border. |
| border-radius | Shorthand for curved border. (CSS3) |
| border-right | Shorthand for the right border. |
| border-right-color | the color for the right border. |
| border-right-style | the style for the right border. |
| border-right-width | the width of the right border. |
| border-spacing | the spacing between table cell borders |
| border-style | the style shorthand for all borders. |
| border-top | Shorthand for the top border. |
| border-top-color | the color of the top border. |
| border-top-left-radius | the radius for a corner for curved borders. (CSS3) |
| border-top-right-radius | the radius for a corner used for curved borders. (CSS3) |
| border-top-style | the style for the top border. |
| border-top-width | the width for the top border. |
| border-width | the width for all borders. |
| bottom | the bottom-edge offset for a positioned element. |
| box-shadow | one or more drop shadows. (CSS3) |
| box-sizing | the box size-related properties (CSS3) |
| caption-side | the position of a table caption |
| clear | Clears one or both edges for a floating element |
| color | the foreground color |
| column-count | the number of columns in a multicolumn layout. (CSS3) |
| column-fill | how content should be distributed between columns. (CSS3) |
| column-gap | the distance between columns. (CSS3) |
| column-rule | Shorthand to define the rule between columns. (CSS3) |
| column-rule-color | the color of the rule. (CSS3) |
| column-rule-style | the style of the rule. (CSS3) |
| column-rule-width | the width of the rule. (CSS3) |
| column-span | how many columns an element should span. (CSS3) |
| column-width | the width of columns. (CSS3) |
| columns | Shorthand for setting the column-span and column-width. (CSS3) |
| cursor | the cursor style |
| direction | the text directionality |
| display | how the element is displayed. |
| display | the type of an element's box |
| empty-cells | how borders are drawn on empty table cells |
| flex-align | for flexible box layout. (CSS3) |
| flex-direction | for flexible box layout. (CSS3) |
| flex-order | for flexible box layout. (CSS3) |
| flex-pack | for flexible box layout. (CSS3) |
| float | Shifts an element to the left or right edge |
| font | the font details in a single declaration |
| font-family | the list of font families in order of preference |
| font-size | the size of the font |
| font-style | normal, italic... |
| font-variant | if the font should be displayed in small caps form |
| font-weight | the boldness |
| height | the height |
| left | the left-edge offset for a positioned element. |
| letter-spacing | the space between letters |
| line-height | the height of a line |
| list-style | a list style |
| list-style-image | an image as a list marker |
| list-style-position | the list marker position relative to a list item |
| list-style-type | the marker type for a list |
| margin | Shorthand property for the margin in all four directions |
| margin-bottom | the margin for the bottom |
| margin-left | the margin for the left edge |
| margin-right | the margin for the right edge |
| margin-top | the margin for the top edge |
| max-height | Sets the maximum height for the element |
| max-width | the maximum width |
| min-height | the minimum height |
| min-width | the minimum width |
| opacity | the transparency (CSS3) |
| outline | Shorthand property for the outline in a single declaration. |
| outline-color | outline color . |
| outline-offset | the offset of the outline. |
| outline-style | the style of the outline. |
| outline-width | the width of the outline. |
| overflow | Shorthand for the overflow style |
| overflow-x | overflowing content on the x-axis (CSS3) |
| overflow-y | overflowing content on the y-axis (CSS3) |
| padding | Shorthand for the padding in all four directions |
| padding-bottom | the padding for the bottom |
| padding-left | the padding for the left |
| padding-right | the padding for the right |
| padding-top | the padding for the top |
| position | the positioning method. |
| right | the right-edge offset. |
| table-layout | how the size of a table is determined |
| text-align | the alignment of text |
| text-decoration | the decoration of text |
| text-indent | the indentation of text |
| text-justify | the justification of text |
| text-shadow | a drop shadow for text (CSS3) |
| text-transform | transformation to text |
| top | the top-edge offset. |
| transform | a transform to apply(CSS3) |
| transform-origin | an origin of a transform(CSS3) |
| transition | Shorthand property for transitions (CSS3) |
| transition-delay | a delay before the transition starts (CSS3) |
| transition-duration | the duration of a transition (CSS3) |
| transition-property | properties to be transitioned (CSS3) |
| transition-timingfunction | the function to calculate intermediate values during the transition (CSS3) |
| visibility | the visibility for an element |
| width | the width |
| word-spacing | the spacing between words |
| z-index | the front-to-back order. |
CSS Selector
| Selector | Select |
|---|---|
| * | all elements. |
| <type> | elements of the specified type. |
| .<class> | elements of the specified class. |
| #<id> | elements for the id attribute. |
| [attr] | elements that define the attribute attr, regardless the attribute's value. |
| [attr="val"] | elements with attr whose is val. |
| [attr^="val"] | elements with attr whose value starts with the string val. (CSS3) |
| [attr$="val"] | elements with attr whose value ends with the string val. (CSS3) |
| [attr*="val"] | elements with attr whose value contains the string val. (CSS3) |
| [attr~="val"] | elements with attr whose value contains multiple values, onc of which is val. |
| [attr|="val"] | elements with attr whose value is a hyphen-separated, the first is val. |
| <selector>, <selector> | the union of the elements matched by each individual selector. |
| <selector><selector> | Selects elements that match the second selector and that are arbitrary descendants of first selector. |
| <selector>><selector> | Selects elements that match the second selector and that are immediate descendants of the first selector. |
| <selector> + <selector> | Selects elements that match the second selector and that immediately follow the first selector. |
| <selector> ~ <selector> | Selects elements that match the second selector and that follow an element that matches the first selector. (CSS3) |
| ::first-line | the first line of text. |
| ::first-letter | the first letter of text. |
| :before | Inserts content before. |
| :after | Inserts content after. |
| :root | Selects the root element. (CSS3) |
| :first-child | Selects the first children. |
| :last-child | the last children. (CSS3) |
| :only-child | the sole element from the containing element. (CSS3) |
| :only-of-type | Selects elements that are the sole element of their type defined by their containing element. (CSS3) |
| :nth-child(n) | the nth child of their parent. (CSS3) |
| :nth-last-child(n) | the nth from last child of their parent. (CSS3) |
| :nth-of-type(n) | the nth child of their type defined by their parent. (CSS3) |
| :nth-last-of-type(n) | the nth from last child of their type defined by their parent. (CSS3) |
| :enabled | elements in their enabled state. CSS3) |
| :disabled | elements in their disabled state. CSS3) |
| :checked | elements in a checked state. CSS3) |
| :default | Selects default elements. CSS3) |
| :valid | Selects input elements that are valid based on input validation. (CSS3) |
| :invalid | Selects input elements that are invalid based on input validation. (CSS3) |
| :in-range | Selects constrained input elements that are within the specified range. (CSS3) |
| :out-of-range | Selects constrained input elements that are outside the specified range. (CSS3) |
| :required | Selects input elements based on the presence of the required attribute. (CSS3) |
| :optional | Selects input elements based on the presence of the required attribute. (CSS3) |
| :link | Selects link elements. |
| :visited | Selects link elements the user has visited. |
| :hover | elements under the mouse pointer. |
| :active | elements under the pointer when the mouse button is pressed. |
| :focus | focused element |
| :not(<selector>) | Negates a selection.(CSS3) |
| :empty | Selects elements that contain no child elements. (CSS3) |
| :lang(<language>) | Selects elements based on the value of the lang attribute. |
| :target | Selects the element referred to by the URL fragment identifier. (CSS3) |
| Counter | Counter |