CSS Nedir?

0
38
css nedir
css nedir, css nerelerde kullanılır, css nasıl kullanılır
Google Reklam:

CSS yani Cascade Style Sheet, HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir. HTML ile oluşturulan elemanlara stil vermeye yarar. Örneğin HTML içine eklediğimiz bir yazının rengini kırmızı yapmak istiyorsak bunu CSS ile gerçekleştiririz.

HTML Nedir?, HTML ile neler yapılabilir? makalemizde, HTML ile ilgili bilinmesi gereken tüm bilgilere değindik. HTML konusunu kavradıktan sonra, bir web sayfası için olmazsa olmaz olan HTML’in olmazsa olmazı CSS hakkında tüm bilinmesi gerekenleri yazımızın devamında okuyabilirsiniz.

CSS Nedir?

CSS (Cascade Style Sheet) HTML elementlerini görsel açıdan (renk, yazı şekli, arka plan rengi, genişlik, yükseklik, pozisyon durumu vb) biçimlendirmemize imkan sağlar.

CSS, Basamaklı Stil Şablonları veya Basamaklı Biçim Sayfaları olarak da anılır.

HTML tek başına yazıldığında bir not belgesi gibi görünür. HTML elementlerine stil veren CSS’dir. HTML üzerine CSS nasıl uygulanır?, CSS nasıl yazılır?, CSS nasıl kullanılır? bunları inceleyelim.

CSS’in sahip olduğu seçiciler vardır. HTML etiketlerinde tanımladığımız seçici isimleriyle birlikte CSS kullanarak etiketleri biçimlendiririz. HTML elemana stil vermek için, CSS seçiciler kullanılır. Seçicilerin en çok kullanılanları id veya class ‘lardır. Bir diğer yöntem ise direkt olarak HTML içine CSS değerleri yazmaktır. CSS seçiciler hakkında bilgi sahibi olmak için buraya tıklayın.

CSS dosyaları .css uzantısı ile biter.

CSS bir web sayfasının görselleştirme katmanıdır. CSS, günümüzde internet sitelerinin bu kadar yaygın bir şekilde kullanılabilir olmasına imkan sağlayan en önemli rollerden birini üstlenmiştir.

css nedir

CSS Tarihçesi

HTML’in kullanılmaya başlanmasından sonra oluşan belgelerin stillendirilmesi ihtiyacına çözüm bulmak için, Hakon Wium Lie CSS’i tasarlamıştır.

İlk CSS taslağı 1994 yılında Chicago’da yapılan bir web konferansında sunuldu. Daha sonra 1995 yılında www-style adında bir e-posta listesi oluşturuldu. Bu e-posta listesi, CSS’in günümüzdeki haline gelmesinde önemli bir yere sahiptir.

Css’i ilk destekleyen ticari tarayıcı, 1996 yılında çıkan Internet Explorer v3 oldu. Ardından Netscape Navigator v4 de destek vermeye başladı.

Devam eden süre zarfında CSS geliştirilmeye ve CSS destekleyen tarayıcılar artmaya başladı.

CSS Nasıl Yazılır?

CSS nasıl yazılır, HTML’e CSS nasıl uygulanır bir kaç örnek ile görelim.

HTML:

<h1 id="sayfa-baslik">CSS DERSLERİ</h1>

<h2 id="alt-baslik">CSS Öğreniyorum</h2>

<h3 class="basliklar">CSS Nedir</h3>

<h3 class="basliklar">CSS Nasıl Yazılır</h3>

<h4 class="basliklar">CSS id ve class</h4>

<h5 style="color: #000; font-weight: bold;">HTML içinde CSS yazımı</h5>

CSS:

#sayfa-baslik{
   font-size: 24px;
   color: #333;
   border-bottom: 1px solid #333;
}

#sayfa-baslik{
   font-size: 20px;
   color: #f40;
   border-bottom: 1px solid #f40;
}

.basliklar{
   color: red;
   background: #ccc;
   text-align: center;
}

