HTML'de CSS Nasıl Kullanılır? Örnekleriyle (HTML Dersleri 8)

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Merhabalar! 8. HTML Dersine Hoşgeldiniz!

Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın en önemli öğelerinden biri de CSS'dir. CSS (Cascading Style Sheets), HTML sayfalarının görüntüsünü ve düzenini kontrol etmek için kullanılan bir web teknolojisidir. Bu makalede, HTML'de CSS kullanımı ve örnekleri incelenecektir.

HTML'de CSS Kullanımı:

HTML, web sayfalarının yapısal bölümlerini tanımlamak için kullanılırken CSS, aynı web sayfasındaki HTML öğelerinin görüntüsünü ve stiline uygun olarak düzenlemek ve tasarlamak için kullanılır. CSS, HTML'den ayrı bir dosyada yazılır ve HTML sayfalarına dahil edilir.

İpucu: CSS çok fazla iş tasarrufu sağlar. Aynı anda birden fazla web sayfasının düzenini kontrol edebilir.

HTML Dersleri

enesalp.com.tr
Web Tasarım,  Yazılım

CSS Nedir?

Cascading Style Sheets (CSS), bir web sayfasının düzenini biçimlendirmek için kullanılır.

CSS ile rengi, yazı tipini, metnin boyutunu, öğeler arasındaki boşluğu, öğelerin nasıl konumlandırıldığını ve düzenlendiğini, hangi arka plan resimlerinin veya arka plan renklerinin kullanılacağını, farklı cihazlar ve ekran boyutları için farklı görüntüleri ve daha fazla!

CSS İle ilgili daha fazla bilgi için tıklayın.

İpucu: Cascading kelimesi, bir üst öğeye uygulanan bir stilin, üst öğe içindeki tüm alt öğelere de uygulanacağı anlamına gelir. Bu nedenle, gövde metninin rengini "mavi" olarak ayarlarsanız, gövde içindeki tüm başlıklar, paragraflar ve diğer metin öğeleri de aynı rengi alır (başka bir şey belirtmediğiniz sürece)!

CSS Kullanımı

->Satır içi - HTML öğelerinin içindeki style niteliğini kullanarak

->Dahili - <head> bölümünde bir <style> öğesi kullanarak

->Harici - harici bir CSS dosyasına bağlanmak için bir <link> öğesi kullanılarak

CSS eklemenin en yaygın yolu, stilleri harici CSS dosyalarında tutmaktır. Bununla birlikte, bu eğitimde satır içi ve dahili stilleri kullanacağız çünkü bunu göstermek daha kolay ve sizin için denemeniz daha kolay.

Satır içi CSS

HTML kodu içinde stil özelliklerinin tanımlandığı bir yöntemdir. Bu tür CSS, sadece HTML etiketleriyle birlikte kullanılır ve sayfanın belirli bir bölümünde kullanılabilir. Satır içi CSS kullanımı, küçük düzeltmeler yapmak için idealdir ama büyük ölçekli web siteleri için uygun değildir.

Tek bir HTML öğesine benzersiz bir stil uygulamak için satır içi bir CSS kullanılır.

Satır içi CSS, bir HTML öğesinin style özelliğini kullanır.

Aşağıdaki örnek, <h1> öğesinin metin rengini kırmızı ve <p> öğesinin metin rengini yeşil olarak ayarlar:

Örnek:


<h1 style="color:red;">Bir kırmızı başlık.</h1>
<p style="color:green;">Yeşil bir paragraf.</p>

Görünüm:

Bir kırmızı başlık.

Yeşil bir paragraf.

Dahili CSS

HTML kodları arasında kullanılan bir stil levhasıdır. Bu tür CSS, sayfanın herhangi bir yerinde kullanılabilir ve birkaç farklı stil öğesini kapsayabilir. Dahili CSS kullanımı, küçük ölçekli web siteleri için idealdir.

Tek bir HTML sayfası için bir stil tanımlamak üzere dahili bir CSS kullanılır.

Dahili bir CSS, bir HTML sayfasının <head> bölümünde, bir <style> öğesi içinde tanımlanır.

Aşağıdaki örnek, (o sayfadaki) TÜM <h1> öğelerinin metin rengini yeşil olarak ve TÜM <p> öğelerinin metin rengini kırmızı olarak ayarlar. Ek olarak, sayfa "pembe" arka plan rengiyle görüntülenecektir:


<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: pink;}
h1   {color: green;}
p    {color: red;}
</style>
</head>
<body>

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>

</body>
</html>

Görünüm:

Bu bir başlık

Bu bir paragraf.

Harici CSS

Harici CSS, bir stil levhası dosyası olarak kaydedilir ve HTML kodu içinde çağrılır. Bu tür CSS, sayfaların tamamında veya birden fazla sayfada kullanılabilir. Harici CSS kullanımı, büyük ölçekli web siteleri için idealdir, çünkü web sitesinin tüm görünümünü değiştirmesi kolaydır.

Harici bir stil sayfası kullanmak için her HTML sayfasının <head> bölümüne bir bağlantı ekleyin:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>

</body>
</html>

İpucu: styles.css dosyasının bulunduğu konumu ayarlamayı unutmayın. Yukarıda bulunan örnekte bulunan styles.css dosyası index.html dosyasıyla aynı yerdedir.
Eğer bir css klasörünün içerisinde almak istersek css/styles.css olarak değiştirmeliyiz.

Harici stil sayfası herhangi bir metin düzenleyicide yazılabilir. Dosya herhangi bir HTML kodu içermemeli ve .css uzantısıyla kaydedilmelidir. "styles.css" dosyası şöyle görünür:


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Örnekleriyle Birlikte CSS Yazı Formatları

Sizin İçin Önerdiklerimiz

Blog Resim
HTML Renkleri Nelerdir? Nasıl Kullanılır? (Ders-7)

HTML

HTML renkleri, önceden tanımlanmış renk adlarıyla veya RGB, HEX, HSL, RGBA veya HSLA değerleriyle belirtilir. HTML'de, bir renk adı kullanılarak:..

Devamını Oku
Blog Resim
HTML Stilleri Nelerdir? Nasıl Kullanılır? (Ders-4)

HTML

Bu bölümde HTML Stillerini inceleyeceğiz. Günümüzde internetin hayatımızdaki yeri her geçen gün artmakta ve web sayfalarının tasarımı da aynı şekilde..

Devamını Oku
Blog Resim
HTML Elementleri Nelerdir? Nasıl Kullanılır? (Ders-2)

HTML

Günümüzde, internet siteleri markaların online varlıklarını temsil eden en önemli unsurlar arasında yer almaktadır. Bu sebeple, web sitelerinin..

Devamını Oku
Blog Resim
HTML ve CSS Kullanarak Kullanıcı Kayıt Ol Sayfası Oluşturma

HTML

Merhabalar! Bu bölümde HTML ve CSS kullanarak bir kullanıcı kayıt olma sayfası oluşturacağız.

Devamını Oku