FrontEnd Developer Road Map

FrontEnd Developer RoadMap – HTML 5 Tutorial 25 Style Attribute’u Kullanımı

Merhabalar, bu yazımda yine pek çok etiketin sahip olduğu attribute olan style’ı göreceğiz.

Html kodları oldukları haliyle çok düzdür. Daha öncede bahsettiğimiz gibi bir binanın iskeleti gibi bir görüntüye sahiptirler. Bu binayı boyamak istediğimiz tasarıma getirmek bizim elimizde. Html’de bunun olmasını style yani css kodları sağlar.

Css uygulayabileceğimiz her etiketin style attribute’u vardır. Amacımız burada CSS kodlarını göstermekten ziyade style attribute’ı yardımıyla CSS kodları nasıl yazılır bunu göstermek.

<p style=""> Murat Bilginer </p>

Etiket içinde bu şekilde style dedikten sonra = “” içine CSS değerleri yazılır.

Şimdi elimizdeki yazının rengini değiştirelim. Bunun için kullandığımız CSS kodu color’dır.

Style içinde CSS kodları

Nitelik : Değer; şeklindedir.

Yazılabilecek CSS niteliklerinin alabileceği belirli değerler vardır. Bunları yine kullandığımız CSS plugin’leri Emmet sayesinde kolayca görebiliriz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<p style="color:red;"> Murat Bilginer </p>

</body>
</html>

Bu sayfanın çıktısına bakalım.

Bir değer daha ekleyelim ve font büyüklüğünü değiştirelim. Bunu font-size ile yaparız. Değerleri ise pixel türünden alabilir.

<p style="color:red; font-size: 45px;"> Murat Bilginer </p>

Bu şekilde satır içinde her etiket için ayrı ayrı style kodları yazabiliriz.

Her değer sonrası noktalı virgül koymayı unutmayınız.

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

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 10 – Oly’nin PCR Sonucu Çıktı FCov Pozitif…

Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…

18 saat ago

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

5 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

5 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

5 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

7 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

7 gün ago