Yukarıdaki örneklerde göründüğü üzere h elementlerinin ilk ikisinde id diğerlerinde class özelliği bulunmakta. id özelliği sayfada sadece bir tane kullanılırken class özelliği birden fazla kullanılabilir.

.basliklar olarak tanımlanan stil değerleri bu değere sahip tüm elementlere uygulanır. HTML içine direkt olarak CSS yazımını ise h5 elementi örneğinde görebilirsiniz.

CSS Seçiciler

.class Örn: .deneme – Açıklama: class=”deneme” tüm elementleri seçer.
#id Örn: #deneme – Açıklama: id=”deneme” id elementini seçer.
* Örn: * – Açıklama: Tüm öğeleri seçer. (CSS 2)
element Örn: h1 – Açıklama: Tüm h1 elementleri seçer. (CSS 1)
element,element Örn: div,p -Açıklama: Tüm “div” elementlerini ve tüm “p” elementlerini seçer.
element element Örn: div a – Açıklama: “div” elementi içindeki tüm “a” elementlerini seçer.

Diğer CSS seçicileri ile ilgili detaylı bilgi edinmek için buraya tıklayın..

HTML İçinde CSS Dosyası Çağırma

Projemize eklediğimiz bir css dosyasını HTML içinden çağırmamız gerekir. Sayfa yüklendiği sırada tarayıcının css dosyasını da okuması gerektiği için, css’in bulunduğu yeri tarif etmemiz gerekmektedir.

HTML Nedir? makalemizde bahsettiğimiz gibi bu tür tanımlamalar HTML kodlarının head tagları arasına yazılmalıdır. CSS dosyasını çağırmak şöyle bir tanımlama yapılması gerekmektedir:

<link rel='stylesheet' href='CSS DOSYASININ BULUNDUĞU DİZİN' type='text/css' media='all' />

Eğer CSS kodlarını bir css dosyasına değilde direkt HTML dosyasının içine yazmak istersek, yine head tagları arasına şu şekilde bir yazım yapmamız gerekmektedir.

<style type="text/css">

#sayfa-baslik{
   font-size: 24px;
   color: #333;
   border-bottom: 1px solid #333;
}
#sayfa-baslik{
   font-size: 20px;
   color: #f40;
   border-bottom: 1px solid #f40;
}
.basliklar{
   color: red;
   background: #ccc;
   text-align: center;
}

</style>

CSS Editörleri

CSS oluşturmak için bir çok editör mevcuttur. Bunlardan en sıkça kullanılan ve ücretsiz olanları ise Notepad++ ve Sublime Text editörleridir.

Notepad ++ :
html editorler, notepad++
+ Notepad++ indirmek için buraya tıklayın

Sublime Text :
html editörler, sublime text
+ Sublime Text indirmek için buraya tıklayın

Önceki İçerikHTML Nedir?
Sonraki İçerikJavascript Nedir?
Merhaba ben Batuhan Özyavru, 1986 yılında başladığım hayatıma, 2004 yılından bu yana web siteleri ve yazılım çözümleri geliştirerek devam etmekteyim. ASP.Net, PHP, CSS, HTML, JavaScript, JQuery, MySQL, MSSQL programlama dillerine iyi derecede hakimim. Ayrıca izmir web tasarım alanında, profesyonel anlamda izmir wordpress uzmanı ve izmir seo danışmanı olarak hizmet vermekteyim. Güncel teknolojiler ile kullanımı basit, tüm cihazlara uyumlu, arama motoru dostu, kurumsal ve profesyonel web siteleri hazırlamaktayım. Ayrıca arama motoru optimizasyonları ile kelime bazlı yükselmeler için destek vermekteyim. İzmir web sitesi yapımı, izmir seo uzman desteği, wordpress destek ve kurulumları gibi ihtiyaçlarınız için benimle iletişime geçebilirsiniz. İşimi severek yapmaktayım. Kaliteli iş, kaliteli hizmet benim prensibimdir. Çakma amatör yazılımcılarla başınızı ağrıtmadan, ajanslar ile cebinizi yakmadan profesyonel bir hizmet almak için hemen benimle iletişime geçebilirsiniz.

CEVAP VER

Please enter your comment!
Please enter your name here