CSS Başlangıç Rehberi

roq · Dün 08:10 da

CSS Başlangıç Rehberi

CSS, web sayfalarının görünümünü düzenlemek için kullanılan temel teknolojilerden biridir.

HTML sayfanın yapısını oluştururken CSS:

Renkleri
Yazı tiplerini
Boşlukları
Boyutları
Hizalamayı
Arka planları
Responsive görünümü

kontrol eder.

Web geliştirmeye yeni başlayan biri için HTML'den sonra öğrenilmesi gereken en önemli konu CSS'dir.

CSS Nedir?

CSS:

Cascading Style Sheets

anlamına gelir.

Türkçede:

Basamaklı Stil Sayfaları

olarak ifade edilebilir.

CSS'nin temel görevi HTML ile oluşturulan içeriğin nasıl görüneceğini belirlemektir.

Örneğin HTML bize:

Bu bir başlıktır

der.

CSS ise:

Bu başlık 32 piksel olsun, ortalansın ve kalın görünsün

gibi görünüm kurallarını belirler.

CSS Programlama Dili midir?

Hayır.

CSS bir programlama dili değildir.

Bir stil dilidir.

Sayfanın görsel düzenini kontrol etmek için kullanılır.

HTML ve CSS Arasındaki Fark

Basit şekilde:

HTML

Sayfanın iskeletidir.

CSS

Sayfanın tasarımıdır.

Örneğin bir ev düşünürsek HTML:

Duvarlar
Odalar
Kapılar

gibi yapıyı oluşturur.

CSS ise:

Duvar rengi
Mobilyalar
Boyutlar
Dekorasyon

gibi görünümü belirler.

CSS Öğrenmeden Önce HTML Bilmek Gerekir mi?

Temel seviyede evet.

En azından şu HTML konularını bilmek faydalıdır:

Başlıklar
Paragraflar
Linkler
Görseller
Listeler
Formlar
class
id
div
Semantic HTML

Bu bilgiler CSS öğrenmeyi çok daha kolay hale getirir.

CSS Ne İşe Yarar?

CSS ile:

Yazı rengi değiştirilebilir
Font boyutu ayarlanabilir
Arka plan oluşturulabilir
Buton tasarlanabilir
Kartlar hazırlanabilir
Menü yapılabilir
Sayfa düzeni oluşturulabilir
Mobil uyumluluk sağlanabilir

CSS Olmadan Web Sitesi Nasıl Görünür?

CSS olmadan web sayfası çalışabilir ancak oldukça sade görünür.

Tarayıcı HTML öğelerine kendi varsayılan stillerini uygular.

Bu nedenle profesyonel bir web sitesi için CSS gereklidir.

CSS Öğrenmeye Nereden Başlanmalı?

Başlangıçta şu sıra oldukça uygundur:

CSS seçicileri
Renkler
Fontlar
Width ve height
Margin ve padding
Border
Box Model
Display
Flexbox
Grid
Position
Responsive tasarım

Bu sırayla ilerlemek konuların daha kolay anlaşılmasını sağlar.

CSS Seçici Nedir?

CSS'nin hangi HTML öğesine uygulanacağını belirleyen yapıdır.

Örneğin:

Tüm paragraflar
Belirli bir class
Belirli bir id
Belirli bir buton

seçilebilir.

Element Selector Nedir?

Belirli HTML etiketlerinin tamamını seçer.

Örneğin tüm:

Başlıklar
Paragraflar
Linkler

aynı stil ile düzenlenebilir.

Class Selector Nedir?

Birden fazla HTML öğesine aynı tasarımı uygulamak için kullanılır.

Örneğin bütün ürün kartlarına:

urun-karti

gibi ortak class verilebilir.

Bu sayede tüm kartlar tek CSS kuralıyla düzenlenebilir.

ID Selector Nedir?

Belirli ve genellikle benzersiz bir öğeyi hedeflemek için kullanılabilir.

Örneğin sayfanın:

ana-banner

alanı özel olarak seçilebilir.

Class mı ID mi?

Genel tasarım işlemlerinde class kullanımı daha yaygındır.

Çünkü aynı stil birden fazla öğede tekrar kullanılabilir.

ID ise daha özel ve benzersiz öğelerde tercih edilebilir.

CSS'de Renk Kullanımı

CSS ile:

Yazı rengi
Arka plan rengi
Border rengi
Buton rengi

ayarlanabilir.

Renkler farklı yöntemlerle tanımlanabilir.

Örneğin:

İsim
HEX
RGB
HSL

formatları kullanılabilir.

HEX Renk Nedir?

Web tasarımında oldukça yaygın kullanılan renk gösterimidir.

