Y dakikada X öğren

/* yorumlar bu satırdaki gibi taksim-yıldız içinde görünür
CSS'te "tek satırlık yorumlar" bulunmamaktadır; bu sadece tek bir yorum yazma stilidir */

/* ####################
   ## SEÇİCİLER
   #################### */

/* seçici bir sayfadaki unsuru hedeflemek için kullanılır. */
seçici { özellik: değer; /* daha fazla özellikler...*/ }

/*
İşte bir örnek:

<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
*/

/*   */

/* CSS sınıflarının birini kullanarak hedefleyebilirsiniz */
.class1 { }

/* veya her iki sınıfı birden!*/
.class1.class2 { }

/* veya sadece ögenin adını yazarak */
div { }

/* veya onun ID adını */
#anID { }

/* veya onun aldığı bir özelliği kullanarak! */
[attr] { font-size:smaller; }

/* veya onun aldığı özelliğin belirli bir değeri varsa */
[attr='value'] { font-size:smaller; }

/* bir değer ile başlıyorsa (CSS 3) */
[attr^='val'] { font-size:smaller; }

/*  veya bir değer ile bitiyorsa (CSS 3)*/
[attr$='ue'] { font-size:smaller; }

/* veya boşlukla ayrılmış liste içinde bir değer içeriyorsa */
[otherAttr~='foo'] { }
[otherAttr~='bar'] { }

/*  veya tire ile ayrılmış bir liste içinde bir değer içeriyorsa, örneğin: "-" (U+002D) */
[otherAttr|='en'] { font-size:smaller; }

/*  Farklı seçicileri birleştirerek daha fazla odaklanmış bir seçici oluşturabilirsiniz. Seçiciler arasında boşluk bırakmayın. */
div.some-class[attr$='ue'] { }

/*  Başka bir ögenin alt ögesi olan bir ögeyi seçebilirsiniz. */
div.some-parent > .class-name { }

/* veya bir başka ögeden türeyeni seçebilirsiniz. Alt ögeler onların ebeveynlerinin direkt türünden gelir, sadece ağacın bir alt ögeleridirler. Soyundan gelenler ağacın herhangi bir alt seviyesinde olabilir. */

div.some-parent .class-name { }

/* Uyarı: Seçiciler arasında bir boşluk bırakmazsanız aynı seçicinin başka bir anlamı olur.
Ne olduğunu tahmin edebilir misiniz?  */

div.some-parent.class-name { }

/*  Ayrıca bir ögenin bitişik kardeşini temel alarak bir ögeyi seçebilirsiniz. */
.i-am-just-before + .this-element { }

/*  veya kendisinden önce gelen herhangi bir kardeş ögeyi */
.i-am-any-element-before ~ .this-element { }

/* Yalnızca belli bir durumda bir öge seçmek için kullanılan sahte sınıflar adı verilen bazı seçiciler vardır. */

/* Örneğin, imleç bir ögenin üzerine geldiğinde  */
selector:hover { }

/* veya bir bağlantı ziyaret edildiğinde  */
selector:visited { }

/*  veya ziyaret edilmediğinde */
selected:link { }

/*  veya bir ögeye odaklanıldığında */
selected:focus { }

/*  Ebeveyninin ilk alt ögesi olan herhangi bir öge */
selector:first-child {}

/*  Ebeveyninin son alt ögesi olan herhangi bir öge */
selector:last-child {}

/* Sahte sınıflar gibi sahte elementler de bir dokümanın belirli bir parçasına  stil vermenize izin verir. */

/* Seçilen ögenin sanal ilk alt ögesiyle eşleşir. */
selector::before {}

/* Seçilen ögenin sanal son alt ögesiyle eşleşir. */
selector::after {}

/* Uygun yerlerde yıldız karakteri ile bütün ögeleri seçmek için joker olarak kullanılabilir. */

* { } /* Bütün ögeler */
.parent * { } /* Tüm alt ögeler */
.parent > * { } /* Tüm çocuk ögeler */

/* ####################
   ## ÖZELLİKLER
   #################### */

