Anasayfa / Web Yazılım / CSS Kodları Ne İşe Yarar? HMTL ile CSS’in İlişkisi Nedir?

CSS Kodları Ne İşe Yarar? HMTL ile CSS’in İlişkisi Nedir?

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

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.

Diğer Yazılar

SEM Nedir? Kimler Tarafından Kullanılır?

SEM nedir? Arama motorlarında reklamlar satın alarak web sitesi trafiğini arttırma sürecine denir. SEM ve SEO aynı değillerdir fakat benzer mantıktadırlar. SEM, reklamlar ile arama sayfasının en üstünde veya en altında konumlandırır.

Bir cevap yazın

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