Cara Text dan Background Color CSS

Dhe997
Pada modul pengenalan CSS kita sudah mencoba bagaimana mudahnya mengganti warna pada teks yang ditampilkan. Sejujurnya tidak ada lagi yang perlu kita bahas disini. Kita dapat dengan mudahnya mengganti warna teks dengan properti color.
201912062016317d1478ff740b67bbf5cc20aad8622b25.png
Nilai dari properti color dapat berupa predefined color name atau sebuah numeric value dengan menggunakan RGB, RGBA, HEX, HSL, ataupun HSLA. Berikut sebagai contoh, seluruh elemen <p> akan diberi warna abu-abu (gray) dengan menggunakan beberapa cara yang ada:


  1. p { color: gray; }

  2. { color: #666666; }

  3. { color: #666; }

  4. p { color: rgb(102,102,102); }


Properti color dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya. Jadi kita bisa mengubah warna teks pada seluruh dokumen HTML dengan menerapkan properti color pada elemen <body>, seperti ini:


  1. body {

  2.    color: steelblue;

  3. }


Sehingga tampak seperti ini:
2019120620182321588b2d4335e9302a69da597b149d79.png

Background Color

CSS memperlakukan setiap elemen HTML seperti berada pada sebuah kotak (kita akan tahu lebih tentang ini pada pembahasan box model). Properti background-color dapat mengatur warna untuk background dari kotak tersebut. 
Sama seperti text color, kita dapat menspesifikasikan warna yang dipilih dengan numeric values atau dengan predefined color name. Properti background-color akan bernilai transparan jika tidak kita tetapkan.
Kebanyakan browser menetapkan nilai putih sebagai standar untuk nilai background-color, tetapi nilai standar tersebut dapat pengguna ubah melalui pengaturan browser-nya. Maka untuk memastikan website kita memiliki tampilan background putih, kita dapat terapkan nilai background-color: white; pada elemen <body>.
Biasanya kita juga menerapkan padding saat menetapkan background-color guna memberi jarak antara konten dan pinggiran kotak elemen.
2019120620203336439a0eb2f7e0f243ce2a7c06fc03ac.png

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <style>
    5. body {
    6. font-family: sans-serif;
    7. }
    8.  
    9. div#content {
    10. background-color: rgb(200, 200, 200);
    11. padding: 20px 15px;
    12. }
    13.  
    14. #content > h2 {
    15. background-color: #4c5450;
    16. padding: 15px;
    17. color: white;
    18. }
    19.  
    20. #content > h3 {
    21. background-color: #60d0a8;
    22. padding: 15px;
    23. color: white;
    24. }
    25.  
    26. #content > p {
    27. background-color: hsl(56, 62%, 85%);
    28. padding: 20px;
    29. }
    30. </style>
    31. </head>
    32. <body>
    33. <div id="content">
    34. <h2>Lorem Ipsum</h2>
    35. <h3>Dolor sit amet lorem ipsum</h3>
    36. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit, veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p>
    37. </div>
    38. </body>
    39. </html>

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.