By Team Clofus Innovations | Mon Jan 17 2022
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.
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;
body {
background-image: url('anyname.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 80px 60px;
background-color:lightblue;
}
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;
{ border-width: 15px;
border-style: solid;
border-color: #ff0000 #0000ff;
}
The display property specifies the type of box used for an HTML element
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;
}
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
{
font-size: 100%;
font-family: myFirstFont;
font-weight: bold;
font-variant: small-caps;
}
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: 2cm;
margin-top: 2cm;
margin-left: 2cm;
margin-right: 2cm;
}
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;
div { overflow-x: hidden;//left/right
overflow-y: hidden://top/bottom
}
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;
The table-layout property sets the table layout algorithm to be used for a table.
table-layout: auto|fixed|initial|inherit;
{ text-align: center;
text-decoration: overline;
text-indent: 50px;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
}