Bu web dilini öğrenerek sitelerinize stil katın ve hatta dijital sanat yaratın. CSS, dijital dünyada işlevin güzellikle buluştuğu yerdir.

Hiç kendinizi benzersiz, estetik açıdan hoş bir web sayfası oluşturmak isterken buldunuz, ancak bunu nasıl yapacağınızdan emin olamadınız mı? Basamaklı Stil Sayfaları (CSS), aradığınız yanıttır. 

CSS’yi HTML ile birlikte kullanarak türünün tek örneği web sayfaları, içerik öğeleri ve hatta sanat eserleri oluşturabilirsiniz. 

Hepsinden iyisi, öğrenmesi sandığınızdan daha kolay! 

CSS Nedir ve Ne İçin Kullanılır? 

CSS, HTML gibi bir biçimlendirme dilinde yazılmış belgelere stil eklemek için kullanılan bir dildir. 

1994 yılında Håkon Wium Lie tarafından icat edildi ve HTML ve internetin icat edildiği aynı araştırma tesisi olan CERN’de çalışıyordu . Onlarca yıl sonra, Temmuz 2022 itibariyle  tüm web sitelerinin yüzde 97’sinden fazlasının CSS kullanması ile dil her zamanki kadar popülerliğini korudu.

CSS’nin “stil ekleyebileceğini” söylediğimizde, bir belgenin yazı tipini, rengini, boyutunu, opaklığını, konumunu, şeklini, desenini, tekrarını ve diğer değerlerini kontrol edebileceğinizi kastediyoruz: 

  • text
  • background
  • borders
  • padding
  • icons
  • links
  • lists
  • tables
  • navigation bar
  • dropdown menus
  • margins

Bunu, stilize edilecek görsel özelliği ve ardından belirli bir değeri adlandırarak yapabilir.

Her biri benzersiz özelliklere sahip üç ana CSS türü vardır: 

  • Satır içi CSS (yerel CSS olarak da bilinir), bir sayfanın HTML kodunun satırlarında bulunur. Tipik olarak, paragraf veya başlık gibi tek tek HTML öğelerine stil vermek için kullanılır. 
  • Dahili CSS , tek bir HTML sayfasının stilini tanımlamak için kullanılır. Bu tür CSS, HTML dosyasına gömülüdür. 
  • Harici CSS , harici bir dosyada bulunur ve ikisini birbirine bağlayarak bir HTML sayfasına uygulanabilir. 

Üç tür CSS, web geliştiricilerinin işlevsel olduğu kadar güzel web siteleri oluşturmasını da mümkün kılar. 

CSS Nasıl Öğrenilir?

Yani, CSS’nin sağladığı neredeyse sınırsız özelleştirme seçeneklerini kullanmak istiyorsunuz, ancak nereden başlayacağınızdan emin değilsiniz. Şimdi ne olacak? 

Neyse ki, CSS’ye yeni başlayanlar artık her zamankinden daha fazla öğrenme seçeneğine sahip.

Online sınıflar: Şimdi CSS öğrenmeye başlamak ister misiniz ? Hiç sorun değil! %100 çevrimiçi CSS sınıfları , istediğiniz zaman, istediğiniz yerde CSS öğrenmenizi sağlar. 

CSS öğrenmek size şunları sağlayacaktır: 

  • Web sitelerinizi yalnızca HTML ile yapabileceğinizden daha fazla özelleştirin; 
  • Başka birinin sizin için CSS yazmasını sağlamak için harcayabileceğiniz paradan tasarruf edin; 
  • Yeni kariyer fırsatları açmak; 
  • Daha hızlı yüklenen siteler oluşturun; ve
  • Sanatsal tarzınızı daha iyi ifade edin. 

Yeni Başlayanlar İçin Temel CSS

CSS’de uzmanlaşma yolculuğunuza başlamak ister misiniz? 

İşte, başlamak için ihtiyaç duyacağınız temel bilgilerden bazıları:

Color

CSS öğrenmeye başlamanın en eğlenceli yollarından biri, bir sayfayı canlı renklerle boyamak için kullanmaktır. 

W3Schools’a göre tüm modern tarayıcılar, toz maviden kızıla ve çivit mavisine kadar her şey dahil olmak üzere  140 farklı rengi destekler.

Bunları kullanmak için, CSS veri türü “<color>”dan sonra istediğiniz rengi (adla, onaltılık kodla veya başka bir geçerli değerle) yazmanız yeterlidir.

Border

CSS, bir içerik parçasını çevreleyen kenarlık türünü belirtmek için kullanılabilir. 

Örneğin, “border-dashed” kesikli bir kenarlık oluşturur, “border-solid” düz bir kenarlık oluşturur, “border-dotted” noktalı bir kenarlık oluşturur vb. 

Selectors

CSS kodunuzun yalnızca bazı bölümlerinin belirli HTML öğelerine uygulanmasını istiyorsanız, bir seçici kullanarak tarayıcıya bu kadarını söyleyebilirsiniz. 

Seçiciler genellikle sınıflar, kimlikler veya öğeler olarak kategorize edilebilir. Örneğin, yukarıdaki “renk” bölümü altında gösterilen örnek görüntüde seçici, sonraki CSS bildiriminin tüm p (yani paragraf) öğelerine uygulanması gerektiğini belirten “p” harfidir. 

Padding and Margins

Resim veya paragraf gibi bir içeriğin etrafına boşluk eklemek için kenar boşlukları oluşturmak üzere CSS’yi kullanabilirsiniz. 

Benzer şekilde CSS, dolgu adı verilen bir şey kullanarak bir içerik parçası ile kenarlığı arasında ne kadar boşluk olması gerektiğini belirtmek için de kullanılabilir. 

Hem kenar boşlukları hem de dolgu değerleri piksel cinsinden ifade edilir. 

Fonts

CSS, görsel özelleştirme açısından hemen hemen her şeyi yapıyor ve yazı tipleri de bir istisna değil. Aslında, yazı tipinin kendisinden ağırlığına, boyutuna, ailesine, varyantına ve daha fazlasına kadar, seçtiğiniz yazı tipinin hemen hemen her yönünü açıklamak için kullanabilirsiniz.

Position

Sayfanızdaki bir öğenin konumunu belirtmek istiyorsanız, CSS bu konuda da yardımcı olabilir. Varsayılan konumlandırma tipi statiktir, bu basitçe bir öğenin görüntü alanına göre sabit bir yere yerleştirileceği anlamına gelir. Ancak daha da ilerlemek istiyorsanız,  relative, absolute ve sticky konumlandırmaya da girebilirsiniz.

Display

CSS “display” özelliği, tarayıcıya bir öğenin nasıl görüntülenmesi gerektiğini söyler.

display özelliğiyle kullanabileceğiniz ortak değerler şunları içerir:

  • inline;
  • block;
  • inline-block;
  • contents;
  • flex; and
  • grid.

Grid Layout

Kendi başına bir özellik veya değer olmak yerine, CSS Grid Layout, her şeyi hem satırlara hem de sütunlara yerleştirmenize olanak tanır. Bu büyük bir anlaşma gibi gelmese de, CSS Grid’i başka bir yaygın olarak kullanılan düzen sistemi olan Flexbox ile karşılaştırırken bunun ne kadar güçlü bir avantaj olduğu açıktır.