Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır.
CSS 1996′da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0′da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz.
CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:
Görünüm Avantajları


CSS HTML’e göre bir çok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.
Görünüm Avantajları


CSS HTML’e göre bir çok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.

1.<h1>CSS'e Giriş</h1>

HTML’de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

Kod:

01.h[color=#009900]1[/color] {
02.[b][color=#006699]color[/color][/b]: [color=#009900]white[/color];
03.[b][color=#006699]font[/color][/b]: [color=#009900]italic[/color] [color=#009900]11px[/color] [color=#808080]Arial[/color], [color=#808080]serif[/color];
04.[b][color=#006699]text-decoration[/color][/b]: [color=#009900]underline[/color];
05.[b][color=#006699]background[/color][/b]: yellow [color=#009900]url[/color](titlebg.gif) [color=#009900]repeat-x[/color];
06.[b][color=#006699]border[/color][/b]: [color=#009900]1px[/color] [color=#009900]solid[/color] [color=#009900]red[/color];
07.[b][color=#006699]margin-bottom[/color][/b]: [color=#009900]0[/color];
08.[b][color=#006699]padding[/color][/b]: [color=#009900]5px[/color];
09.}

Kullanım Kolaylığı


HTML’de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptımızı düşünütseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

Kod:

<[b][color=#006699]h1[/color][/b]><[b][color=#006699]font[/color][/b] [color=#808080]color[/color]=[color=#0000ff]"blue"[/color]>Başlık</[b][color=#006699]font[/color][/b]></