Örneğin tasarım programlarından alınan renk kodları genellikle HEX formatında olabilir.

Bir marka oluştururken belirli HEX renkleri kullanmak tasarım bütünlüğünü sağlar.

RGB Nedir?

Renklerin:

Kırmızı
Yeşil
Mavi

değerlerinin birleşimiyle oluşturulmasını sağlar.

HSL Nedir?

Rengi:

Ton
Doygunluk
Parlaklık

mantığıyla tanımlayan sistemdir.

Özellikle renk varyasyonları oluştururken kullanışlı olabilir.

Arka Plan Rengi

Bir:

Sayfa
Bölüm
Kart
Buton

için arka plan rengi belirlenebilir.

Background Image

Bir alanın arka planında görsel kullanılabilir.

Özellikle:

Hero alanı
Banner
Kampanya bölümü

gibi yerlerde tercih edilir.

Arka Plan Görseli Kullanırken Dikkat

Görsel çok büyük olursa sayfa yavaşlayabilir.

Ayrıca görsel üzerindeki yazının okunabilir olması gerekir.

Gerekirse koyu veya açık overlay kullanılabilir.

Font Nedir?

Yazı karakteridir.

Bir web sitesinin görünümünü ciddi şekilde etkiler.

Örneğin:

Modern
Kurumsal
Eğlenceli
Teknolojik

bir görünüm font seçimine göre değişebilir.

Kaç Font Kullanılmalı?

Genellikle:

1 veya 2 font

yeterlidir.

Çok fazla font kullanmak tasarımı karmaşık gösterebilir.

Font Weight

Yazının kalınlığını belirler.

Örneğin:

Normal
Medium
Semi Bold
Bold

gibi görünümler oluşturulabilir.

Line Height

Satırlar arasındaki dikey boşluğu belirler.

Uzun paragraflarda okunabilirlik açısından oldukça önemlidir.

Letter Spacing

Harfler arasındaki boşluğu ayarlar.

Başlıklarda veya küçük etiketlerde dikkatli şekilde kullanılabilir.

Text Align

Metnin:

Sol
Sağ
Orta

hizalanmasını sağlar.

Uzun paragraflarda genellikle sola hizalama daha rahat okunur.

Text Decoration

Özellikle linklerde:

Alt çizgi
Çizgi kaldırma

gibi işlemlerde kullanılabilir.

Width Nedir?

Bir öğenin genişliğini belirler.

Örneğin:

Kart
Görsel
Container

genişliği ayarlanabilir.

Height Nedir?

Öğenin yüksekliğini belirler.

Ancak web tasarımında gereksiz sabit yükseklik kullanımı responsive sorunlara neden olabilir.

Max Width Nedir?

Bir öğenin maksimum genişliğini belirler.

Özellikle içerik container'larında çok kullanışlıdır.

Büyük monitörlerde metnin ekran boyunca uzamasını engeller.

Min Width Nedir?

Bir öğenin küçülebileceği minimum genişliği belirler.

Belirli tasarım durumlarında faydalıdır.

Box Model Nedir?

CSS öğrenirken mutlaka anlaşılması gereken temel konulardan biridir.

Her HTML öğesi bir kutu olarak düşünülebilir.

Bu kutunun:

Content
Padding
Border
Margin

alanları vardır.

Content Nedir?

Kutunun gerçek içeriğidir.

Örneğin:

Yazı
Görsel
Buton metni

content alanıdır.

Padding Nedir?

İçerik ile kutunun kenarı arasındaki boşluktur.

Örneğin bir butondaki yazının kenarlara yapışmamasını padding sağlar.

Border Nedir?

Öğenin çevresindeki kenarlıktır.

Örneğin kartların çevresinde ince bir çizgi oluşturulabilir.

Margin Nedir?

Öğenin dışındaki boşluktur.

Başka öğelerle arasındaki mesafeyi belirlemek için kullanılır.

Margin ve Padding Arasındaki Fark

En basit şekilde:

Padding = İç boşluk

Margin = Dış boşluk

şeklinde hatırlanabilir.

Box Sizing Nedir?

Bir öğenin toplam genişlik ve yüksekliğinin nasıl hesaplanacağını belirler.

Özellikle border ve padding eklendiğinde boyutların beklenmedik şekilde büyümesini önlemek için önemlidir.

Border Radius Nedir?

Köşeleri yuvarlatmak için kullanılır.

Örneğin:

Buton
Kart
Görsel

köşeleri yuvarlatılabilir.

Box Shadow Nedir?

Öğenin arkasına gölge eklemeyi sağlar.

Kart tasarımlarında sık kullanılır.

