CSS Nasıl Kullanılır?

CSS kullanımı temelde 3'e ayrılmaktadır. Bunlar Satır içi (inline) CSS, Dahili (internal) CSS ve Harici (External) CSS şeklindedir.

Satır içi (inline) CSS

Satır içi CSS kullanımında yapılması gereken tek şey ilgili elementin içerisine girip yeni bir "attribute" değeri tanımlamak olacaktır.

<!DOCTYPE html>
<html lang="tr">
  <body>
    <h1 style="color: orange; font-size:30px;" ></h1>
   </body>
</html>

Yukarıdaki örnekte "h1" elementine satır içi CSS uygulanarak; rengi turuncuya, yazı boyutu ise 30px değerine çekilmiştir.

Satır içi CSS yapıları, doğrudan ilgili elementin içerisinde yazıldığından kaynaklı olarak seçici durumuna gerek olmadan kullanım imkanı vermektedir. Bununla birlikte elemente en yakın CSS olduğu için Harici ve Dahili CSS yazım stillerine göre daha baskın bir rolde olduğu görülmektedir.

Dahili (internal) CSS

Dahili (internal) CSS, Satır içi CSS gibi HTML sayfasının içerisinde bulunur. Fakat doğrudan ilgili elementin içine attribute değerine değil HTML elementinin <head></head> tagları arasına <style></style> tagları ile yerleştirilmektedir.

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    h1 {
      color: orange;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <h1 id="header"></h1>
</body>

</html>

Dahili(internal) ve Harici (external) CSS yazım türleri, Satır içi (inline) CSS türünden farklı olarak elemente erişim sağlamak için Seçici(Selectors) değeri almak zorundadır. Yukarıdaki örnekte CSS Temel Seçiciler yöntemli ile bir seçim yapılmış ve ilgili elementin rengi turuncu, yazı büyüklüğü ise 30px olarak ayarlanmıştır.

Harici (External) CSS

Dahili ve Satır içi CSS'ten farklı olarak doğrudan HTML sayfası içerisinde bulunmaz. Bunun yerine, uzantısı ".css" olan bir dosya içerisinde tanımlanır ve ilgili HTML sayfasına link komutu ile dahil edilir.

index.html
style.css

Öncelikli olarak HTML dosyamızın yanına yukarıdaki gibi "sytle.css" şeklinde yeni bir dosya daha oluşturuyoruz. Daha sonra:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./style.css"> <!-- Dosya yolu -->
  </head>
  <body>
    <h1 id="header"></h1>
  </body>
</html>

Yukarıdaki gibi <link rel="stylesheet" href="./style.css"> komutu aracılığı ile oluşturmuş olduğumuz dosyayı projemizin içerisine dahil ediyoruz.

Daha sonrasında:

#header{
  color: orange;
  font-size: 30px;
}

CSS Seçiciler aracılığı ile elemente erişim sağlayıp; rengini turuncu, yazı boyutunu ise 30px olarak ayarlamaktayız.

CSS Pseudo-element (Sözde Element) Seçiciler

Pseudo, kelime anlamı ile sahte manasına gelmektedir. Bu nedenle aslında var olan bir elementin üzerinden türetilen CSS özellikleridir. Doğrudan HTML elementleri incelendiğinde sayfa içerisinde bulunan harici bir element değillerdir.

Pseudo-class (Sözde Sınıf) yapıları ile arasındaki en belirgin fark; Pseudo-class yapıları CSS'te ":" ile gösterilirken, Pseudo-element yapıları CSS'te "::" işareti ile gösterilmektedir.

Toplamda 7 farklı Pseudo-element yapısı bulunmaktadır. Bunlar: ::after, ::before, ::first-letter, ::first-line, ::marker, ::placeholder, ::selection şeklindedir.

1) CSS "::after" seçicisi nedir?

Devamını görüntüle

CSS, Pseudo - Class (Sözde Sınıf) Seçiciler

Psudo, kelime anlamı ile "sahte" manasına gelmektedir. Bu nedenle aslında bu işlemler içerisinde yapmış olduğumuz seçim işlemleri, doğrudan elementin sahip olduğu değerler değil, olması beklenen değerlerdir. CSS, Pseudo - Class Seçicileri konusunun daha iyi anlaşılması için 6 farklı başlık altında bir yazım gerçekleştireceğiz. Bunlar; Genel Pseudo-class seçiciler, Form elemanlarına yönelik Pseudo-class seçiciler, Ebeveyn - Çocuk ilişkisine yönelik Pseudo-class seçiciler, Elemanın türüne yönelik Pseudo-class seçiciler, İçerik durumuna yönelik Pseudo-class seçiciler ve en son olarak Kök eleman seçici şeklindedir.

CSS Genel Pseudo-class seçiciler

En sık kullanılan Pseudo-class seçicileridir. Birden çok Genel Pseudo-class yapısı...

Devamını görüntüle