CSS kullanarak HTML şekillendirmeyi öğrenin

Basamaklı Stil Sayfaları (ing. Cascading Stylesheets) — veya CSSHTML'den sonra öğrenmen gereken ikinci dildir. HTML içeriğin yapısal ve şematik tanımlamasında kullanılırken; CSS, dizayn etmek ve düzenlemek için kullanılır. Örneğin: CSS'i içeriğin fontunu, rengini, büyüklüğünü ve boşluklarını değiştirmek için kullanabilir, sütunları ayırabilir ya da animasyon veyahut decoratif özellikleri ekleyebilirsin.

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

Başla

Önkoşullar

CSS'i öğrenmeye başlamadan önce HTML'nin temellerini öğrenmelisin. Bunun için HTML'ye Giriş eğitiminden başlayabilirsin. Bu kısımda şunları öğreneceksin:

HTML'nin temellerini anladıktan sonra, iki konu arasında gidip gelerek aynı anda HTML ve CSS öğrenmeni öneririm. Bunun nedeni, HTML'eye CSS'i uyguladığın da, öğrenmesi çok daha ilginç ve daha eğlenceli olmasıdır. Ayrıca HTML'yi bilmeden CSS'yi gerçenten öğrenemezsin.

Bu konuya başlamadan önce, bilgisayarları kullanma ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın. Gerekli yazılımların kurulumu bölümünde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem ve Dosyalarla çalışma bölümünde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olman gerekir — her ikiside  Web'e başlarken eğitiminin bir parçasıdır.

Web geliştirme konusunda tamamen yeniysen, bu konulara devam etmeden önce Web'e başlarken eğitimini adım adım çalışmanı öneririz. Bununla birlikte CSS'in temelleri dersinde anlatılanların çoğu, CSS'e ilk adım bölümünde daha ayrıntılı bir şekilde ele alınmaktadır.

Bölümler

Bu konunun daha iyi anlaşılması için öğrenmeye aşağıda belirtilen sıra ile ilerlenmesi gerekmektedir. Hakkında bilgi sahibi olduğunu düşündüğün bölümleri atlama, Sırasıyla ilerleyerek bilgilerinide pekiştirmiş olursun.

CSS'e ilk adım
CSS (Cascading Style Sheets) web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn. içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için. Bu kısım, CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML'ye stil eklemek için nasıl kullanacağın hakkında temel bilgiler verecektir.
CSS'in yap taşları

Bu bölüm CSS'e ilk adım'ın kaldığı yerden devam ediyor- artık dile ve sözdizimine aşina oldun ve onu kullanma konusunda bazı temel bilgiler edindin, biraz daha derine dalmanın vakti geldi. Bu bölümde, art arda denetim ve mirası, tüm seçici türlerini, birimleri, boyutlandırmayı, arka planların ve kenarlıkların stilini belirlemeyi, hata ayıklamayi ve çok daha fazlasını inciler

Buradaki amaç, size yetkin CSS yazmak için bir araç seti sağlamak ve  metin şekillendirme ve CSS düzeni gibi daha spesifik kurallara geçmenden önce tüm temel kavramları anlamana yardımcı olmaktır.

Metin stilini belirleme
CSS dilinin temelleri ele alındığında, odaklanman gereken bir sonraki CSS konusu, CSS ile yapacağın en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipini, kalınğı, italiği, satır ve harf aralığını, alt gölgeler ve diğer metin özelliklerini ayarlama da dahil olmak üzere metin stilinin temellerine bakıyoruz. Sayfana özel yazı tiplerini uygulamaya; listeleri ve bağlantıları şekillendirmeye bakarak bu bölümü tamamlıyoruz.
CSS düzeni
Bu kısma kadar CSS'in temellerini, metnin stilini ve içeriğinin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğini inceledik. Şimdi, kutularını görüntü alanına ve bir birlerine göre yerleşimlerini düzenlemeye bakma zamanı. CSS düzenine derinlemesine dalarak; farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına, ayrıca hala bilmek isteyebileceğin bazı eski tekniklerin ön koşullarını ele alacağız.

Yaygın sorunları CSS ile çözme

Yaygın sorunları çözmek için CSS kullanma; bir web sayfası oluştururken çok yaygın sorunları çözmek için CSS'in nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.

Başlangıçtan itibaren, renkleri öncelikle HTML öğelerine ve arka planlarına uygula, öğelerin boyutunu, şeklini ve konumunu değiştirin ve öğeler üzerinde kenarlık ekle ve bunları tanımla. CSS'in temellerini sağlam bir şekilde anladıktan sonra yapamayacağın pek bir şey yoktur. CSS öğrenmenin en iyi yanlarından biri, temelleri öğrendikten sonra, aslında nasıl yapılacağını henüz bilmesen bile, genellikle neyin yapılabileceği ve yapılamayacağı konusunda oldukça iyi bir öngörüye sahip olmandır.

"CSS tuhaf"

CSS, karşılaşacağın çoğu programlama dilinden ve tasarım aracından biraz farklı çalışır. Aşağıdaki videoda, Miriam Suzanne CSS hakkında yararlı bir kaç açıklamada bulunuyor.

Göz at

MDN'de CSS
CSS dilinin tüm özellikleri içn ayrıntılı kaynak belgeleri bulacağın MDN, CSS eğitimine ana giriş noktasıdır. Burası ziyaret etmek için harika bir yer.