column-countのプロパティで、コンテンツの段組ができます。
以下のように値を3と指定したときは、3カラムのボックスが構成されます。

■html

■css
div.tst {
width: 500px;
column-count: 3;
}

■html

てすとてすとてすとてすとてすとてすとてすとてすと

■css
.hide_txt {
background: #cccccc url(./img/test.jpg);

text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

テキストを画像に置換出来ます。今までのtext-indent: -9999pxの代替です。

Flexboxなら下記のような並びも簡単に実装できます。

高さの異なる要素を、上下中央揃えできる
横並びになった要素の高さを揃える
要素を上下左右、並び替えられる
スペースの操作も簡単にできます。
■html

■css
.main a {
margin: 10px;
background: #cccccc;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
.main-nav {
display: flex;
}

positionを使うことでbeforeの疑似要素の高さが親要素の高さをそろえてくれます。
■html

■css
#test{
position: relative;
vertical-align: middle;
}
#test li:before{
position: absolute;
width: 16px;
height: 100%;
right: 0;
background-color: #72BBD1;
}

漢字にふりがなをつける

タグを使うと漢字にフリガナを付けることができます。
■html
実験じっけん

名前なまえ

仮名かな

省略したことを表す「…」をCSSだけで表示可能です。

CSSを使うと幅を指定してその領域よりもはみでた場合に省略記号「…」を表示することができます。

ext-overflow: ellipsis;
テキストが表示域をこえた時に省略記号「…」を表示

text-overflow: clip;
省略記号は表示しない

white-spaceプロパティは、半角スペース・タブ・改行の表示の仕方を指定できます。
nowrapというオプションは
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、thの大きさが指定されている場合にも、自動的に改行されません。
■css
th {
white-space:nowrap;
}
widthで横幅を指定しないでも改行を禁止することで改行させないようにできます。

要素の中に何も入っていないときは違うスタイルを当てたいとき:emptyを使用すると便利です。
このスタイルを使用すると、空の要素に対してのみ異なったスタイルを適用することが出来ます。

/* :empty を指定することで、空の場合は非表示にできる。 */
.test:empty {
display: none;
}

スタイルシートの継承は、親から子へプロパティの値が引き継がれることです。
例えば、文字の大きさや色が引き継がれると言った具合です。
■html

■css
body{font-size:100%;}
div.test{font-size:120%;}
div.test p{font-size:80%;}

文字サイズはbodyの文字サイズを基準としたとき96％になります。font-sizeは継承されるので、pの文字サイズはdiv.testの値を基準に算出されます。
なので、pの文字サイズは1×1.2×0.8×100＝96%となります。