HTML'e giriş ve temel HTML kod yapısı

CSS Nedir? HTML-CSS Temelleri

Önceki dersimizde HTML’e giriş yaparak temel HTML doküman ve etiket yapısının yanı sıra HTML’in tarihçesi, satır arası HTML etiketleri ve blok seviyesi HTML etiketlerine giriş yaptık. Ayrıca HTML-CSS arasındaki ilişkiden kısaca bahsetmiştik.Önceki dersimizden de hatırlayacağımız gibi HTML bir standart etiketleme dili, CSS ise basamaklı stil şablonlarıdır. CSS nedir, neden kullanırız, HTML-CSS temelleri dersimizde örnek kodlar kullanarak nasıl CSS dosyaları oluşturabileceğimizi öğreneceğiz.

CSS Nedir? HTML-CSS Temelleri
CSS3 Logosu

Bu dersimizde ayrıca HTML sayfanın içerisinde CSS çağırma ve sayfa içi css kodlarını nasıl yazacağımızı örneklerle işleyeceğiz.

CSS Nedir?

CSS Cascading Style Sheets (basamaklı stil şablonları) kelimelerinin kısaltmasından oluşmaktadır.

CSS kodları HTML nesnelerinin nasıl görüntüleneceği ve görsel özelliklere sahip olacağını tanımlamaktadır. CSS sayesinde HTML ile daha zahmetli ve çok kod yazılarak elde edilebilecek görsel sonuçlar çok daha hızlı elde edilebilmektedir. CSS kodları temel olarak 3 tipte yazılabilmektedir.

Satır arası CSS:

<span style="color:red; display:block">Mobilhanem HTML-CSS Eğitimi<span>

Sayfa içi CSS:

<!DOCTYPE html>
<html lang="tr">

<head>
 <meta charset="utf-8">
 <title>Sayfa Başlığı</title>
 <style>
  h1{
   color:red
  }
  p{
   margin:0
  }
 <style>
</head>

<body>
   <h1>Mobilhanem HTML – CSS Eğitimi</h1>
   <p>Eğitim içerik metni.</p>
   <p>Örnek paragraf metni.</p>
</body>

</html>

Harici CSS dosyası çağırma:

<!DOCTYPE html>
<html lang="tr">

<head>
 <meta charset="utf-8">
 <title>Sayfa Başlığı</title>
 <link rel="stylesheet" type="text/css" href="stil.css" />
</head>

<body>
   <h1>Mobilhanem HTML – CSS Eğitimi</h1>
   <p>Eğitim içerik metni.</p>
   <p>Örnek paragraf metni.</p>
</body>

</html>

 

Neden CSS Kullanılır?

CSS web sayfalarındaki stil öğelerini tanımlamak için kullanılır. Bu stil öğeleri taslağına va farklı ekran boyutlarına göre de değişiklik gösterebilmektedir. HTML etiketleri tek başına sayfanın stilini belirlemek yetersizdir. HTML etiketleri sayesinde sayfanın içeriği tanımlanmaktadır. Sayfadaki etiketlere stil vermek için bazı özellikler(attributes) kullanılmaktadır. Bu özelliklerin yeteri kadar görsel stili elde etme imkanı sunmaması ve her bir etiketin ayrı ayrı stillerinin güncellenme ihtiyacından dolayı World Wide Web Consortium (W3C) CSS’i oluşturmuştur.

CSS kullanarak harici bir dosyaya web sitesi içeriğinden bağımsız olarak sadece stil öğeleri eklenmektedir. Böylelikle daha kolay değişiklik yapılabilmektedir.

HTML Sayfanın İçerisine CSS Dosyası Çağırma

<link rel="stylesheet" type="text/css" href="stil.css" />

HTML sayfanın içeriğine stil vermek için en verimli ve en yaygın kullanılan yöntem CSS dosyası oluşturarak tüm stil kodlarını ayrı bir dosyada saklamakdır. Böylelikle web sitemizin herhangi bir yerinde yapmak istediğimiz görsel bir değişiklikte her bir dosyadan ayrı ayrı değişiklik yapmak yerine tek bir dosyadan değişiklik yapılabilmektedir. Böylelikle hem hızlı ve daha az riskli kod yazılabilmektedir.

CSS Yazım Dizilimi