Ancak çok güçlü gölgeler tasarımı eski gösterebilir.

Display Nedir?

Bir HTML öğesinin sayfada nasıl davranacağını belirleyen önemli CSS özelliklerinden biridir.

Örneğin:

Block
Inline
Inline-block
Flex
Grid

gibi farklı display türleri bulunur.

Block Element

Genellikle bulunduğu satırın genişliğini kullanır ve sonraki öğeyi alt satıra iter.

Inline Element

İçeriği kadar alan kaplar ve aynı satırda başka öğeler bulunabilir.

Inline-Block

Inline davranış ile block özelliklerinin bazı avantajlarını birlikte kullanabilir.

Flexbox Nedir?

Modern web tasarımında en önemli CSS konularından biridir.

Flexbox öğeleri:

Yan yana
Alt alta
Ortalanmış
Eşit aralıklı

şekilde düzenlemeyi kolaylaştırır.

Flexbox Ne Zaman Kullanılır?

Örneğin:

Menü
Kart sıralaması
Buton grubu
Görsel ve metin

gibi yapılarda oldukça kullanışlıdır.

Flex Direction

Flex öğelerinin:

Yatay
Dikey

sıralanmasını belirler.

Justify Content

Öğelerin ana eksen üzerindeki dağılımını kontrol eder.

Örneğin:

Başlangıç
Orta
Son
Aralarında eşit boşluk

gibi düzenler oluşturulabilir.

Align Items

Öğelerin diğer eksendeki hizalamasını düzenler.

Özellikle dikey ortalama işlemlerinde çok kullanılır.

Gap Nedir?

Flex veya Grid içerisindeki öğeler arasındaki boşluğu belirler.

Eskiden her elemana ayrı margin vermek gerekirken gap kullanımı daha düzenli olabilir.

Flex Wrap

Öğeler aynı satıra sığmadığında alt satıra geçmelerini sağlar.

Responsive kart tasarımlarında faydalıdır.

CSS Grid Nedir?

CSS Grid iki boyutlu sayfa düzenleri oluşturmak için kullanılan güçlü sistemdir.

Hem:

Satır
Sütun

üzerinde kontrol sağlar.

Flexbox mı Grid mi?

İkisi birbirinin alternatifi olmak zorunda değildir.

Flexbox

Tek yönlü düzenlerde çok kullanışlıdır.

Grid

Satır ve sütunların birlikte kontrol edildiği tasarımlarda daha güçlüdür.

Modern projelerde ikisi birlikte kullanılabilir.

Grid Nerede Kullanılır?

Örneğin:

Ürün listesi
Blog kartları
Dashboard
Galeri

tasarımlarında kullanılabilir.

Position Nedir?

Bir öğenin sayfadaki konumlandırılma biçimini kontrol eder.

Yaygın position türleri:

Static
Relative
Absolute
Fixed
Sticky

şeklindedir.

Position Static

Varsayılan davranıştır.

Öğe normal sayfa akışında bulunur.

Position Relative

Öğenin kendi normal konumuna göre hareket ettirilmesini ve içindeki absolute öğelere referans olmasını sağlayabilir.

Position Absolute

Öğeyi normal belge akışından çıkarabilir.

Özellikle:

İkon
Rozet
Dekoratif öğe

konumlandırmak için kullanılabilir.

Absolute Position Fazla Kullanılmalı mı?

Hayır.

Sayfa tasarımının tamamını absolute ile oluşturmak responsive sorunlarına neden olabilir.

Ana düzen için Flexbox ve Grid daha uygundur.

Position Fixed

Öğe ekranın belirli noktasında sabit kalabilir.

Örneğin:

WhatsApp butonu
Sabit destek butonu

için kullanılabilir.

Position Sticky

Öğe belirli kaydırma noktasından sonra ekranda sabit kalabilir.

Örneğin sticky header için kullanılabilir.

Z-Index Nedir?

Üst üste gelen öğelerde hangisinin önde görüneceğini belirler.

Örneğin:

Menü
Popup
Modal
Dropdown

alanlarında önemlidir.

Overflow Nedir?

Bir öğenin içeriği belirlenen boyutu aştığında nasıl davranacağını belirler.

İçerik:

Gösterilebilir
Gizlenebilir
Kaydırılabilir

hale getirilebilir.

Opacity Nedir?

Öğenin saydamlığını belirler.

Arka planlar ve hover efektlerinde kullanılabilir.

Hover Nedir?

Fare imleci bir öğenin üzerine geldiğinde farklı stil uygulanmasını sağlar.

Örneğin buton:

Renk değiştirebilir
Hafif büyüyebilir
Gölge kazanabilir

