Cascading Style Sheet - CSS

Giriş
CSS HTML Tag'ine uygulanacak şekilde veya class için yazılabilir.

1. HTML İçinde Kulanmak
Elimizde şöyle bir html olsun.

<div>
<img src="https://..." alt="Avatar">
</div>

Şöyle yaparız.

div {
  background: #100f35;
  width: 170px;
}

Bundan sonra html içindeki her tag CSS ile şekillendirilir.

Selector Nasıl Kullanılır
Selector olarak Class Name, Id veya Tag kullanılabilir. Açıklaması şöyle. Nokta karakteri ile başlıyorsa Class Name içindir. # karakteri ile başlıyorsa ID içindir. Bunlarla başlamıyorsa HTML Tag'i içindir.

. in CSS means it is a class and it can be applied to many elements.

# in CSS means it is an ID and it can be applied to one element per page.

Without the either, it is a tag, targeting all the usage.

2. Class Name Olarak Erişmek
HTML nesnelerini class="..." özelliklerine göre seçmek için CSS'te class isminden önce nokta karakteri konulur.

class=".." özellikleri Element sınıfının, classList alanına atanır.

Açıklaması şöyle.

Selector start with dot
  .class_name signifies class name

Two doted selector separated by space
  .outside .inside
  means element with .inside class descended from an element with class .outside

Two doted selector without separation
  .name1.name2
  means element that has both class name1 and name2 eg: class="name1 name2"

Örnek - nokta + ClassName

Nokta karakterinden sonra boşluk gelemez. Açıklaması şöyle.

A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.

Örnek
Elimizde şöyle bir CSS olsun.

.red {
  color: red
}

.green {
  color: green
}

Elimizde şöyle bir HTML olsun.

<h3 id="site-heading">Please fill you gmail address</h3>
<input type="email" id="email" value="" placeholder="Enter an email" />

h3 HTML nesnesine class="red" veya class="green" özelliği takmak için şöyle yaparız.

window.addEventListener("load", () => {
  document.getElementById("email").addEventListener("input", e => {
    const heading = document.getElementById('site-heading');
    let valid = ...
    heading.classList.remove("green", "red")
    heading.classList.add(valid ? "green" : "red")
  })
})

Örnek - Tag.nokta + ClassName

Elimizde şöyle bir kod olsun. Burada > p ile direct parent belirtiliyor

li.selected > p {
  background-color: blue;
}

Parent'i <li> + className'i "selected" olan <p> tag'lerini seçer

<li class="selected">
  <p>Sharks</p> <--- Bunu seçer
   ...
</li>

3. Tag Name Olarak Erişmek - Sibling Selectors

Bir tag'in hemen altındaki tag'e erişmek için + karakterini kullanarak şöyle yaparız.

p + p { /* Matches any p tag that is directly preceded by another p tag */
  margin-top: 50px;
  border-top: 1px solid black;
  padding-top: 50px;
}

CSS Alanları
display

Örnek - Container

Soldan sağa vermek için şöyle yaparız

.flex-row {
  display: flex;
  flex-direction: row;
}

letter-spacing - Harfler arası boşluk
Genellikle <p> ile kullanılır. letter-spacing : normal veya letter-spacing : 2px; şeklinde bir değer verilebilir. normal için açıklama şöyle.

normal

The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text.

length için açıklama şöyle.

This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

Örnek
Elimizde şöyle bir kod olsun.

.loose {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -1px;
}

.zero {
  letter-spacing: 0;
}

.normal {
  letter-spacing: normal;
}

Şöyle yaparız

<p>This type has no additional letter-spacing applied.</p>

<p class="loose">This type is letter-spaced loosely at <code>2px</code>.</p>

<p class="tight">This type is letter-spaced tightly at <code>-1px</code></p>

<p class="zero">This type is letter-spaced at <code>0</code></p>

<p class="normal">This type is letter-spaced at <code>normal</code></p>

z-index
Açıklaması şöyle. z-index ne kadar büyükse ön plana çıkma o kadar fazla oluyor.

Please use lowest possible value for z-index, which you can start by trying to use 1, then 2, then 3, and so on (sequentially) until it fits on the expected layer.

The bad habit for a lot of programmer is to put value in z-index in crazy big number like 999, 9999, 10000, 9999999. which is bad practice especially if you are writing a library to be meant used by others

Örnek
Şöyle yaparız.

.carouselbutton{
  position: absolute;
  top: 40%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1;
}