CSS Nedir?

0
96
CSS Nedir?

CSS Nedir?, HTML ve CSS (Cascading Style Sheets) beraber kullanılan dillerdir. Standart biçimlendirmelerin dışında farklı görünümlere olanak verir. CSS ile ilgili seçenekler ve kabiliyete dayalı benzersiz web sayfaları tasarlanabilir. Basit bir şekilde dile getirmek gerekirse, hazırlanan sayfalara ait görsel kriterlere dayalı her türlü geliştirmeyi sağlayan bir markup dilidir. Geliştirilmesi gereken (Arka Plan, Buton, Form) gibi vb. elementlerin Boyutlarını, Renklerini ve Konumlarını hayal gücüne dayalı geliştirilme imkanı verir.

CSS dilinin bir kolaylığı ise tanımlamaları bir sefer yaparak tüm sayfalar üzerinde kullanabilme pratikliğidir. CSS, HTML dilinin içine gömüle bildiği gibi .css uzantılı farklı dosyalar içerisine de yazılabilir. İlgili kodların farklı dosyalarda bulunması da hiçbir engel koymaz. Her hangi bir HTML dosyasında ortak kullanımlar sağlayabilir. Ayrıca aynı şablonları birden çok aygıtlara göre biçimlendirme kolaylığı sunar. Özetle HTML ile beraber kullanılan CSS, Metin ve Format gibi vb. şekillendirme sürecini tamamlayan web teknolojisidir.

CSS Nedir?

CSS Nedir?, (Cascading Style Sheets) İngilizce kelimelerin baş harflerinden oluşan kısa adıyla CSS kısaltılmış İngilizce terimdir. Türkçe de ise Stil Şablonları olarak bilinmektedir. HTML yanında ek olarak kullanılan bir dildir. Çeşitli geliştirme süreçlerine dahil tutulan birçok alanda olanak sunan bir web teknolojisidir. CSS ile ilgili sayfanın üzerinde hedeflenen tüm görsel geliştirmelere kolaylık sağlar. Tek bir .css dosyası ile tüm sayfalara etki ettiği gibi tekil olarak sadece istenilen sayfada da kullanılabilir.

CSS ile web sayfalar üzerinde bağımsız olarak kullanılan bir dildir. CSS in en önemli özelliklerinden bir tanesi alanına göre kullanım esnekliğidir. Tüm sayfalar üzerinde ayrı ayrı geliştirilmesi gereken elementleri belirtmek yerine. CSS yardımı ile tek seferde tanımlama yaparak tüm sayfalarda ortak kullanım imkanı sunar. Bu sebeple ilgili sayfaların boyutları da büyük oranda küçülür ve kullanım kolaylığı yükselir. Kısaca CSS tercih ve kullanım alanına göre benzersiz web sayfaları imkanı verirken çıkılmaz bilgi gerektiren yerlerde hayat kurtarır.

CSS Nasıl Kullanılır?

CSS kodları HTML dosyası içerisinde beraber kullanılabilme imkanı sunabilir. Yukarıda belirtildiği üzere dosya boyutunun düşürülmesi kullanıcı deneyimi açısından yüksek önem taşımaktadır. Bu sebeple Stil Şablonunun kendi .css dosyası içerisinde hariç şekliyle yer alması oldukça önemlidir. Tema veya kullanmak istediğiniz alana göre style.css dosyası alanında CSS diline ait kodların yer alması gerekmektedir. Böylece deneyim kriterlerine uyum sağlarken boyutlarını da minimize etmiş olacaksınız.

CSS dosyasının ilgili sayfada etki göstermesi adına birkaç teknik bilgi gerektirir. Ancak bu durum gözünüzü korkutmasın kullanım esnekliği ve pratik olması gibi bu etkileşim süreci de oldukça basit ve kolaydır. CSS dosyalarının yolu kullanım alanlarının türüne göre ve/veya etiketlerinin bulunduğu alanlarda yer alarak değişiklik gösterebilir.

Stil Şablonu (Cascading Style Sheets) Nasıl Eklenir?

<head>
  <style>
    <link rel="stylesheet" type="text/css" href="https://www.webventur.com/style.css" />
  </style>
</head>

Yukarıda belirtilen kod ile etki edilmesi istenen HTML dosyasına eklenebilir. Her bir css dosyasını ayrı ayrı dosya ve/veya dosyalar içerisinde saklanabilir. Farklı HTML sayfalarında kullanılabilir. Ayrıca tüm sayfaların farklı ve değişik aygıtlara göre formatlanmasını kolaylık sağlar.

CSS Örneği İle Denemek İsterseniz?

Aşağıdaki ilgili kodları not defteri aracını kullanarak çalıştırabilirsiniz. Macos işletim sistemi kullanıyorsanız her hangi bir text aracını da kullanabilirsiniz.

<html>
	<head>
		<style>
			#WebventurBox{
				width:250px; 
				height:300px; 
				border:solid 2px;
			}
			
			.WebventurLogo{
				background:url(https://www.webventur.com/wp-content/uploads/2018/12/Logo.png);
			}
		</style>
	</head>

	<body>
		<div id="WebventurBox">
		<div class="WebventurLogo">
		</div>
		</div>
	</body>
</html>

CSS Örneğinin Açıklaması

Bu örnek HTML dosyası içerisinde kullanılan bir çalışma türüdür. <head> ve <style> etiketleri arasında ilgili css dili <body> etiketi altında bulunan class ve/veya id kurallarına göre belirlenmiştir.

CEVAP VER

Please enter your comment!
Please enter your name here