Transition Nedir?

Bir stil değişiminin aniden değil yumuşak şekilde gerçekleşmesini sağlar.

Hover efektlerinde sık kullanılır.

Animation Nedir?

CSS ile daha gelişmiş hareketler oluşturulabilir.

Örneğin:

Fade
Kayma
Döndürme
Nabız efekti

yapılabilir.

Çok Fazla Animasyon Kullanmak

Tasarımı daha profesyonel yapmak yerine dikkat dağıtabilir.

Ayrıca düşük güçlü cihazlarda performansı etkileyebilir.

Animasyonlar ölçülü kullanılmalıdır.

Responsive Tasarım Nedir?

Web sitesinin farklı ekran boyutlarında düzgün görünmesini sağlar.

Örneğin:

Masaüstü
Laptop
Tablet
Telefon

ekranlarında tasarım uyum sağlamalıdır.

Mobile First Nedir?

Tasarımın önce küçük ekranlar düşünülerek hazırlanması ve daha sonra büyük ekranlara uyarlanması yaklaşımıdır.

Modern web geliştirmede yaygın şekilde kullanılabilir.

Media Query Nedir?

Belirli ekran boyutlarında farklı CSS kuralları uygulanmasını sağlar.

Örneğin masaüstünde yan yana duran kartlar mobilde alt alta getirilebilir.

Breakpoint Nedir?

Tasarımın belirli ekran genişliğinde değiştiği noktadır.

Örneğin:

Telefon
Tablet
Masaüstü

için farklı breakpoint'ler belirlenebilir.

Her Telefon İçin Ayrı Tasarım Gerekir mi?

Hayır.

Tasarım belirli cihaz modellerine göre değil genel ekran davranışına göre hazırlanmalıdır.

Amaç:

iPhone'a özel

veya:

Samsung'a özel

tasarım yapmak değildir.

Responsive yapı farklı ekranlara uyum sağlamalıdır.

Mobilde Font Boyutları

Masaüstünde çok büyük olan başlık mobilde küçültülebilir.

Aksi halde başlık ekranın tamamını kaplayabilir.

Mobilde Padding

Masaüstünde kullanılan geniş boşluklar mobilde fazla olabilir.

Bu nedenle padding değerleri ekran boyutuna göre düzenlenebilir.

Mobil Menü

Geniş masaüstü menüsü telefonda hamburger menüye dönüştürülebilir.

Bu işlem CSS ve gerektiğinde JavaScript ile yapılabilir.

CSS Birimleri

CSS'de farklı ölçü birimleri bulunur.

Örneğin:

px
%
em
rem
vw
vh

px Nedir?

Piksel tabanlı ölçü birimidir.

Yeni başlayanlar tarafından anlaşılması kolaydır.

% Birimi

Öğenin boyutunu parent öğeye göre yüzdelik olarak belirleyebilir.

Responsive tasarımda kullanışlıdır.

rem Nedir?

Genellikle sayfanın temel font boyutuna göre hesaplanan ölçü birimidir.

Ölçeklenebilir tasarımlarda oldukça faydalıdır.

em Nedir?

Çoğunlukla ilgili öğenin veya üst öğenin font boyutuna göre hesaplanır.

İç içe yapılarda değerlerin beklenmedik şekilde büyümesine dikkat edilmelidir.

vw ve vh

Viewport yani ekran alanına göre ölçü oluşturur.

vw

Ekran genişliğiyle ilişkilidir.

vh

Ekran yüksekliğiyle ilişkilidir.

Sabit Ölçü mü Responsive Ölçü mü?

Her durumda tek bir doğru yoktur.

Örneğin border kalınlığı için px mantıklı olabilirken sayfa genişliklerinde:

%
rem
max-width

gibi yöntemler daha esnek olabilir.

CSS Cascade Nedir?

CSS'nin adındaki:

Cascading

kelimesinin temelidir.

Bir öğeye birden fazla stil uygulanıyorsa hangi kuralın geçerli olacağını belirleyen sistemdir.

CSS Kuralları Neden Birbirini Eziyor?

Bir öğeye farklı yerlerden stil uygulanabilir.

Örneğin:

Genel element stili
Class
ID
Inline stil

aynı özelliği değiştirmeye çalışabilir.

Bu durumda CSS öncelik kuralları devreye girer.

Specificity Nedir?

CSS seçicilerinin öncelik seviyesini belirleyen sistemdir.

Yeni başlayanların:

CSS yazdım ama neden uygulanmıyor?

sorusunun en sık cevaplarından biri specificity olabilir.

!important Kullanılmalı mı?

