Centering and Code Shorthand
Here are a few CSS tips I learned that make my code more efficient and my life a little easier!
If two or more IDâs/classes are identical, combine them by separating with a comma:
#content, .sidebar {
  background: #000;
  color: #fff;
}
To center posts, instead of setting a fixed margin-left, use:
#block-of-text {
margin-left: auto;
margin-right: auto;
width:100px; /* whatever value you want */
}
#img {
display: block;
margin-left: auto;
margin-right: auto;
}
To vertically center something:
.class { min-height: 10em; display: table-cell; vertical-align: middle;
}
To vertically center a single line of text within a set height, make the line height the same height as its container:
#text-container {
height: 200px;
}
.text {
font: normal normal 12px calibri;
line-height:200px;
}
Font shorthand is style, weight, size, family:
font: italic bold 14px arial;
Border shorthand is width, style, color:
Padding and margin shorthand is top, right, bottom, left:
padding: 5px 10px 5px 10px;
margin: 0px 12px 12px 3px;
Border-radius shorthand is top-left, top-right, bottom-right, bottom-left:
border-radius: 10px 10px 10px 0px;
Background shorthand is color, image, repeat, position:
background: #000 url('image.png') no-repeat top right;