CSS kodları yazılırken seçiciler ve tanımlama bölümlerinden oluşur. CSS seçicileri bir nesneyi adreslemek için kullanılan bölümdür. Tanımlama bölümü ise nesneye verilecek görsel stillerin tanımlandığı bölümdür.
Basit CSS Seçicileri
CSS seçicileri stil vermek istediğimiz HTML nesnesini seçmek için kullanılır. Farklı tipte seçiciler vardır. Bu dersimizde seçicileri temel düzeyde örnekleyerek işleyeceğiz.

Nesne Seçicisi

HTML nesnesinin ismiyle HTML nesnesini seçmemizi sağlar. Sayfa içerisindeki tüm aynı isimdeki nesneleri seçmiş oluruz. Aşağıdaki örnekte sayfadaki tüm nesnelerinin rengi maviye dönecek ve ortalanacaklar:

p {
  text-align: center;
  color: blue;
}

ID Seçicisi

ID seçicisi HTML nesnesinin id özelliğinin değeriyle bağlanarak tek bir nesneyi seçme imkanı sunar. ID özelliği sayfa içerisindeki nesneler arasında tekil olmalıdır. Bu seçiciyle adresleme yapmak için # işareti kullanılır. Aşağıdaki örnekte ID’si “mobilhanem” olan nesnenin rengi maviye dönüşecek ve ortalanacaktır:

#mobilhanem {
 text-align: center;
 color: blue;
}

Class Seçicisi

Class yani sınıf seçicisiyle HTML sayfamızdaki class özelliğinde belirttiğimiz isim yazan nesneleri seçmek için kullanılır. Seçicide class özelliğiyle bağlamak için nokta karakteri kullanılır. Örneğin aşağıdaki örnekte class özelliğinin değeri “ortala” olan nesneleri seçecek ve o nesnelerin rengini maviye dönüştürüp, ortalayacaktır.

.ortala {
  text-align: center;
  color: blue;
}

 

Bir HTML nesnesi birden fazla class özelliği değeri alabilir:

<span class="ortala baslik">Mobilhanem</span>

Genel Seçici
Sayfa içerisindeki tüm nesneleri seçmek için kullanılan seçicidir. Genel seçici (*) ile adresleme yapmaktadır. Aşağıdaki örnekte sayfadaki tüm HTML nesnelerinin rengi maviye dönerek ortalanacaktır:

* {
 text-align: center;
 color: blue;
}

CSS3 İle Gelen Bazı Yenilikler

CSS’in yeni sürümü olan CSS3 bir çok yenilikler beraber önceki versiyonları olan CSS1, CSS2 ve CSS2.1 den ayrılmaktadır. Bu yenilikler cihazların ekranlarındaki çeşitlilikten kaynaklanan problemleri javascript’e daha az ihtiyaç duyarak çözmeyi hedefleyen yeniliklerdi. Ayrıca gölgelendirme(box-shadow), kenarlık görseli (border-image), transparanlık (opacity) gibi kodlarla da bir çok tasarım yeniliğini getirmiştir. Ayrıca CSS3 ile birlikte sadece CSS ve HTML ile animasyon yapmak da mümkündür. İlerleyen derslerimizde CSS3 ile animasyon yapma, örnek sayfa yüklenme animasyonu yapma gibi örneklerle CSS3 ile ilgili daha fazla detaya yer vereceğiz.

Özet

Temel HTML-CSS ders serimizin ikinci dersinde CSS nedir, neden kullanırız, HTML-CSS temelleri sorularına yanıt verdik ve HTML-CSS ilişkisinden daha detaylı bahsettik ve CSS ile ilgili temel yazım tiplerini paylaştık. HTML sayfa içerisine CSS çağırma yolunu, sayfa içi CSS yazma yolunu ve satır içi CSS yazma yöntemini örnekli olarak işledik. Bir sonraki dersimizde HTML ve CSS ile öğrendiklerimizi uygulayacağımız bir örnek sayfa oluşturacağız. Ders serimizin devamında da bu yazımızda temel olarak bahsettiğim CSS3 animasyonlarını da örneklerle detaylandıracağız. Diğer HTML5-CSS3 derslerine erişmek için tıklayınız. Konu dışı sorularınızı ve tüm yazılımsal sorularınızı sorucevap.mobilhanem.com sitemizden de sorabilirsiniz.

41

Ferhat Yaldıran

Frontend Developer

Yorum Yaz

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?