Gerektiğinde kullanılabilir ancak sürekli kullanılması önerilmez.

Her probleme:

!important

eklemek CSS yapısını zamanla yönetilemez hale getirebilir.

Asıl selector problemi çözülmelidir.

Inline CSS Nedir?

CSS doğrudan HTML öğesinin üzerinde tanımlanabilir.

Küçük testlerde kullanılabilir ancak büyük projelerde yönetimi zorlaşır.

Internal CSS Nedir?

CSS kuralları aynı HTML belgesinin içerisinde tutulabilir.

Küçük örnekler ve testler için kullanılabilir.

External CSS Nedir?

CSS ayrı bir dosyada tutulur ve HTML sayfasına bağlanır.

Gerçek projelerde genellikle tercih edilen yöntem budur.

External CSS Neden Daha Mantıklı?

Çünkü:

Kod düzenli olur
Birden fazla sayfa aynı stili kullanabilir
Güncelleme kolaylaşır
HTML dosyaları daha temiz kalır

CSS Dosya Düzeni

Küçük projelerde tek CSS dosyası yeterli olabilir.

Proje büyüdükçe stiller:

Layout
Components
Pages
Utilities

gibi bölümlere ayrılabilir.

CSS Reset Nedir?

Tarayıcıların varsayılan stilleri arasında küçük farklılıklar olabilir.

CSS reset veya normalize yaklaşımları bu farkları azaltmaya yardımcı olur.

Browser Uyumluluğu

Bir CSS özelliği her tarayıcıda tamamen aynı desteklenmeyebilir.

Modern projelerde kullanılan özelliklerin tarayıcı desteği kontrol edilmelidir.

Chrome Developer Tools

CSS öğrenirken en faydalı araçlardan biridir.

Bir öğeyi seçerek:

Hangi CSS uygulanıyor?
Hangi kural ezilmiş?
Margin ne kadar?
Padding ne kadar?

görülebilir.

Inspect Element ile CSS Öğrenmek

Gerçek web sitelerindeki öğeleri incelemek oldukça faydalıdır.

Örneğin:

Menü nasıl hizalanmış?
Kartlar nasıl oluşturulmuş?
Hangi boşluklar kullanılmış?

incelenebilir.

Tarayıcıda CSS Değiştirmek

Developer Tools üzerinden CSS değerleri geçici olarak değiştirilebilir.

Bu değişiklikler gerçek dosyayı değiştirmez.

Deneme yapmak için oldukça kullanışlıdır.

CSS'de Renk Paleti

Profesyonel tasarımda çok fazla rastgele renk kullanılmamalıdır.

Basit bir sistem:

Ana renk
İkincil renk
Vurgu rengi
Açık arka plan
Koyu metin

şeklinde olabilir.

Tasarımda Tutarlılık

Aynı tür butonların farklı:

Renk
Border radius
Padding

kullanması siteyi düzensiz gösterebilir.

Ortak class yapıları kullanmak daha profesyoneldir.

CSS ile Buton Tasarımı

Butonlarda genellikle:

Arka plan
Yazı rengi
Padding
Border
Border radius
Hover

ayarları yapılır.

İyi Bir Buton Nasıl Olmalı?

Buton:

Kolay fark edilmeli
Yazısı okunmalı
Tıklanabilir olduğu anlaşılmalı
Mobilde yeterince büyük olmalı

dır.

Kart Tasarımı

Modern web sitelerinde kart yapıları sık kullanılır.

Bir kart içerisinde:

Görsel
Başlık
Açıklama
Buton

bulunabilir.

CSS ile kartın:

Gölgesi
Boşluğu
Köşeleri
Arka planı

düzenlenebilir.

Hero Alanı

Web sayfasının üst kısmındaki büyük tanıtım bölümüdür.

CSS ile:

Arka plan
Başlık boyutu
Container genişliği
Butonlar
Hizalama

tasarlanabilir.

Navbar Tasarımı

Menü tasarımında Flexbox oldukça kullanışlıdır.

Örneğin:

Logo solda
Menü ortada
Buton sağda

şeklinde bir yapı oluşturulabilir.

Form Tasarımı

CSS ile:

Input
Select
Textarea
Button

daha modern hale getirilebilir.

Form alanlarında özellikle:

Okunabilirlik
Focus görünümü
Mobil kullanım

önemlidir.

Focus Nedir?

Kullanıcı bir form alanını seçtiğinde oluşan durumdur.

Focus göstergesini tamamen kaldırmak erişilebilirlik açısından sorun oluşturabilir.

Erişilebilirlik ve CSS

Tasarım sadece güzel görünmemelidir.

