Css Temel Bilgileri (Başlangıç)
CSS (Cascading Style Sheets) web sayfalarını stilize etmek için kullanılan bir dil ve HTML ile birlikte web geliştirme sürecinde sıklıkla kullanılır. CSS, belirli bir HTML elementinin (örneğin, bir div, bir yazı tipi, bir resim vb.) görünümünü değiştirebilir ve özelliklerini tanımlayabilir.
İşte CSS’te temel bilgiler:
CSS Syntax
CSS, bir selector (seçici) ve deklarasyon (bildirge) bloğu olmak üzere iki ana parçadan oluşur. Selector, stilini değiştirmek istediğiniz HTML elementlerini seçmenizi sağlar, deklarasyon bloğu ise belirtilen özellikleri ve değerleri içerir.
selector {
özellik: değer;
}CSS Özellikleri
CSS’de, bir HTML elementinin birçok özelliğini değiştirebilirsiniz. Özellikler, belirli bir elementin görünümünü değiştirmek için kullanılır. Bazı özellikler şunlardır:
- background-color
- color
- font-family
- font-size
- text-align
- border
- padding
- margin
CSS Selectors
Selectorlar, CSS’de bir HTML elementini seçmek için kullanılan bir yol sağlar. Bazı yaygın selectorlar şunlardır:
- element: belirli bir HTML elementini seçer. Örneğin, h1
- .class: belirli bir sınıftaki tüm HTML elementlerini seçer. Örneğin, .button
- #id: belirli bir id’ye sahip bir HTML elementini seçer. Örneğin, #header
- element, element: birden fazla elementi seçer. Örneğin, div, p
CSS Öncelikleri
Birden fazla CSS stil tanımı varsa, CSS öncelik kurallarına göre, hangi stilin uygulanacağını belirler. Öncelik kuralları şunlardır:
- Inline stil: HTML elementinin style özelliğinde tanımlanır.
- ID: #id selector’ı kullanarak tanımlanır.
- Class: .class selector’ı kullanarak tanımlanır.
- Element: HTML elementinin kendisi ile tanımlanır.
CSS Box Model
CSS kutu modeli, bir HTML elementinin içeriğinin nasıl sıralandığını ve öğenin dışındaki kenarlıklar, dolgular ve sınırlar gibi diğer bileşenleri nasıl içerdiğini tanımlar. Kutu modeli, bir elementin genişliği ve yüksekliğini belirler ve öğenin tasarımını özelleştirirken dikkate alınması gereken önemli bir konsepttir.
Bu temel bilgiler, CSS öğrenmeye başlamanıza yardımcı olabilir. Daha fazla özellik, selector ve öncelik kurallarını öğrenmek için pratik yapmak önemlidir.
