Ders 3: İlk Stillerimizi Tanımlıyoruz

Evet arkadaşlar şimdi CSS stilleri tanımlamayı öğrenmeye başlayabiliriz. Şimdi index.html sayfamızı ve stil.css sayfamızı editörümüz ile açalım. Dediğim gibi ben hız ve ücretsiz olması açısından, ayrıca kod renklendirme özelliği nedeniyle Notepad++ öneriyorum.Arkadaşlar bir önceki derste stil sayfamızı hmtl sayfamız içerisine import etmiştik Bu ne demek artık stil sayfasında tanımladığımız stilleri, html sayfamız içerisine çağırabilir ve bu şekilde elementlerimizi, divlerimizi stillendirebiliriz.

Arkadaşlar burada çok önemli bir nokta var. Stilleri tanımlarken bazı tasarımcılar CSS id lerden yararlanırken , bazıları ise CSS Classlardan yararlanır. İD sadece bir elemente atanabilirken, class, aynı sayfa içerisinde farklı ögelere atanabildiği için ben class kullanımını tavsiye ediyorum ve bu dersleri de class kullanımına göre hazırladım.

Bildiğiniz gibi, standart html elementleri vardır. Bunlar kısaca, body, p, h1, h2, a gibi elementlerdir. Bu tip standart html elementlerine stil sayfamızda stil tanımlarken aşağıdaki gibi bir yazım izliyoruz.

EVET ARKADAŞLAR ŞİMDİ AŞAĞIDAKİ ÖRNEĞİ İNCELERSENİZ, BURADA BODY ELEMENTİNE BİR STİL TANIMLIYORUZ. BODY ELEMENTİ SAYFAMIZIN GENEL ŞABLONUNU İFADE EDER VE AKSİ TANIMLANMADIĞI SÜRECE SAYFAMIZA KOYDUĞUMUZ TÜM ÖGELERİ ETKİLER.

Arkadaşlar, incelerseniz görmüşüzsünüzdür. Yazım kurallarımız aslında oldukça basit. CSS’de eğer HTML elementlerine bir stil veriyorsak, mesela burda bosy ye verdik, önce element adını yazıyoruz boşluk bırakıp süslü parantezimizi açıyoruz. Tanımlayıcı: değer; şeklinde satırlarımızı yazıyoruz. Mesela burada body elementine şu stilleri tanımlamışız.

body {
Sayfa genelinde arka plan olarak gümüş rengi kullanıyorum demişiz
Sayfa genelinde (aksi belirtilmedikçe) yazı tipi olarak Trebuchet kullanacağım demişiz
Sayfa genelinde font boyutu olarak aksi belirtilmedikçe 12 punto kullanacağım diyoruz
Sayfa genelinde aksi belirtilmedikçe font rengi olarak mor kullanacağım diyoruz.
}

EVET ŞİMDİ DE CSS SAYFAMIZI KAYDEDELİM, HTML SAYFAMIZI AÇALIM VE body TAGLARININ ARASINA SELAMLAR YAZALIM (Stillerimizin nasıl çalıştığını göreceğiz)

 

VEEEE SONUÇ YÜZ GÜLDÜRÜCÜ
EVET ŞİMDİ DE index.html SAYFANIZI TARAYICINIZDA ÇALIŞTIRIN BAKALIM SEÇTİĞİNİZ STİLLER ÇALIŞIYOR MU :) :) BAKIN ARKA PLAN GÜMÜŞ RENGİ, YAZILARIMIZ TREBUCHET 12 PİKSEL OLMUŞ VE YAZI RENGİ DE MOR:

ARKADAŞLAR EĞER SİZLERE YARDIMCI OLABİLİYORSAM DERSLERİN DEVAMI GELECEKTİR. HEPİNİZE İYİ ÇALIŞMALAR :)