Kullanılabilir de olmalıdır.

Örneğin:

Metin ve arka plan arasında yeterli kontrast
Okunabilir font boyutu
Belirgin focus durumu
Tıklanabilir alanların yeterli büyüklüğü

önemlidir.

Koyu Mod

CSS ile light ve dark tema hazırlanabilir.

Ancak sadece siyah arka plan yapmak yeterli değildir.

Kontrast
Görseller
Border renkleri
Butonlar

da uyarlanmalıdır.

CSS Variables Nedir?

Tekrar kullanılan değerleri merkezi olarak tanımlamayı kolaylaştırır.

Örneğin:

Marka rengi
Border radius
Boşluk değerleri

tek noktadan yönetilebilir.

Bu özellik büyük projelerde oldukça faydalıdır.

CSS Variables Öğrenmeli miyim?

Temel CSS mantığını öğrendikten sonra evet.

Tasarım sistemini daha düzenli yönetmenizi sağlar.

Pseudo-Class Nedir?

Bir öğenin belirli durumunu seçmek için kullanılır.

Örneğin:

Hover
Focus
İlk öğe
Son öğe

gibi durumlar hedeflenebilir.

Pseudo-Element Nedir?

Bir HTML öğesine ek görsel parçalar oluşturmayı sağlar.

Özellikle dekoratif tasarımlarda kullanılabilir.

CSS Framework Nedir?

Hazır CSS sınıfları ve bileşenleri sunan sistemlerdir.

Örneğin:

Bootstrap
Tailwind CSS

gibi çözümler bulunur.

Bootstrap Nedir?

Hazır:

Grid
Button
Form
Navbar

gibi bileşenler sunan popüler CSS framework'lerinden biridir.

Tailwind CSS Nedir?

Hazır utility class'ları kullanarak tasarım oluşturmayı sağlayan farklı bir CSS yaklaşımıdır.

Modern projelerde oldukça yaygın kullanılabilir.

CSS Öğrenmeden Bootstrap Kullanılır mı?

Teknik olarak kullanılabilir ancak önerilmez.

Önce temel CSS öğrenilirse Bootstrap'ın ne yaptığını anlamak çok daha kolay olur.

CSS Öğrenmeden Tailwind Kullanılır mı?

Benzer şekilde mümkün olsa da temel CSS bilgisi gereklidir.

Flexbox, Grid, spacing ve responsive mantığı bilinmeden Tailwind ezber haline gelebilir.

Önce Saf CSS Öğrenilmeli mi?

Evet.

Başlangıçta mümkün olduğunca:

HTML + Saf CSS

ile küçük projeler hazırlamak faydalıdır.

Daha sonra framework öğrenilebilir.

CSS Öğrenirken JavaScript Gerekir mi?

Hayır.

Başlangıçta JavaScript bilmek gerekmez.

Önce:

HTML + CSS

ile statik ve responsive sayfalar hazırlanabilir.

CSS Öğrendikten Sonra JavaScript

CSS temelleri oturduktan sonra JavaScript'e geçilebilir.

JavaScript ile:

Mobil menü
Modal
Slider
Form işlemleri
Dinamik içerik

gibi etkileşimler eklenebilir.

CSS Pratiği Nasıl Yapılmalı?

Sadece konu okumak yerine küçük projeler hazırlanmalıdır.

Örneğin:

Buton
Kart
Menü
Login ekranı
Ürün sayfası

tasarlanabilir.

İlk CSS Projesi: Profil Kartı

Basit bir kart hazırlayın.

İçerisinde:

Profil görseli
İsim
Açıklama
Buton

bulunsun.

Burada:

Padding
Margin
Border radius
Box shadow

pratiği yapılabilir.

İkinci Proje: Menü

Basit bir navbar oluşturun.

Örneğin:

Logo
Ana Sayfa
Hakkımızda
Hizmetler
İletişim

bulunsun.

Burada Flexbox öğrenilebilir.

Üçüncü Proje: Fiyat Kartları

Üç farklı paket oluşturabilirsiniz.

Örneğin:

Başlangıç
Profesyonel
Kurumsal

Bu çalışma:

Flexbox veya Grid
Kart tasarımı
Buton
Hover

konularını geliştirir.

Dördüncü Proje: Login Sayfası

Basit bir giriş formu hazırlayın.

Burada:

Form tasarımı
Input
Focus
Buton

çalışılabilir.

Beşinci Proje: Responsive Landing Page

İçerisinde:

Header
Hero
Hizmetler
Fiyatlar
Footer

bulunan tek sayfalık bir site hazırlayın.

Sonra mobil görünümünü düzenleyin.

