1. Căn giữa theo chiều ngang

Để căn giữa theo chiều ngang một đối tượng kiểu block, bạn chỉ ra độ rộng (width) và thiết lập thuộc tính margin left, right là auto.

div#page {width: 960px; margin: 0 auto}

2. Căn giữa theo chiều dọc đối tượng block

HTML:

<div id=”content”>your content here</div>

CSS:

div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

Thuộc tính top: 50% sẽ làm thẻ div sẽ cách phía trên một nửa chiều cao của đối tượng chứa nó. Kết hợp với thuộc tính margin-top có giá trị bằng 1/2 chiều cao của thẻ div sẽ làm nó được căn giữa.
Bạn cũng có thể làm tương tự để căn giữa theo chiều ngang:

div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px; margin-top: -250px}

3. Conditinal comments

Nếu muốn đoạn css chỉ áp dụng với một trình duyệt nhât định bạn có thể dùng conditional comment. Ví dụ muốn áp dụng css đối với riêng trình duyệt IE:

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie-stylesheet.css” />
< ![endif]–>

Ngoài ra bạn cũng có thể chỉ ra phiên bản của IE bằng cách kết hợp các điều kiện sau:

<!–[if IE 6]> – targets IE6 only –>
<!–[if gt IE 6]> – targets IE7 and above –>
<!–[if lt IE 6]> – targets IE5.5 and below –>
<!–[if gte IE 6]> – targets IE6 and above –>
<!–[if lte IE 6]> – targets IE6 and below –>

4. Html hack cho IE

Một trong những cách viết CSS chỉ cho IE là sử dụng dấu * và _

.element {
  background: red; /* các trình duyệt hiện đại */
*background: green; /* IE7 và các phiên bản thấp hơn */
_background: blue; /* chỉ IE6 */
}

5. Style cho chữ cái đầu tiên của đoạn văn bản

Sử dụng pseudo-element :first-letter

p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}

6. Nth-child

nth-child pseudo class cho phép bạn chọn các thành phần có thự tự bất kỳ trong một list. Ví dụ:

ul li:nth-child(3) {
background: blue
}
Đoạn CSS trên sẽ đặt background là blue cho thành phần thứ 3 của list.

ul li:nth-child(3n+3) {
background: blue
}
Đoạn CSS trên sẽ đặt background là blue cho các thành phần thứ 3, 6, 9, 12,… của list.
nth-child hay được dùng để style cho các dòng chẵn, dòng lẻ của một table. nth-child được hỗ trợ bởi hầu hết các trình duyệt trừ IE8 trở xuống. Bạn có thể dùng nth-child selector của jQuery để thay thế.

7. CSS3 Animations

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}