Bazen bir noktayı vurgulamak bazen de yazının bir bölümünü aydınlatmak için yazı renklerini değiştiririz.
Web sitenizi farklı yazı tipi renkleri ile süslemek mi istiyorsunuz? Bunu CSS kullanarak yapabilirsiniz. CSS, Basamaklı Stil Sayfaları anlamına gelir ve herhangi bir web sitesinin stilini oluşturmak ve yönetmek için kullanılan varsayılan dildir.
Bir HTML belgesine CSS uygulamanın üç yöntemi vardır. Bunlar satır içi CSS, dahili/gömülü CSS ve harici CSS’dir.
İlginizi çekebilir: CSS Metin (Text) Biçimlendirme
Bu yazı size metinlerin rengini değiştirmek için CSS kodlarını nasıl kullanacağınız gösterecektir.
Satır içi CSS kullanarak Yazı Rengini Değiştirme
CSS’de yazı tipi rengini değiştirmek için color özelliğinin değerini ayarlamak üzere bir CSS kuralı oluşturmanız gerekir.
Satır içi yöntem, hemen hemen her öğeye uygulayabileceğiniz stil özelliğini kullanır. HTML paragrafının yazı tipi rengini kırmızıya ayarlayan bir örnek:
1 2 3 | <p style="color: red;">Tasarım Kodlama</p> |
aynı kodları HEX kullanarak yada RGBA kullanarak da yazabiliriz.
1 2 3 4 5 | <p style="color: red;">Tasarım Kodlama</p> <p style="color: #FF0000;">Tasarım Kodlama</p> <p style="color: rgba(255,0,0,1);">Tasarım Kodlama</p> |
İkinci Yöntem Dahili/Gömülü CSS
Bu yöntemi, bir HTML öğesinin birden fazla örneğini etkileyen ancak yalnızca tek bir sayfada etkileyen CSS kuralları oluşturmak istediğinizde kullanabilirsiniz. CSS kuralları daha sonra bir stil öğesi kullanılarak HTML sayfasının başlığına yazılır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="tr"> <head> <style> p{ color:red; } .ornek{ color:blue; } </style> </head> <body> <p>Tasarım Kodlama</p> <p class="ornek">Tasarım Kodlama</p> </body> </html> |
Örnek 2: Tablo içindeki yazı rengini değiştirme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="tr"> <head> <style> table{ color:red; } </style> </head> <body> <table border=1> <tr> <td>merhaba</td> <td style="color:green;">merhaba</td> <td>merhaba</td> </tr> </table> </body> </html> |
Üçüncü Yöntem: Harici CSS
Aynı efekti elde etmenin üçüncü yolu, harici bir CSS stil sayfası kullanmaktır. Bir metin düzenleyici kullanarak “.css” uzantılı bir dosya oluşturun. Yaygın uygulama, bu dosyaya stylesheet.css gibi bir ad vermektir, ancak “.css” uzantısını koruduğunuz sürece ona herhangi bir ad verebilirsiniz.
Örneğin, harici bir stil sayfası kullanarak gövde metninizi yeşile boyamak için, CSS kuralına şu şekilde yapıştırmanız yeterlidir:
1 2 3 | p { color: blue } |
HTML belgenizde, HTML başlık öğesi içinde stil sayfanıza bir bağlantı eklemelisiniz:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <p>Merhaba Dünya</p> </body> </html> |
CSS’de yazı tipi rengini değiştirmek için size üç yöntem gösterdik.
CSS ve HTML kullanarak yazı tipi rengini değiştirme konusunda uzmanlaştıktan sonra, HTML’de yazı tipi boyutunu değiştirme konusunda uzmanlaşmak isteyebilirsiniz.
Yorum Yap