Tasarımı Kopyalayarak Çalışmak Faydalı mı?

Evet.

Öğrenme amacıyla beğendiğiniz basit bir web tasarımını gözlemleyip yeniden oluşturmaya çalışabilirsiniz.

Amaç hazır CSS'i kopyalamak değil, tasarımın nasıl yapıldığını çözmektir.

CSS Öğrenirken Her Şeyi Ezberlemek Gerekir mi?

Hayır.

CSS'de çok fazla özellik vardır.

Sık kullanılanlar zamanla zaten öğrenilir.

Önemli olan temel mantığı kavramaktır.

En Çok Öğrenilmesi Gereken CSS Konuları

Özellikle:

Selectors
Box Model
Margin
Padding
Display
Flexbox
Grid
Position
Responsive tasarım
Specificity

iyi öğrenilmelidir.

CSS Öğrenirken Yapılan Yaygın Hatalar

Her Şeye Sabit Width Vermek

Mobil görünümü bozabilir.

Her Şeyi Absolute Position Yapmak

Responsive tasarımı zorlaştırır.

Margin ile Her Şeyi Zorla Hizalamak

Flexbox veya Grid kullanmak daha doğru olabilir.

!important Kullanmak

CSS problemlerini gizleyebilir.

Çok Fazla Renk Kullanmak

Tasarımı dağınık gösterir.

Çok Fazla Font Kullanmak

Görsel bütünlüğü bozar.

Mobil Görünümü Sonradan Düşünmek

Responsive tasarımı zorlaştırır.

Kodu Sürekli Kopyalamak

Öğrenme sürecini yavaşlatır.

“CSS Çalışmıyor” Sorunu

Yeni başlayanlarda çok sık görülür.

Kontrol edilmesi gerekenler:

CSS dosyası HTML'e bağlı mı?
Selector doğru mu?
Class adı doğru mu?
Başka kural üzerine yazıyor mu?
Tarayıcı cache kullanıyor mu?
CSS yazım hatası var mı?

CSS Cache Sorunu

CSS dosyasını değiştirdiğiniz halde eski tasarım görünüyorsa tarayıcı cache'i nedeniyle olabilir.

Özellikle canlı sitelerde:

Tarayıcı cache
CDN cache
Web cache

kontrol edilmelidir.

Developer Tools Kullanmayı Öğrenin

CSS öğrenirken Developer Tools kullanmak büyük avantaj sağlar.

Buradan hangi stilin:

Uygulandığı
Ezildiği
Nereden geldiği

görülebilir.

CSS Dosyaları Çok Büyürse

Proje büyüdükçe CSS yönetimi zorlaşabilir.

Bu durumda:

Düzenli class isimleri
Bileşen yapısı
CSS variables

kullanmak faydalıdır.

Class İsimleri Nasıl Olmalı?

Anlaşılır isimler kullanılmalıdır.

Örneğin:

urun-karti
ana-menu
fiyat-karti

gibi isimler ne işe yaradığını kolayca anlatır.

Rastgele Class İsimlerinden Kaçının

Örneğin:

box1
box2
test123

gibi isimler proje büyüdükçe karmaşık hale gelebilir.

CSS ile Site Hızı

CSS dosyaları gereksiz şekilde büyürse sayfa yükleme süresini etkileyebilir.

Özellikle:

Kullanılmayan CSS
Çok büyük framework
Gereksiz animasyonlar

optimize edilebilir.

Minify Nedir?

CSS içerisindeki gereksiz:

Boşluk
Satır
Karakter

miktarını azaltarak dosya boyutunu küçültme işlemidir.

Genellikle production ortamında uygulanır.

Critical CSS Nedir?

Sayfanın ilk görünen bölümünü oluşturmak için gerekli CSS'nin öncelikli yüklenmesini hedefleyen performans tekniğidir.

Başlangıç seviyesinde öğrenmek zorunlu değildir.

Temel CSS bilgisi oturduktan sonra performans konusunda incelenebilir.

CSS ve SEO

CSS doğrudan SEO sıralama sistemi değildir.

Ancak CSS ile oluşturulan:

Mobil uyumluluk
Okunabilirlik
Kullanıcı deneyimi
Sayfa performansı

SEO açısından dolaylı olarak önemlidir.

Görsel Olarak Güzel Site Yeterli mi?

Hayır.

Site aynı zamanda:

Hızlı
Mobil uyumlu
Okunaklı
Kullanımı kolay

olmalıdır.

İyi CSS yalnızca güzel görünüm değil iyi kullanıcı deneyimi sağlamalıdır.

CSS Öğrenme Kontrol Listesi

