css1-photo-1024x600

CSS Nedir?

Cascading Style Sheets, kısaca CSS, web sayfalarının görsel tasarımını oluşturmaya yarayan bir stil dilidir. HTML’in yanında kullanılır ve sayfaların görüntüsünü düzenleyerek daha estetik ve kullanıcı dostu bir görünüm elde edilmesini sağlar.

CSS’İN AVANTAJLARI

  1. İçerik ve tasarım ayrılığı: Web sayfalarının içeriğini tasarımdan ayrıştırabilirsiniz. Böylece, içerikle ilgili değişiklikler yaptığınızda tasarımda herhangi bir değişiklik yapmanıza gerek kalmaz.
  2. Daha hızlı sayfa yükleme: Web sayfalarının boyutunu küçülterek daha hızlı yüklenmesine yardımcı olur. Bu da kullanıcı deneyimini olumlu yönde etkiler.
  3. Kolay bakım: Web sayfalarının bakımını kolaylaştırır. Tasarım değişiklikleri yapmak istediğinizde, sadece CSS dosyasını değiştirerek tüm sayfalarda aynı değişikliği yapabilirsiniz.
  4. Uyumlu tasarım: Web sayfalarının farklı cihazlarda uyumlu görünmesini sağlar. Böylece, mobil cihazlardan da kolayca erişilebilir bir tasarım elde edebilirsiniz.

CSS’İN TEMEL ÖZELLİKLERİ

  1. CSS’de seçiciler, belirli HTML öğelerine stil uygulamak için kullanılır. Örneğin, <h1> etiketine stil uygulamak istediğinizde, h1 seçicisini kullanabilirsiniz.
  2. Özellikler, seçilmiş HTML öğelerine uygulanan stil özellikleridir. Özellikler, font boyutu, renk, arka plan rengi, çerçeve gibi özellikleri içerir.
  3. Özelliklerine atanabilen değerler, sayısal değerler, renkler, pozisyon değerleri ve daha birçok değer içerebilir.
  4. Birden fazla stil tanımı olduğunda, hangi stili uygulayacağına karar vermek için üstünlük kuralları kullanılır. Örneğin, inline stil tanımı, harici stil tanımından daha üstündür.
  5. Birleştiriciler, birden fazla seçiciyi birleştirerek daha spesifik bir seçici oluşturmanızı sağlar.

CSS’in HTML İLE KULLANIMI

CSS, HTML belgelerine stil uygulamak için kullanılır. HTML, içerik ve yapısını belirlerken CSS, bu içeriğin nasıl görüneceğini belirler. CSS dosyaları, HTML belgesine ayrı bir dosyada veya HTML belgesinin içinde yer alabilir.

HTML’de CSS kullanmak için aşağıdaki adımları izleyebilirsiniz:

  1. Stil tanımlarınızı içerecek bir CSS dosyası oluşturun. Bu dosya, .css uzantılı olmalıdır.
  2. CSS dosyasını HTML’e bağlayın: Dosyanızı HTML belgenize bağlamak için <head> etiketi içinde bir <link> etiketi kullanın. Bu etiket, href özelliği ile dosyanın yolunu belirtir.
css-blog1-644x95

Bu, stil.css dosyasının HTML belgenize bağlandığını gösterir.

  1. HTML öğelerine stil uygulamak için CSS seçicileri kullanın. Örneğin, tüm <h1> etiketlerine stil uygulamak için aşağıdaki kodu kullanabilirsiniz:
css-blog2-633x114

Bu kod, tüm <h1> etiketlerinin metin rengini kırmızı ve font boyutunu 32 piksel olarak ayarlar.

  1. Ayrıca, HTML öğelerine doğrudan stil uygulayabilirsiniz. Bu, etiketin style özelliği aracılığıyla yapılır. Örneğin, aşağıdaki kod <p> etiketi için stil tanımı yapar:
css-blog3-636x42

Bu, bu belirli <p> etiketi için metin renginin mavi ve font boyutunun 16 piksel olarak ayarlanacağı anlamına gelir.

CSS’nin HTML ile kullanımı bu kadar basittir. İhtiyacınız olan tek şey, stil dosyanızı oluşturmak, HTML belgenize bağlamak ve öğelere doğru seçiciler veya style özelliği aracılığıyla stil uygulamaktır. HTML hakkında daha fazla bilgi için HTML Nedir? yazımı okuyabilirsiniz.

Sosyal medyadan benimle iletişime geçebilirsiniz. Twitter Facebook İnstagram

Yorum bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Merhaba nasıl yardımcı olabilirim?