CSS Kodları Ne İşe Yarar? CSS Türleri ve Kodları

CSS, Basamaklı Stil Sayfalarını ifade eder. HTML, bir web belgesini yapılandırmak için kullanılırken, CSS belgenizin stilini belirler. Sayfa renkleri, fontların tümü ve daha bir çok şey CSS kodları sayesinde yapılır. HTML’yi temel…

Hüseyin YILMAZ avatarı

CSS, Basamaklı Stil Sayfalarını ifade eder. HTML, bir web belgesini yapılandırmak için kullanılırken, CSS belgenizin stilini belirler. Sayfa renkleri, fontların tümü ve daha bir çok şey CSS kodları sayesinde yapılır. HTML’yi temel olarak CSS’i ise estetik seçimler olarak düşünün.

CSS Nasıl Çalışır?

CSS, HTML öğeleriyle etkileşime girerek web sayfalarınıza stil katar. Öğeleriniz web sayfalarında görünebilecek HTML bileşenleridir(örneğin bir paragraf).

<p> Bu benim paragrafım! </p>
paragrafı pembe göstermek ve web sayfanızı bir web tarayıcısından görüntüleyen kişilerin görmesini istiyorsanız, CSS kodları kullanmalısınız:

p { background: pink;
font-weight: bold; }

Bu durumda, “p” (paragraf) “seçici” olarak adlandırılır. Bu CSS stilinin hangi HTML öğesini etkileyeceğini belirten CSS kodunun bir parçasıdır. CSS’de, seçici ilk küme parantezinin soluna yazılır. Kıvrımlı parantez arasındaki bilgi bildirim olarak adlandırılır. seçiciye uygulanan özellikleri ve değerleri içerir. Özellikler, yazı tipi boyutu, renk ve kenar boşlukları gibi şeyler iken, değerler bu özelliklerin ayarlarıdır. Yukarıdaki örnekte, “renk” ve “yazı kalınlığı” her iki özelliktir ve “pembe” ve “kalın” değerlerindedir.

CSS’in Kaç Stil Sayfası Türü Vardır?

Bir CSS kodunun aslında HTML içeriğine nasıl dahil edileceğini merak ediyor olabilirsiniz. HTML’ye benzer şekildedir. CSS, bilgisayarınızdaki bir metin düzenleyici veya kelime işlemcisi aracılığıyla basit ve düz metin olarak yazılmıştır. Bu CSS kodunu HTML sayfalarınıza eklemenin üç ana yolu vardır. CSS kodları harici, dahili veya satır içi olabilir. Dış stil sayfaları .css dosyaları olarak kaydedilir ve bir web sitesinin tamamını görüntülemek için tek bir dosyayla kullanılabilir. Harici bir stil sayfası kullanmak için, .html dosyalarınızın harici stil sayfasına bağlanan ve şuna benzeyen bir başlık bölümü içermesi gerekir:

<head>
<link rel = ”stylesheet” type = ”text / css” href = stil.css ”>
</head>

Bu, .html dosyasını harici stil sayfanıza bağlar ve bu dosyadaki tüm CSS talimatları bağlantılı .html sayfalarınıza uygulanır.

CSS Türleri ve Kodları
CSS Türleri ve Kodları

CSS Türleri

1 – Internal CSS (İç CSS)

CSS kodlarımızı sayfanın üst kısmına style etiketi içine yazdığımız biçimidir.

2 – External CSS (Dış)

CSS kodlarımız için .css uzantılı bir doküman açıp buraya yazdığımız daha sonra da bu dokümanı link etiketi ile HTML içerisine çağırdığımız yazım biçimidir.

3 – İn-line CSS (Satır İçi CSS)

CSS kodlarımızı HTML yapımızın içine in-line bir şekilde yazdığımız biçimdir.

CSS’in Faydaları Nelerdir?

CSS kodları, web sitelerinizi programcıların yıllarca yazılım kodunu modüle ettiği gibi modülerleştirir. Web sitenizdeki modüler kod, daha fazla tasarım tutarlılığı ve daha kolay bakım sağlar. CSS, web tasarım firmaları tarafından kullanılmak zorundalığı olan bir dildir. CSS’in faydaları şunlardır.

  • Bakımı ve güncellemesi daha kolaydır.
  • Tasarımda daha fazla tutarlılık sağlar.
  • Daha fazla biçimlendirme seçeneği sağlar.
  • Basit bir kodlama yapısı vardır.
  • Hızlıdır ve kolayca entegre olmaktadır.
  • Arama motoru optimizasyonu faydası sağlar.
  • Farklı izleyicilere farklı stiller sunma kolaylığı sağlar.
  • Erişilebilirliği arttırır.

CSS kodları ile, web sitenizim tasarımını dilediğiniz şekilde ayarlayabilirsiniz. Kod yapısı oldukça kolaydır ve harici olarak ön izleme yapılarak kullanılabilir.

Tagged in :

Hüseyin YILMAZ avatarı

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Daha Fazla Makale ve Gönderi

  • SEO Stratejik Yaklaşım Dijital Başarının Temel Taşı

    SEO Stratejik Yaklaşım Dijital Başarının Temel Taşı

    SEO Stratejik Yaklaşım: Dijital Başarının Temel Taşı Dijital dünyada başarılı olmak artık sadece var olmakla değil, aynı zamanda doğru bir stratejik yaklaşımla mümkün. İşte bu noktada SEO Stratejik Yaklaşım…

  • SEO Deneyim ve Uzmanlık: Dijital Başarının Anahtarı

    SEO Deneyim ve Uzmanlık: Dijital Başarının Anahtarı

    SEO Deneyim ve Uzmanlık: Dijital Başarının Anahtarı SEO (Arama Motoru Optimizasyonu), günümüzün dijital dünyasında kesinlikle göz ardı edilemeyecek bir öneme sahiptir. İşletmeler, web sitelerini daha görünür ve erişilebilir hale…

  • Web tasarım için nereden başlamalıyım?

    Web tasarım için nereden başlamalıyım?

    Web Tasarım İçin Nereden Başlamalıyım? Web tasarımı, günümüz dijital dünyasında büyük bir öneme sahip. İşletmeler, blog yazarları, sanatçılar ve birçok farklı kişi veya kuruluş, çevrimiçi varlıklarını etkileyici ve işlevsel…

Web Tasarım
SEO
Google ADS
Wordpress