En Çok Kullanılan CSS Kodları ve İşlevleri

Türkçeye katmanlı stil şablonları veya basamaklı stil sayfaları olarak çevrilen CSS (Cascading Style Sheets) günümüz web tasarımının olmazsa olmazları arasında yer alır. HTML ile hazırladığın bir belgeyi görsel olarak biçimlendirmek için kullanabileceğin CSS, web sitelerinin ve uygulamalarının görünümünü kontrol etmene olanak tanır. Front-End web geliştiricilerin yakından tanıdığı CSS kodları, katmanlı yapısı sayesinde komplike stiller oluşturmak ve görsel optimizasyon sorunlarını gidermek için de sıklıkla kullanılır.

Bir işaretleme dili olan CSS, diğer programlama dillerinden farklı olarak yazılan kaynak kodları değiştirmez, sadece onları farklı şablonlar üzerinden biçimlendirir. Dolayısıyla CSS kullanımı web sitesindeki ana iskeleti, algoritma yapısını ve genel yazılım mantığını etkilemez. CSS’i usta bir terzinin giysi üzerindeki dokunuşları olarak düşünebilirsin. CSS işaretleme dilini bir makas gibi kullanabilen yazılımcı da internet sitesi veya mobil uygulama üzerindeki uyumsuzlukları kırparak giderebilir, sayfa boşluklarını ve renk tonlarını dilediği gibi ayarlayabilir.

Sık Kullanılan CSS Kodları ve İşlevleri

CSS'de çok sayıda kod ve bu kodların kendine özgü işlevleri vardır. Bunlar arasında en çok kullanılan 10 popüler CSS koduna yakından göz atalım.

1. Display

Display CSS kullanımı ile bir öğenin sayfa içindeki konumunu ve akış içindeki yerini ayarlamak mümkündür. Öğelerin blok, kutu veya satır içi alandaki konumunu belirlemek için display özelliğini kullanabilir, çeşitli objeleri sayfa içinde dilediğin gibi konumlandırabilirsin. En çok kullanılan display seçenekleri şu şekilde sıralanabilir:

• block: display’in temel özellikleri içinde bulunan block, div ve p gibi metin bloklarını düzenler. Varsayılan olarak blok düzeyinde gelen öğeler bulunduğu alanı maksimum oranda kaplar. Blok öğesinin yanına yerleştirilen diğer blok nesneleri aynı yatay çizgide kalamaz ve otomatik olarak aşağıya iner.
• inline: Satır içi yönde ve satır içi öğeler kadar yer tutar. Normal bir yazı akışı inline olarak görüntülenir. Inline özelliğe sahip objelerin genişliğini ve yüksekliğini değiştirmek mümkün olmaz, bu alanlar font veya satır içi nesnelerin özelliklerine göre otomatik olarak boyutlanır.
• inline-block: inline ve block yapılarını birleştiren bir görüntüleme özelliğidir. Inline block ile genişlik ayarlaması yapabilir ve diğer öğelerle yan yana dizilim sağlayabilirsin.
• flex: CSS’in en güncel özellikleri arasında yer alan flex, sayfa içi öğeleri daha esnek, pratik ve sorunsuz bir şekilde sıralamana olanak tanır.
• none: İsminden de anlaşılacağı üzere none özelliği uygulandığı öğenin sayfada gösterilmemesini sağlar.

Örnek:

display: block;

display: inline;

display: inline-block;

display: flex;

display: none;

2. Position

Popüler CSS kodları içinde yer alan position, objelerin sayfa içindeki konumunu belirlemek için kullanılır. Front-End web tasarımcılar konum özelliğini kullanarak kullanıcı arayüzünde önemli değişiklikler yapabilir. Göreceli konum (position: relative) içine konumlandırılan bir mutlak konum (position: absolute) öğesi sayesinde bir nesneyi istediğin alana konumlandırman mümkün olur. Sabit (fixed), statik (static) ya da yapışkan (sticky) gibi seçenekler ise hareketli sayfaların daha dinamik ve işlevsel bir şekilde kullanılmasına yardımcı olur. Sitenin navigasyon çubuğunu veya önemli bilgileri sticky ile sayfanın en üstüne sabitleyerek akış içinde çok yönlü bir kullanıcı deneyimi sağlayabilirsin.

Örnek:

position: relative;

position: absolute;

position: fixed;

position: static;

position: sticky;

3. Margin ve Padding

Kenar boşluğu (margin) ve dolgu (padding), web sitene eklediğin objeler arasındaki boşlukları ayarlaman ve fazla boşlukları ortadan kaldırman için kullanabileceğin popüler bir CSS özelliğidir. Yapı olarak birbirine benzerlik gösteren padding ve margin, kenar boşluklarını içten veya dıştan manipüle etmene olanak tanır. Her iki özellik de varsayılan olarak dört köşeden boşluk bırakır. Margin-bottom veya padding-left gibi spesifik seçenekler ile istenilen köşeden mesafe bırakabilmek de mümkün olur.

Örnek:

