Cascading Style Sheet

Giriş
Cascading Style Sheets konusunda öğrendiklerimi not ediyorum. CSS ve JQuery bazı alanlarda aynı şeyi yaptıkları için ötüşürler.

HTML Tag Selector
Örnekte bir sürü div tanımlanıyor.

<div class="section fp-section fp-table active"></div>
<div class="section fp-section fp-table"></div>
<div class="section fp-section fp-table"></div>
<div class="section fp-section fp-table"></div>
<div class="section fp-section fp-table"></div>

Sonra tüm div'ler arasında 4. olanına bir işlem uygulanıyor.

div:nth-of-type(4){
   display:none;
}

Class Selector
Sınıf isimleri nokta ile başlıyor. .myclass şeklinde yazmak lazım

ID Selector

Elimizde şöyle bir HTML olsun.

<img id="maxaboutme" src="..." height="300px" />

ID değerinin başına # karakterini ekleriz. Şöyle yaparız.

#maxaboutme
{
  border: solid grey;
  border-width: 15px;
}

Class + HTML Tag Selector
Bir sınıfa ait olup HTML Tag'i belli bir şey olanları ayırt etmek için
.myclass input şeklinde yazmak lazım. İki kelime arasındaki boşluğa dikkat !

Html tag isminden sonra "." karakteri ve class ismi gelir.
Örnek Html:
<table class="dataview">
...
</table>

Örnek Css
table.dataview tbody tr:hover td
{
    background: CornflowerBlue  ;
    cursor: pointer;
 }


CSS Özellik Örnekleri
color
Kullanılan metinin rengini belirtir. Örnek:

div {
   color: red;
}

display
Örnek:

div:nth-of-type(4){
   display:none;
}

float
Verilen eleman'ın ne tarafa doğru yaslanacağını belirtir.

!Important What does !important mean in CSS? sayfasında güzel bir açıklama var.
CSS kullanırken çakışan iki kural arasında tanımı daha yukarıdaki olan daha düşük önceliğe sahip. !Important kullanımı ile bir kurala atanan önceliği en yüksek seviyeye çıkartıp her zaman uygulanmasını sağlamak mümkün.Örnek

table.dataview tr.myclass{
    background-color: #FF4040 !important;
}

text-align
Örnek:

CSS Hareket Örnekleri
hover
Çizgili 1 pixel genişliğinde mavi border

#accepted:hover {
    border: dashed 1px blue;
}