CSS Nasıl Eklenir? CSS Ekleme Yöntemleri Nelerdir?. CSS, “Cascading Style Sheets” teriminin kısaltmasıdır. Türkçe karşılığı “Basamaklı Stil Şablonları” olarak çevrilebilir. CSS kullanılarak Web sitelerin görünümü ve düzeni değiştirilir. Gelin hep birlikte bir web siteye CSS nasıl eklenir? öğrenelim.
CSS Nasıl Eklenir?
CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek ve biçimlendirmek için kullanılan bir tarayıcı tarafı web teknolojisidir. HTML’in (HyperText Markup Language) yapısını değiştirmeden, web sayfalarının tasarımını ve düzenini kontrol etmek için CSS kullanılır.
CSS, web sayfalarının farklı bileşenlerini (örneğin metin, bağlantılar, görseller, tablolar, formlar) hedefleyerek, bunlara stil özellikleri atar. Bu stil özellikleri, öğelerin metin rengi, arka plan rengi, yazı tipi, boyut, kenarlık, dolgu, konumlandırma gibi özelliklerini belirler.
CSS, HTML ve diğer web teknolojileriyle birlikte kullanılarak sayfaların görünümü ve düzeni üzerinde büyük bir kontrol sağlar. Aynı CSS dosyası birden fazla web sayfasında kullanılabilir ve bir kez tanımlandığında tüm sayfalarda aynı stil özelliklerini uygulayabilir.
CSS, tarayıcıların farklı özelliklerini ve stil seçicilerini kullanarak öğelerin nasıl biçimlendirileceğini belirler. Örneğin, belirli bir HTML öğesine stil uygulamak için bir sınıf veya kimlik seçici kullanılabilir. CSS ayrıca medya sorguları kullanarak ekran boyutlarına veya cihaz özelliklerine bağlı olarak farklı stiller belirlemeyi sağlar. Gelin şimdi CSS Ekleme Yöntemleri Nelerdir? öğrenelim.
CSS eklemenin 3 yolu vardır bunlar:
- Dahili CSS
- Harici CSS
- Satır içi CSS
1- Dahili CSS
Dahili CSS (Internal CSS), CSS kodlarını doğrudan HTML sayfanın <head> bölümünde <style> etiketi içinde tanımlamak anlamına gelir. Bu yöntemde CSS kodları, HTML sayfasının içinde yer alır ve her bir HTML sayfası için ayrı ayrı tanımlanır.
Örneğin:
<!DOCTYPE html>
<html>
<head>
<title>Web Sayfası</title>
<style>
/* CSS kodları buraya */
</style>
</head>
<body>
<!– Sayfa içeriği buraya –>
</body>
</html>
CSS kodlarını <style> etiketi içine yazarak, kodları doğrudan HTML sayfanın içine yerleştirebilirsiniz.
2- Harici CSS
Harici CSS (External CSS), web sayfalarında kullanılan CSS kodlarının ayrı bir dosyada saklanarak HTML sayfalarına bağlantı verilmesi yöntemidir. Bu yöntemde CSS kodları HTML sayfalarından ayrı tutulur ve harici bir .css dosyasında depolanır.
Örneğin:
<!DOCTYPE html>
<html>
<head>
<title>Web Sayfası</title>
<link rel=”stylesheet” type=”text/css” href=”stil.css”>
</head>
<body>
<!– Sayfa içeriği buraya –>
</body>
</html>
Yukarıdaki örnekte, stil.css adlı bir CSS dosyası oluşturulmuş ve <link> etiketi ile HTML sayfaya bağlantı verilmiştir. Bu bağlantı, tarayıcıya CSS dosyasını yüklemesini ve HTML sayfasına uygulamasını söyler.
3- Satır içi CSS
Satır içi CSS (Inline CSS), HTML etiketlerinin içinde doğrudan stil özelliklerinin belirlendiği bir CSS yöntemidir. Bu yöntemde, stil özellikleri doğrudan HTML etiketlerinin “style” özelliği kullanılarak belirtilir.
Örneğin:
Metin Rengi ve Arka Plan Rengi:
<p style=”color: red; background-color: yellow;”>Bu bir örnek paragraftır.</p>
Yukarıdaki örnekte, <p> etiketine satır içi CSS kullanarak metin rengini kırmızı (color: red;) ve arka plan rengini sarı (background-color: yellow;) olarak belirledik.
Yazı Tipi ve Yazı Tipi Boyutu:
<h1 style=”font-family: Arial, sans-serif; font-size: 24px;”>Başlık</h1>
Yukarıdaki örnekte, <h1> başlığına satır içi CSS kullanarak yazı tipini Arial (font-family: Arial, sans-serif;) ve yazı tipi boyutunu 24 piksel (font-size: 24px;) olarak belirledik.
Kenarlık ve Dolgu:
<div style=”border: 1px solid black; padding: 10px;”>Bu bir div örneğidir.</div>
Yukarıdaki örnekte, <div> etiketine satır içi CSS kullanarak kenarlığını 1 piksel kalınlığında siyah (border: 1px solid black;) ve dolgusunu 10 piksel (padding: 10px;) olarak belirledik.
Profesyonel Web Tasarım hizmeti almak için bizimle iletişime geçebilirsiniz.
Antalya Medya Ajans: Instagram
İlginizi Çekebilir 👇
👉 En Etkili 4 WordPress Kötü Amaçlı Yazılım Temizleme Eklentisi 2023
👉 Anahtar Kelime Araştırması Yapmak İçin En İyi 7 Araç 2023