CSS depended property

In CSS some css property which depend on other property value. They are related each other and works in together. Following CSS category will include dependent property are they

1. Background Property
2. Border Property
3. List Property
4. Position Property
5. Table Property

Background Property

The background property in CSS allows you to control the background of any element like image or content. It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:

The CSS background properties are used to define the background effects for an elements. If you try out to apply following background property without including a image or content it wont apply to the element. So first use background-image property.

• background-repeat : Sets how a background image will be repeated
• background-position : Sets the starting position of a background image
• background-size : Specifies the size of the background images

Border Property

The CSS border properties allow you to specify the style, width, and color of an element’s border.  It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:

If you try out to apply following border-radius property to element without including a border property it wont apply to the element. So first use border property.

• border-radius : The border-radius property is used to add rounded borders to an element

List Property

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

If you try out to apply following list property to element without including any list (ol, ul or dl) it wont apply to the element. So first include list then use this property

• list-style-type :The list-style-type property specifies the type of list item marker.
• list-style-position : Specifies an image as the list item marker
• list-style-image : The list-style-image property specifies an image as the list item marker

Position Property

The position CSS property specifies how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

If you try out to apply following position property to element without including position it wont apply to the element. So first include position; positioned element is an element whose computed position value is either relative, absolute, fixed, or static.

• left : A positioned element horizontally from left
• right :  A positioned element horizontally from right
• top :  A positioned element vertically from top
• bottom : A positioned element vertically from bottom
• z-index : The z-index CSS property specifies the z-order of a positioned element and its descendants. An element with greater z-index is always in front of an element with a lower z-index.

Table Property

Table properties allows you to styled a table structure and its content. 

If you try out to apply following table property without including table it wont apply to the element. So first use table and then use this property

• border-collapse : Specifies whether or not table borders should be collapsed
• border-spacing : Specifies the distance between the borders of adjacent cells
• caption-side : Specifies the placement of a table caption
• empty-cell : Specifies whether or not to display borders and background on empty cells in a table