div {

  margin-top: 2rem;

  margin-bottom: 2rem;

  padding-right: 1rem;

  padding-left: 1rem;

}

4. Border

Sınır çizgisi veya çerçeve olarak da bilinen border özelliği, kutu modeli içindeki objelerin sınırlarını belirlemene ve çerçeve çizgileri ile esnek tasarımlar hazırlamana yardımcı olur. Padding gibi hacmini iç boşluklardan alan border özelliği varsayılan olarak 1px genişliğinde düz siyah çizgi olarak görünür.

Border-color sayesinde çerçevenin rengi kolayca belirlenebilir. Mavi, kırmızı, sarı, gri, turuncu ve yeşil gibi düz renklere alternatif olarak RGB renk yelpazesi ve efektli renk seçenekleri de kullanılabilir. Border-style ise solid (düz), dashed line (çizgili), double line (çift çizgili) veya dotted (noktalı) desenler oluşturacak şekilde tasarlanabilir.

Örnek:

div {

  border: 2px solid red;

  /* (çerçeve kalınlığı, stili ve rengi) */

}

5. Font

Font, web sitendeki metnin nasıl görüneceğini belirleyen önemli bir CSS kodudur. Yazı tiplerini, stilini ve özelliklerini font kodu üzerinden değiştirebilirsin. Font kodunun 5 farklı özelliği şu şekilde özetlenebilir:

• font-style: Yazının stilini belirleyen bu özellik ile yazı tipi normal veya italik gibi farklı şekillerde ayarlanabilir.
• font-variant: Bir yazı tipinin farklı varyantlarını kullanabilmene olanak tanır.
• font-weight: Yazının kalınlığını belirlemeni sağlar.
• font-size: Font büyüklüğünü ifade eder.
• font-family: Yazının stilini oluşturan font ailesini tanımlamak için kullanılır.

Örnek:

h2 {

font-style: italic;

font-variant: normal;

font-weight: bold;

font-size: 1.2rem;

font-family: sans-serif;

}

6. Color

CSS’de bulunan renk özelliği temel olarak metin rengini ifade etmek için kullanılır. Kenarlık renklerinde olduğu gibi color da #hex, rgb veya rgba değerleri alabilir. Color özelliği font rengini belirlediği için sitenin genel tasarımı ve tematik yapısı açısından oldukça önemlidir. Ana renklerin arka plan renkleri ile nasıl uyum içinde kullanılabileceği ve kontrast değerlerinin nasıl korunması gerektiği yönündeki önemli değişimler color değeri üzerinden yönetilebilir. Color özelliği CSS dosyasında belirtilmediği durumlarda tarayıcının mevcut renk ayarları geçerli olur.

Örnek:

color: red;

color: rgb(210, 85, 84);

color: hsl(10deg 55% 17%);

7. Background

CSS background (arka plan) özelliği, bir öğenin arka plan rengini belirlemene olanak tanır. Font arkasında kullanılan arka plan seçeneği yazıların okunabilirliğini artırır ve göze hoş gelen bir stil ortaya koyar. Bir HTML öğesi üzerinde 5 farklı background özelliği kullanabilirsin.

• background-color: Arka planın rengini değiştirir. Farklı renk tonları ve görsel efektler arka plana dahil edilebilir.
• background-image: Arka plan için normal bir renk yerine farklı görseller de kullanılabilir. Fotoğraf, resim veya vektör halindeki görsellerin üzerine çeşitli ek katmanlar eklenebilir.
• background-repeat: Arka plan görselinin nasıl ve kaç kez tekrar edeceğini göstermek için kullanılır.
• background-attachment: Arka plan görüntüsünün sayfa ile birlikte hareket ettirilip ettirilmeyeceğini gösterir.
• background-position: Arka plan görselinin başlangıç konumunu belirtir.

Örnek:

h3 {

background-color: #b0e4fe;

background-image: url("photo.jpg");

background-repeat: round;

background-attachment: scroll;

background-position: top;

}

8. Width ve Height

Width (Genişlik) ve Height (Yükseklik) özellikleri bir CSS kutu modelinin genişliğini ve yüksekliğini ayarlamanı sağlar. Bir web sitesi oluştururken HTML öğelerinin genişliğini ve yüksekliğini manuel ya da otomatik olarak ayarlayabilirsin.

Örnek:

.box {

height: 5rem;

width: 2rem;

}

9. Transform

Transform özelliği bir objeyi çevirme, büyütme, küçültme ve uzatma gibi ölçeklendirme işlemlerini gerçekleştirebilmeni sağlar. Scale, skew, translate ve rotate gibi fonksiyonlar sayesinde bir nesneyi veya görseli sayfa içinde dilediğin gibi konumlandırabilirsin.

Örnek:

transform: skew(20deg, 10deg);

transform: translate(5rem, 40%);

10. Hover

En çok kullanılan CSS kodları arasında yer alan hover, ekranda işaretlenen öğenin renk ve stil değişimi gerçekleştirebilmesine imkân tanır.

Örnek:

a {

color: black;

background-color: yellow;

}

a:hover {

color: white;

background-color: blue;

}

