CSS Nedir?
CSS, yani Cascading Style Sheets, web sayfalarının görünümünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. HTML’in yanında kullanılan CSS, web tasarımcılarına sayfalarını daha estetik ve kullanıcı dostu hale getirme imkanı sunar. CSS, ayrı bir dosyada veya HTML dosyasının içinde yer alabilir.
CSS Nasıl Kullanılır?
CSS kullanmak için birkaç farklı yöntem vardır:
1. Harici CSS Dosyası
Harici bir CSS dosyası oluşturarak, tüm web sayfalarınızda aynı stil kurallarını kullanabilirsiniz. CSS dosyasını oluşturduktan sonra, HTML dosyanızın <head> bölümünde aşağıdaki kodu eklemeniz yeterlidir:
<link rel="stylesheet" href="stil.css">
Bu şekilde, stil.css dosyasındaki kurallar tüm web sayfalarınıza uygulanır.
2. İç CSS
Eğer sadece belirli bir web sayfasında CSS kullanmak istiyorsanız, HTML dosyanızın <head> bölümüne <style> etiketi ekleyebilirsiniz. İç CSS kullanmak için aşağıdaki örneği inceleyebilirsiniz:
<style>
h1 {
color: red;
}
</style>
Bu örnekte, h1 başlıkları kırmızı renkte görünecektir.
3. İnline CSS
Eğer sadece belirli bir HTML elementine özel bir stil uygulamak istiyorsanız, o elementin style özelliğini kullanabilirsiniz. İnline CSS kullanmak için aşağıdaki örneği inceleyebilirsiniz:
<h2 style="color: blue;">Bu başlık mavi renkte olacak</h2>
Bu örnekte, sadece bu h2 başlığı mavi renkte görünecektir.
CSS Kodları Nelerdir?
CSS’de birçok farklı stil kodu bulunmaktadır. İşte bazı temel CSS kodları:
1. Renkler
Renkleri CSS ile belirlemek için birkaç farklı yöntem vardır. İsim, RGB, RGBA, HEX veya HSL değerleri kullanabilirsiniz. İşte birkaç örnek:
color: red; /* İsim */ color: #ff0000; /* HEX */ color: rgb(255, 0, 0); /* RGB */ color: rgba(255, 0, 0, 0.5); /* RGBA */ color: hsl(0, 100%, 50%); /* HSL */
2. Yazı Tipi
Yazı tipini CSS ile belirlemek için font-family özelliğini kullanabilirsiniz. Örneğin:
font-family: "Arial", sans-serif;
Bu örnekte, metinleriniz Arial yazı tipinde görünecektir. Eğer Arial yüklü değilse, sans-serif yazı tipi kullanılacaktır.
3. Boyutlar
Boyutları CSS ile belirlemek için width ve height özelliklerini kullanabilirsiniz. Örneğin:
width: 300px; height: 200px;
Bu örnekte, bir elementin genişliği 300 piksel, yüksekliği ise 200 piksel olacaktır.
CSS, web tasarımında oldukça önemli bir role sahiptir. Doğru kullanıldığında, web sitenizin görünümünü tamamen değiştirebilir ve kullanıcı deneyimini geliştirebilir. CSS kodlarını öğrenmek ve kullanmak, web tasarım becerilerinizi geliştirmeniz için önemli bir adımdır.