css nedir nasıl kullanılır detaylı anlatım

CSS Nedir?

Web Tasarım

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 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 ++ :

notepad plus plus

notepad plus plus

+ Notepad++ indirmek için buraya tıklayın

Sublime Text :

sublime text

sublime text

+ Sublime Text indirmek için buraya tıklayın

,

İlgili Yazılar

domain nedir nasıl kullanılır detaylı anlatım

Domain Nedir?

Tabelası olmayan bir dükkan düşünün, insanlar o dükkanı kolaylıkla bulamazlar değil mi? Bulsalar bile akılda kalıcı olmaz ve hatırlanması güç olur. Domain yani alan adı…
javascript nedir nasıl kullanılır detaylı anlatım

Javascript Nedir?

Temel web tasarım dersleri yazı dizimizin bu bölümünde yine web tasarımında olmazsa olmaz olan bir konuya değineceğiz. Konumuz, JavaScript Yani bir web sayfasına hareket katan,…
bootstrap nedir nasıl kullanılır detaylı anlatım

Bootstrap Nedir?

Profesyonel bir web sitesi yapmak istiyorsak, sitemizin tüm cihazlara (masaüstü, dizüstü, tablet, telefon vb) uyumlu çalışması gerekmektedir. Tüm cihazlara uygun tasarım yapısına responsive design (duyarlı…
hosting nedir nasıl kullanılır detaylı anlatım

Hosting Nedir?

Bir web sitesi hazırladınız ve sitenizi yayına alarak dünyaya açmak istiyorsunuz. İşte tam olarak bu noktada iki şeye ihtiyacınız var. Bunlardan birisi domain, diğeri ise…

Bir cevap yazın

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

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi girin.
You need to agree with the terms to proceed

Birlikte Çalışmak İster misiniz?

Web tasarım, seo danışmanlığı, fotoğraf ve video çekimi, sosyal medya yönetimi işleri için iletişime geçin, projelerinizi birlikte hayata geçirelim.

Son Eklenen Yazılar

Popüler Yazılar

Menü