CSS’de Kullanılan Diğer Önemli Kodlar

Yaygın olarak kullanılan diğer CSS kodları şu şekilde sıralanabilir:

• z-index: Öğelerin öncelik sırasını belirtmek amacıyla kullanılır.
• :after, :before:  Modern tasarım yapısı üzerinde önemli bir role sahip olan önce ve sonra eklemeleri mevcut CSS kodlarına ek özellikler ve işlevler kazandırır.
• line-height: Satır yüksekliğini ayarlamak için kullanılır.
• overflow: Sayfa içine sığmayacak büyüklükteki içerikleri yönetmeyi ve farklı araçlarla organize etmeyi sağlar.
• float: Bir web sitesinin temel iskeletini oluşturan sütunları ve satırları biçimlendirmeyi kolaylaştırır.
• clear: Mevcut akış içindeki bir diğer öğenin nerede duracağını belirlemek için float özelliği ile birlikte kullanılır.

CSS Kullanmanın Avantajları

Bir web sitesinin sorunsuz bir şekilde çalışabilmesi ve kullanıcıların kusursuz bir arayüz üzerinde işlem yapabilmesi için iyi bir ön çalışmaya ihtiyaç vardır. Site haritasının ve arka planda çalışan uygulamaların doğru bir şeklide çalışması kadar site tasarımının da UI/UX düzenine uygun biçimde düzenlenmesi gerekir. İşte bu noktada CSS kullanımı sana büyük bir esneklik sağlar. CSS’in web sitesi veya mobil uygulama geliştiricilerine sağladığı temel avantajlar şunlardır:

Yüksek Web Sitesi Hızı

Pure CSS veya hafif bir CSS kütüphanesi ile kodlanmış bir web sitesi yüksek açılış hızlarına ulaşabilir. Temel bir HTML şablonu üzerine konumlandırılan CSS yapısı ön yükleme sürelerini azaltarak web sitesinin çok daha hızlı bir şekilde açılmasını sağlar.

Tutarlı Tasarım Şeması

En modern tasarım şemalarını kullanan CSS işaretleme dili, farklı efektlerin ve görsel ögelerin sorunsuz bir şekilde tasarlanmasına imkân tanır. Zarif, sade ve pratik tasarım yapısı, kullanıcı dostu web siteleri tasarlayabilmeni de kolaylaştırır.

Pratik Bakım Süreci

Sistematik bir şekilde kodlanan CSS dosyası sayesinde yazı fontundan arka plan renklerine, banner eklentilerinden navigasyona kadar bir web sitesinin veya uygulamanın tüm tasarım öğelerini zahmetsizce güncelleyebilmek ve değiştirmek mümkün olur.

Farklı Cihazlarla Tam Uyumluluk

Responsive tasarıma olanak tanıyan CSS; TV, monitör, laptop, tablet ve akıllı cep telefonu gibi farklı cihazlar için özel olarak kodlama yapabilmeni sağlar. Tüm cihazlar için tam uyumlu tasarım yapabilmek ise web sitenden aldığın verimi ve performansı en üst noktaya taşır.

Kullanım Kolaylığı

CSS de tıpkı JavaScript gibi yazılan tüm kodları herhangi bir tarayıcı üzerinden ayrıntılı bir şekilde incelemeyi ve optimize etmeyi mümkün hale getirir.

Sen de CSS konusunda uzmanlaşmak ve çok yönlü bir Front-End developer olmak için Techcareer.net tarafından ücretsiz olarak düzenlenen Bootcamp eğitimlerine katılabilirsin. Adaylara ve uzmanlık alanlarına uygun olarak açılan Bootcamp’ler sayesinde kariyer basamaklarını hızla tırmanabilir, sana en uygun iş ilanları için CV’ni zenginleştirebilirsin.

Sıkça Sorulan Sorular

CSS öğrenmek gerekli mi?

Kariyerine bir Front-End geliştirici olarak devam etmek istiyorsan JavaScript veya PHP gibi bir yazılım dilinden önce HTML ve CSS öğrenebilir, yazılım için daha kolay bir giriş yapabilirsin.

CSS bilmek iş başvurusunda nasıl bir avantaj sağlar?

HTML ve CSS alanında uzmanlaşman web tasarım sürecinde sana büyük avantajlar sağlar. Responsive sayfa tasarımı, geleneksel sayfa dizaynı, sayfa içi animasyonları ve modern UI/UX deneyimi gibi konularda daha çok yönlü düşünebilmene yardımcı olur.

Bootcamp katılım şartları nelerdir?

Techcareer.net üzerinde her seviyeye uygun bir Bootcamp eğitimi bulunur. Bu eğitimlerin katılım şartlarını inceleyerek sana uygun olanı keşfedebilir, kariyerine yön verecek eğitim için başvuruda bulunabilirsin.

Bootcamp eğitimleri ücretli midir?

Techcareer.net Bootcamp eğitimlerinin tamamı ücretsizdir.

Junior aday olarak iş ilanlarına başvurabilir miyim?

Evet hem Junior hem de deneyimli adaylar başvuru yapabilir.