FrontEnd Developer RoadMap – CSS3 Tutorial 4 Inline CSS Yazmak

Merhabalar, bu yazımla beraber CSS tanımlamalarına başlıyoruz. Bir Html belgesi için 3 tip CSS tanımlaması yapılabilir. Bunlardan ilki, kodlama yaptığımız Html dosyası içinde etiketlere doğrudan etki edecek CSS kodlarının yazımıdır. Bunu Inline(Satır İçi) CSS yazmak diye isimlendirebiliriz.

Bir önceki Html bölümünde olduğu gibi CSS3 Tutorial isminde bir proje klasörü yaratıyorum. Her yazıyı ayrı bir proje klasörü olarak ele alacağım. Her klasör içinde ekstra bir durum olmazsa bir index.html ve style.css dosyası bulunacak.

index.html dosyamız içine aşağıdaki kodlamaları ekleyelim. Sonrasında kodları inceleyelim.

Bir Html dosyası içinde etiketin doğrudan kendi içinde style attribute’unu kullanarak yazdığımız CSS’e Inline(Satıriçi) CSS deriz.

Inline CSS, etiketlerin style attribute’una uygulanır.

<h1 style="color: blue; font-size: 15px;">Brainy Tech CSS Tutorial</h1>
<h2 style="color: brown; font-size: 30px;">Inline CSS Yazmak</h2>

Yukarıdaki şekilde CSS değer atamaları yapılabilir.

Dikkat etmemiz gereken nitelik : değer şeklinde bir tanımlama yapıldığı ve her yeni niteliğin noktalı virgül ile ayrıldığıdır. Burada CSS özelliklerine ayrıca değinilecektir. Şimdilik sadece yazım şekillerine odaklanınız.

Şimdi Live Server ile Html dosyamızı local sunucumuzda ayağa kaldırıp sonuca bir bakalım. Live Server ile nasıl çalışıp kodlamalarımızın ön izlemelerini yaptığımızı daha önceki Html bölümünde işlemiştik. Eksiğiniz var ise göz atabilirsiniz.

Çıktımız aşağıdaki gibi olacaktır.

Html ile temel iskeletini oluşturduğumuz sayfaları artık zevkimize göre dekore etme işlemini CSS ile gerçekleştirmeye başlıyoruz.

Bu şekilde istediğimiz her etiketin CSS değerlerine yerinde müdahale edip değerleri değiştirebiliriz.

Bir sonraki yazımda görüşmek üzere.