Selector mantığını biliyor muyum?
Class ve ID farkını biliyor muyum?
Renkleri kullanabiliyor muyum?
Font ayarlarını yapabiliyor muyum?
Margin ve padding farkını biliyor muyum?
Box Model'i anlıyor muyum?
Border ve border-radius kullanabiliyor muyum?
Display mantığını biliyor muyum?
Flexbox kullanabiliyor muyum?
Grid temelini biliyor muyum?
Position türlerini biliyor muyum?
Hover ve transition kullanabiliyor muyum?
Responsive tasarım yapabiliyor muyum?
Media query mantığını biliyor muyum?
Specificity mantığını anlıyor muyum?
Developer Tools kullanabiliyor muyum?

Yeni Başlayanlar İçin CSS Öğrenme Sırası

1. Aşama

CSS'nin HTML'e nasıl uygulandığını öğrenin.

2. Aşama

Selector, class ve id konularını öğrenin.

3. Aşama

Renk ve typography çalışın.

4. Aşama

Width, height, margin ve padding öğrenin.

5. Aşama

Box Model konusunu iyice anlayın.

6. Aşama

Border, radius ve shadow çalışın.

7. Aşama

Display mantığını öğrenin.

8. Aşama

Flexbox'a geçin.

9. Aşama

Grid öğrenin.

10. Aşama

Position konusunu çalışın.

11. Aşama

Responsive tasarım ve media query öğrenin.

12. Aşama

Küçük gerçek projeler hazırlayın.

CSS Öğrenmek Ne Kadar Sürer?

Temeller birkaç hafta içerisinde öğrenilebilir.

Ancak güzel ve responsive tasarım oluşturma becerisi pratikle gelişir.

Bir kişinin CSS özelliklerini bilmesi ile iyi tasarım yapabilmesi aynı şey değildir.

Her Gün Ne Kadar Çalışılmalı?

Her gün:

30 dakika – 1 saat

düzenli pratik başlangıç için yeterli olabilir.

Önemli olan sürekli çalışmaktır.

Bir Konuyu Öğrendikten Sonra Ne Yapılmalı?

Hemen küçük bir örnek hazırlanmalıdır.

Örneğin Flexbox öğrendiyseniz:

Menü
3 kart
Görsel + metin bölümü

hazırlayın.

Bu şekilde bilgi daha kalıcı olur.

CSS Öğrendikten Sonra Ne Öğrenilmeli?

Genel öğrenme sırası:

HTML
CSS
Responsive tasarım
JavaScript
Git ve GitHub
İhtiyaca göre framework

şeklinde ilerleyebilir.

Bootstrap Ne Zaman Öğrenilmeli?

Saf CSS ile:

Kart
Menü
Form
Responsive sayfa

hazırlayabilecek seviyeye geldikten sonra öğrenilebilir.

Tailwind CSS Ne Zaman Öğrenilmeli?

Flexbox, Grid, spacing ve responsive mantığını öğrendikten sonra Tailwind çok daha anlaşılır hale gelir.

CSS İçin En İyi Öğrenme Yöntemi

Şu yöntem oldukça etkilidir:

Öğren → Küçük örnek yap → Aynısını bakmadan tekrar yap → Gerçek projede kullan

Sadece video izlemek CSS öğrenmek için yeterli değildir.

Sonuç

CSS, HTML ile oluşturulan web sayfalarının tasarımını ve düzenini kontrol etmek için kullanılan temel web teknolojilerinden biridir.

Başlangıç seviyesinde özellikle:

Selector
Renk
Typography
Margin
Padding
Box Model
Display
Flexbox
Grid
Position
Responsive tasarım

konularına odaklanmak gerekir.

Yeni başlayanların en fazla önem vermesi gereken konular ise:

Box Model + Flexbox + Responsive Tasarım

olmalıdır.

Bu üç konu iyi anlaşıldığında modern web sayfalarının büyük bölümü çok daha kolay oluşturulabilir.

CSS öğrenirken bütün özellikleri ezberlemek yerine her yeni konudan sonra küçük bir tasarım yapmak daha faydalıdır.

Örneğin önce bir profil kartı, ardından navbar, fiyat kartları, login ekranı ve son olarak responsive landing page hazırlanabilir.

HTML ve CSS konusunda rahat seviyeye geldikten sonra JavaScript öğrenmeye geçilebilir.

Kısacası CSS öğrenmenin en iyi yolu özellikleri ezberlemek değil, sayfadaki bir öğenin neden o şekilde göründüğünü anlamak ve öğrendiğiniz her konuyu gerçek bir tasarım üzerinde uygulamaktır.

CSS Başlangıç Rehberi

roq

New member