Commonly used CSS properties

A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

CSS

Background Property:

The background shorthand property sets all the background properties in one declaration. The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; Example:

body { 
    background-image: url('anyname.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 80px 60px;
    background-color:lightblue;
}

Border Property:

The border shorthand property sets all the border properties in one declaration. The properties that can be set, are (in order): border-width, border-style, and border-color. It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.

border: border-width border-style border-color|initial|inherit;

Example:

{   
    border-width: 15px;  
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

Display property: The display property specifies the type of box used for an HTML element

Initial block inherit none

Flex Property: The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.

{  
    display: -webkit-flex; 
    display: flex;  
}

Font Property: The font shorthand property sets all the font properties in one declaration. The properties that can be set, are (in order): “font-style font-variant font-weight font-size/line-height font-family” font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit

Example:

{
    font-size: 100%;
    font-family: myFirstFont;
    font-weight: bold;
    font-variant: small-caps;
}

Margin Property: The margin shorthand property sets all the margin properties in one declaration. This property can have from one to four values.

margin: length|auto|initial|inherit; margin-bottom margin-top margin-left margin-right Example

{  
    margin-bottom: 2cm;
    margin-top: 2cm;
    margin-left: 2cm;
    margin-right: 2cm;
}    

Overflow Property: The overflow property specifies what happens if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. overflow: visible|hidden|scroll|auto|initial|inherit; Example:

div {  
    overflow-x: hidden;//left/right
    overflow-y: hidden://top/bottom
}

Padding Property: The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values. padding: length|initial|inherit; padding-bottom padding-top padding-right padding-left Table Layout Property The table-layout property sets the table layout algorithm to be used for a table. table-layout: auto|fixed|initial|inherit;

Example

{  
    text-align: center;
    text-decoration: overline;
    text-indent: 50px;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
}

For any query contact Clofus Innovations.