CSS Nedir ve Nasıl Çalışır? (Adım Adım Açıklama)

#CSS

Css Nedir? Css, Html dosyalarını düzenlemek için vurgulanan Basamaklı Stil Sayfalarını ifade eder. Css, html dosyalarına şekil vermekte kullanılır.

CSS Nedir? HTML’yi hatırladınız mı? Tüm web geliştirme için temel olarak hizmet veren kodlama dili. HTML web siteleri oluşturmak istediğinizde öğrenmek isteyeceğiniz ilk dil ise, kuzeni CSS’dir.

CSS Nedir ve Nasıl Çalışır?
CSS Nedir ve Nasıl Çalışır?

CSS nedir? Ve HMTL ile İlişkisi Nedir?

CSS, HTML dosyalarını düzenlemek için vurgulanan Basamaklı Stil Sayfalarını ifade eder.

HTML, bir web belgesini yapılandırmak için kullanılırken (başlıklar ve paragraflar gibi şeyleri tanımlamak ve görüntü, video ve diğer ortamları yerleştirmenize izin vermek), CSS gelir ve belgenizin stilini belirtir; sayfa mizanpajları, renkler ve fontların tümü CSS ile belirlenir.

HTML’yi bir TOKİ olarak düşünün her apartmanın birbirine benzeyen evleri var ve estetik açısından yoksun ve CSS’yi estetik seçimler olarak düşünün CSS için ise aklınıza Topkapı Sarayını getirin işte bütün ilişki bundan ibaret.

CSS Nedir? CSS Nasıl Çalışır?

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

<p>Bu bir paragraftır!</p>

Bu paragrafı pembe göstermek ve web sayfanızı bir web tarayıcısından görüntüleyen kişilere bu yazıyı pembe biçimlendirilmiş olarak göstermek istiyorsanız, şöyle görünen CSS kodunu kullanırsınız:

p  {  color: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 ve 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, “color” ve ” font-weight” her iki özelliktir ve ” pink” ve “bold” değerlerdir. Tam parantez seti;

{color:pink; font-weight:bold;} 

“p” (HTML paragrafının anlamı) seçicidir. 

Aynı temel ilkeler, yazı tipi boyutlarını, arka plan renklerini, kenar boşluğu girintilerini ve daha fazlasını değiştirmek için uygulanabilir. 

Örnek;

body {background-color:lightblue;}

Bu örnekteki CSS kodu sayfanızın arka planını açık mavi yapacaktır.

Diğer örnek;

p  {  font-size:20px;  color:red;  }

Bu örnek ise kırmızı harflerle 20 puntoluk bir font paragrafı oluşturacaktır.

Harici, Dahili veya Satır İçi CSS?

CSS kodunun aslında HTML içeriğine nasıl uygulandığını merak ediyor olabilirsiniz. HTML’ye benzer şekilde, 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 ve bu CSS kodunu HTML sayfalarınıza eklemenin üç ana yolu vardır.

CSS kodu (veya Stil Sayfaları) 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 (ayarlamak istediğiniz her HTML öğesine ayrı ayrı CSS kodu örnekleri eklemek yerine).

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="mysitestyle.css">
</head>

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

Dahili stil sayfaları, doğrudan belirli bir .html sayfasının başlığına yazılmış CSS talimatlarıdır. (Bu özellikle benzersiz bir görünüme sahip bir sitede tek bir sayfanız varsa kullanışlıdır.) Dahili bir stil sayfası böyle bir şeye benziyor. . .

<head>
<style>
body {  background-color:red;  }
P {  font-size:20px;  color:mediumblue;  }
</style>
</head>

Bu örnekte .html sayfasının arkaplanı kırmızıdır, paragrafı 20 punto büyüklüğündedir ve mavi renktir.

Son olarak, satır içi stiller doğrudan HTML koduna yazılmış ve yalnızca tek bir kodlama örneğine uygulanabilir CSS parçacıklarıdır. Örneğin:

<h1  style="font-size:40px;color:violet;">Check out this headline!</h1>

Tek bir .html sayfasındaki belirli bir başlığın rengini menekşe, yazı tipinide 40 punto yapar.

Genel olarak, dış stil sayfaları, bir web sitesinde CSS uygulamak için en etkili yöntemdir (bir sitenin stilini özel bir CSS dosyasından izlemek ve uygulamak daha kolaydır), ancak iç stil sayfaları ve satır içi stil bir durumda kullanılabilir; bireysel tarz değişikliklerinin yapılması gerektiğinde.

Bu nedenle, HTML web sitenizi destekleyen temel, çerçeveler, duvarlar ve kirişlerse, CSS’yi daha sonra gelen boya rengini, pencere stillerini ve peyzajı göz önünde bulundurun.

İlk önce bu temeli atmadan hiçbir yere ulaşamazsınız, ancak – bir kez yaparsanız – CSS ile HTML dosyalarını şekillendirmekten vazgeçemeyeceksiniz.

Bu makaleyi CSS’in aklınızda küçük bir yer etmesi için kaleme aldık, çok fazla birşey anlamayabilirsiniz. İlerleyen ders ve makalelerde CSS sizin için çocuk oyuncağından farksız olacaktır. Biraz sabır.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt /// https://skillcrush.com/2012/04/03/css/ “Bir şey bilmediğim dışında başka bir şey bilmiyorum.” #Sokrates