CSS properties reference

CSS property all is a css shorthand to reset all properties to their initial or inherited values. Note that it is not supported in IE. read more

The background-color property sets the background color of an element. The color is drawn behind any background images. Example – background-color

The background-image property sets the background image of an element.

CSS border property can be used to define border properties of an element. Few points to note: To inherit border from parent, value inherit can read more

The border-color property sets the color of the four borders. Few points to note: When four values are specified this is the order: border-top-color, border-right-color, read more

CSS3 border-radius property can be used to make corners round of a block element. Border radius can have upto 4 values. Here is how a read more

CSS border-style property specify the line style of a box’s border (solid, double, dashed, etc.). Few points to note: When four values are specified this read more

The border-width properties specify the width of the border area of an element. Few points to note: When four values are specified this is the read more

CSS bottom property decides the bottom offset (bottom edge of element offset from bottom edge of container) for positioned elements. An element is considered positioned read more

CSS (CSS3) box-shadow property attaches one or more drop-shadows to the box. CSS property box-shadow Few points to note: blur radius spread distance and color read more

CSS box-sizing decides if specified width, height, etc. will apply to content area of an element or to whole element including padding and border. Example read more

CSS calc() function allows expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. It can be used read more

CSS property clip (clipped region) defines what portion of an element’s border box is visible. The clip property applies only to absolutely positioned (position=absolute, fixed) read more

CSS property color describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value (currentColor) for read more

CSS property color can have a special value currentColor. Its computed value is same as the computer value of color property. One possible use case read more

CSS3 color values are used in many CSS properties like color, background-color, etc. CSS3 color values can be specified in many ways. Here is the read more

CSS property cursor specifies the type of mouse cursor to be displayed on the element. Example css cursor

CSS float property decides if an element should float left or right. It can take two value – float:left or float:right. Elements after a floating read more

The CSS font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family. font values Few points to note: First three read more

CSS font-family is a list of font family names from which first value is used if present otherwise next value and so on. Here is read more

The CSS font-size property sets the font size of an html element. Example – font-size

The CSS font-style property selects between normal (sometimes referred to as “roman” or “upright”), italic and oblique faces within a font family. Example – font-style

The CSS font-variant property can be used to select small-caps variation within font family. In a small-caps font the lower case letters look similar to read more

The CSS font-weight property selects the weight of the font. The keyword normal is synonymous with 400, and bold is synonymous with 700. Values from read more

CSS property content is used with the ::before and ::after pseudo-elements to generate content in a document. Example – display url after a tag text read more

CSS left property decides the left offset for positioned elements. An element is considered positioned if its position property has value other than static. Few read more

CSS property letter-spacing specifies additional spacing between adjacent characters. Depending on the justification rules in effect (see text-align), user agents may further increase or decrease read more

On block level elements, the line-height property specifies the minimum height of line boxes within the element. Comment on inheritance In case font value is read more

CSS list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image and list-style-position at the same place in the style sheet. Example read more

The property list-style-image sets the image that will be used as the list item marker. When list-style-image set and image is available, it will replace read more

CSS list-style-position property specifies the position of the marker box with respect to the principal block box. outside: The marker box is outside the principal read more

CSS list-style-type property is used to describe type of list item marker in a list. Its initial value is disc. The value of list-style-type can read more

CSS margin property specify the width of the margin area of a box. margin values margin property can be used to specify margin-top, margin-right, margin-bottom, read more

CSS max-height property is used to set maximum height of a box element. Few points to note about max-height It cannot be negative. If max-height read more

CSS max-width property is used to set maximum width of a box element. Few points to note about max-width It cannot be negative. If max-width read more

CSS min-height property is used to set minimum height of a box element. Few points to note about min-height It cannot be negative. If min-height read more

CSS min-width property is used to set minimum width of a box element. Few points to note about min-width It cannot be negative. If min-width read more

CSS (CSS3) property can be used to set the opacity level of an element. It can have a value from 0.0 to 1.0 (default is read more

CSS outline property can be used to create outlines around visual objects such as buttons, active form fields, image maps, etc. It it different from read more

The outline-color property sets the color of the outline. Note that the outline-color value invert if not supported, then initial value of color is taken. read more

CSS outline-style property specify the line style of an element’s outline (solid, double, dashed, etc.). Example css outline-style

CSS outline-width property specify the width of an element’s outline (2px, 2em, etc.). Example css outline-width

CSS overflow property decides how to display content if it goes beyond the boundaries of a block (e.g. when inside div). Note that overflow applies read more

CSS padding property specify the width of the padding area of a box. padding values padding property can be used to specify padding-top, padding-right, padding-bottom, read more

CSS property pointer-events can be used enable/disable (default is enabled) mouse events on an element. If pointer-events is none for an element, the click event read more

CSS position property decides how an element will be places in document. It can have 4 values static (default), relative, absolute and fixed. Understanding position read more

CSS (CSS3) property resize can be used to make a div (or other block level element) resizable by clicking and dragging bottom right corner of read more

CSS right property decides the right offset (right edge of element offset from right edge of container) for positioned elements. An element is considered positioned read more

CSS property text-align specifies how the inline-level content of a block is aligned along the inline axis. Note that text-align will also affect inline and read more

CSS property text-decoration describes decorations that are added to the text of an element using the element’s color. Few points to note about text-decoration Underlines, read more

CSS property text-indent specifies the indentation of the first line of text in a block container. Few points to note about text-indent In case of read more

CSS property text-overflow specifies rendering when inline content overflows its line box edge in its block container element (“the block”) that has overflow other than read more

CSS3 text-shadow accepts a comma-separated list of shadow effects to be applied to the text of the element. CSS property text-shadow blur-radius and color are read more

CSS property text-transform controls capitalization effects of an element’s text Example – text-transform

CSS top property decides the top offset for positioned elements. An element is considered positioned if its position property has value other than static. Few read more

CSS property transition can be used to create animation effect when other specified properties change. This can only be applied on animatable properties. Few points read more

The CSS transition-delay property defines when the transition will start. It delays the transition from when it is applied. Example – transition-delay

The CSS transition-duration property defines the length of time that a transition takes. Example – transition-duration

The CSS transition-property property specifies the name of the CSS property to which the transition is applied. Example – transition-property

The CSS transition-timing-function property describes how the intermediate values used during a transition will be calculated. In order words it describes transition effects like ease, read more

CSS property visibility specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout. One can set the css display property read more

CSS whitespace property is used to describe how whitespace inside the element is handled. This property specifies two things: Whether and how white space inside read more

CSS property word-break specifies line breaking rules between letters. Note that this different from word-wrap which applies when word does not fit in line box. read more

CSS property word-spacing indicates inter-word space in addition to the default space between words. Word spacing is also influenced by justification (see the text-align property) read more

CSS property word-wrap (or overflow-wrap) specifies whether the Browser may break within a word to prevent overflow when an unbreakable string is too long to read more

CSS z-index property decides the ordering of elements when they overlap. Higher z-index mean it is closer to you and hence with appear accordingly. Few read more