selector {

    /* Ölçü birimleri kesin veya göreceli olabilir.*/

    /* Göreceli birimler */
    width: 50%;       /* Ebeveyn elementin yüzdesel olarak genişliği */
    font-size: 2em;   /* Öğenin özgün yazı tipi boyutunda katları */
    font-size: 2rem;  /* veya kök ögenin yazı tipi boyutu */
    font-size: 2vw;   /* Görüntüleme çerçevesinin genişliğinin %1 olarak katları (CSS 3) */
    font-size: 2vh;   /* veya onun yüksekliğinin */
    font-size: 2vmin; /* Bir vh veya vw'nin hangisi küçükse */
    font-size: 2vmax; /* veya daha büyük... */

    /* Kesin birimler */
    width: 200px;     /* Piksel */
    font-size: 20pt;  /* Nokta */
    width: 5cm;       /* Santimetre */
    min-width: 50mm;  /* Milimetre */
    max-width: 5in;   /* İnç */

    /* Renkler */
    color: #F6E;                 /* Kısa onaltılık (HEX) biçimi */
    color: #FF66EE;              /* Uzun onaltılık (HEX) biçimi */
    color: tomato;               /* Bir isim verilen renk */
    color: rgb(255, 255, 255);   /* RGB değerleri verilen türde */
    color: rgb(10%, 20%, 50%);   /* RGB yüzdeleri verilen türde */
    color: rgba(255, 0, 0, 0.3); /* RGBA değerleri verilen türde (CSS 3) Not: 0 <= a <= 1 */
    color: transparent;          /* Şeffaflık değerinin sıfır olması ile eşdeğer */
    color: hsl(0, 100%, 50%);    /* HSL yüzdeleri verilen türde (CSS 3) */
    color: hsla(0, 100%, 50%, 0.3); /* HSL ile beraber şeffaflık değeri verilen türde */

    /* Kenarlıklar */
    border-width:5px;
    border-style:solid;
    border-color:red;      /* background-color'ın ayarlanışına benzer şekilde */
    border: 5px solid red; /* Bu aynı şeyin kısayol ile yazılışıdır */
    border-radius:20px;    /* Bu bir CSS3 özelliğidir  */

    /* Görseller ve Ögelerin Arkaplanları  */
    background-image: url(/img-path/img.jpg); /* url() içindeki tırnak işaretleri isteğe bağlı */

    /* Yazı tipleri */
    font-family: Arial;
    /* Eğer yazı tipi ailesi isminde bir boşluk var ise tırnak işareti içine alınmalıdır. */
    font-family: "Courier New";
    /* Eğer ilk sıradaki bulunamazsa, tarayıcı bir sonrakini kullanır */
    font-family: "Courier New", Trebuchet, Arial, sans-serif;
}

<!-- CSS dosyanızı sayfanın içindeki <head> alanına dahil etmeniz gerekiyor. Bu önerilen yöntemdir. Bakın: http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css'>

<!-- Bazı CSS kodları satır içi olarak yazabilirsiniz. -->
<style>
   a { color: purple; }
</style>

<!-- Veya ögenin üzerinde CSS özelliklerini direkt ayarlayabilirsiniz. -->
<div style="border: 1px solid red;">
</div>

/* A */
p.class1[attr='değer']

/* B */
p.class1 { }

/* C */
p.class2 { }

/* D */
p { }

/* E */
p { özellik: değer !important; }

<p style='/*F*/ özellik:değer;' class='class1 class2' attr='değer'>

/* Tüm cihazlarda kullanılacak olan bir kural */
h1 {
  font-size: 2em;
  color: white;
  background-color: black;
}

/* h1 ögesini değiştirip bir yazıcıda  daha az mürekkep kullanın*/
@media print {
  h1 {
    color: black;
    background-color: white;
  }
}

/* En az 480 piksel genişliğinde bir ekran gösterildiğinde font yüksekliğini daha büyük yap */
@media screen and (min-width: 480px) {
  h1 {
    font-size: 3em;
    font-weight: normal;
  }
}

<head>
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>