HTML Yazı Rengi Nasıl Değiştirilir?

HTML, metninize renk eklemek çok kolaydır. Bu kısa makalede, Hex renk kodları, HTML renk adları, RGB ve HSL değerleri kullanarak HTML metninizin rengini nasıl değiştireceğinizi ele alacağız.

Hex(Onaltılık renk) Kodlarını Kullanarak metne Renk Verme

HTML metnini renklendirmenin en yaygın yolu, onaltılık renk kodları kullanmaktır (kısaca Hex kod). Renklendirmek istediğiniz metin öğesine (aşağıdaki örnekte bir paragraf) bir stil niteliği ekleyin ve renk özelliğini Hex kodunuzla kullanın. Aynı yöntemle RGB ve HSL renk kodlarını ekleyebilirsiniz.


<p style="color:#87cefa";>Mavi paragraf metni</p>
<p style="color:#ffa500";>Turuncu parağraf metni</p>

ÇIKTI:

Mavi paragraf metni

Turuncu parağraf metni

HTML Renk Adlarını Kullanarak Metne Renk Verme

Web sitenizin metnini renklendirmenin başka bir yolu da bir HTML renk adı kullanmaktır. HTML kodu benzerdir, sadece önceki adımdaki Hex kodunu kullanmak istediğiniz rengin adıyla (örneğimizde Açık Mavi) değiştirin. 140 adet renk adı belirlenmiştir. Bu renkler güvenlidir, yani bütün tarayıcılarda aynı gösterilir.


<p style="color:lightskyblue">Mavi paragraf metni</p> 
<p style="color:orange">Turuncu parağraf metni</p>

Mavi paragraf metni

Turuncu parağraf metni

HTML'de yazı rengi iki Türlü değiştirilir. Biri inline olarak HTML Etiketlere Style özelliği atanır Color değeri verilerek yazı rengi değiştirilir yada harici CSS dosya ile HTML Etiketlerin Rengi Değiştirilir.

Inline stil, HTML etiketlerinin içinde doğrudan stil özelliklerini kullanarak belirli bir elementin görünümünü değiştirmeye olanak sağlar. Bu stil, diğer stil yöntemlerine göre öncelikli olarak uygulanır. Inline stil kullanmak için şu adımları takip edebilirsiniz:

Değiştirmek istediğiniz HTML elementini belirleyin. Örneğin, bir

etiketi içindeki metin rengini değiştirmek istiyorsanız, inline stil kullanarak bunu yapabilirsiniz.

Seçtiğiniz HTML elementine style özelliğini ekleyin ve stil değerini belirtin.

Örnek olarak, bir paragrafın metin rengini doğrudan inline stil kullanarak kırmızı yapmak için aşağıdaki şekilde yapabilirsiniz:

	
<!DOCTYPE html>
<html>
<head>
    <title>Inline Stil Kullanımı</title>
</head>
<body>
    <p style="color: red;">Bu paragraf metni kırmızı renkte olacak.</p>
    <p>Bu paragraf metni varsayılan renkte kalacak.</p>
</body>
</html>

Yukarıdaki örnekte, ilk paragrafın metin rengi inline stil ile kırmızı olarak belirlenmiştir. İkinci paragraf ise herhangi bir stil belirtilmediği için varsayılan renkte kalacaktır.

Inline stil, hızlı bir şekilde belirli elementlerin görünümünü değiştirmek için kullanışlı olabilir, ancak stil özelliklerinin birden çok elementte tekrar tekrar kullanılması gerektiğinde, daha iyi bir yönetim için genellikle harici CSS veya <style> blokları tercih edilir.

HTML'de yazı rengini değiştirmek için CSS (Cascading Style Sheets) kullanılır. CSS, HTML içindeki elemanların görünümünü değiştirmek için kullanılan bir stildir. Yazı rengini değiştirmek için aşağıdaki adımları izleyebilirsiniz:

İlk olarak, HTML dosyanızda stil bilgilerini içeren bir <style> bloğu veya harici bir CSS dosyası oluşturun. Eğer harici bir CSS dosyası kullanacaksanız, bu dosyanın <head> bölümünde tanımlanmış olması gerekir. Örnek harici CSS dosyası bağlantısı:</style>



<head>
    <link rel="stylesheet" type="text/css" href="stil.css">
</head>

Yazı rengini değiştirmek istediğiniz HTML elementini belirleyin. Örneğin, tüm paragraf etiketlerindeki metin rengini değiştirmek istiyorsanız <p> etiketini hedefleyebilirsiniz.

Belirlediğiniz HTML elementini CSS kullanarak hedefleyin ve metin rengini ayarlayın. Yazı rengini değiştirmek için color özelliğini kullanabilirsiniz.

Örnek olarak, tüm paragraf metinlerinin rengini mavi yapmak için aşağıdaki kodu kullanabilirsiniz:



<!DOCTYPE html>
<html>
<head>
    <title>Yazı Rengi Değiştirme</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>Merhaba, bu bir örnek paragraf metnidir.</p>
    <p>Bu da başka bir paragraf metnidir</p>
</body>
</html>

Yukarıdaki örnekte, tüm <p> etiketleri için yazı rengi mavi olarak ayarlanmıştır. Dilerseniz farklı elementleri hedeflemek veya farklı renkler kullanmak için CSS kodlarınızı buna göre değiştirebilirsiniz.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET