Assalamu'alaikum warrahmatullahi wabarakatuh.
Pada postingan kali ini saya akan menjelaskan lebih mendetail tentang CSS yang sebelumnya hanya dijelaskan sedikit.
- Kali ini kita akan memfokuskan pada bagian CSS, maka dari itu saya akan menggunakan file html yang telah saya buat sebelumnya. Anda bisa klik link ini.
- Ini adalah kriteria yang harus dipenuhi :
- Gunakan elemen H1 pada judul setiap halaman yang ditentukan warnanya dengan warna tertentu pada style.css.
- Kata pertama pada judul tiap halaman diberikan warna yang berbeda dengan warna kata yang lainnya.
- Setiap link pada bagian atas Navigasi internal diberikan warna tertentu yang sama.
- Setiap link pada bagian samping Navigasi external diberikan warna tertentu dan rata kanan.
- Elemen header dan footer memiliki warna backgrond yang sama.
- Link yang dilewati oleh mouse (on hover) diberikan ukuran font yang lebih besar dari sebelumnya dan diberikan warna background tertentu.
- Pertama, tambahkan elemen h1 menggunakan html pada judul tiap halaman, yaitu "Motivated Sloth".
- Kedua, untuk membedakan kata pertama dengan kata selanjutnya, gunakan elemen span untuk kata pertama, yaitu "Motivated". Jangan lupa untuk menambahkan link file CSS eksternal di dalam elemen head. Disini saya menamai file CSS eksternal dengan nama coba.css (lihat properti href).
- Ketiga, Untuk memberi warna pada tiap link yang terdapat pada elemen div dengan id "topnav", modifikasi lah tampilan navigasi internal dengan selector tersebut.
- Keempat, ini adalah html untuk navigasi di sebelah kanan. Navigasi kanan ini bagian dari elemen div yang memiliki properti class "sidebar" dan ul "kanan".
- Kelima, Ini adalah html keseluruhan dari halaman Home yang didalamnya meliputi header sampai footer, .
- Keenam, untuk memberi efek hover huruf yang membesar, ganti ukuran huruf. Disini saya menggunakan satuan em dengan value 1.2em yang terdapat dalam selector "ul.kanan li:hover" dan "#topnav nav li a:hover:not(.active)" .
NOTES : Poin utama dari postingan ini adalah menggunakan CSS eksternal.
Outputnya :
Karena kita menggunakan css eksternal, maka dari itu tambahkan properti color pada css dengan selector sebagai berikut :
Outputnya :
Ini adalah CSS yang digunakan untuk output di bawah.
Outputnya :
Ini adalah CSS yang digunakan :
Outputnya :
Untuk membuat background header dan footer sama, gunakan satukan elemen header dan footer dalam satu baris css dengan menggunakan tanda koma (,) dan css.
Outputnya :
Ini adalah CSS nya :
Outputnya :
Ini adalah outputnya :
HOME :
ABOUT :
CONTACTS :
FORM :
Wassalamu'alaikum warahmatullah wabarakatuh.
Fadilah Nur Imani.
