Posts

Menetapkan ukuran pada gambar 67 A praktek

Image
Menetapkan ukuran pada gambar Sekarang saatnya kita mulai terapkan apa yang baru kita pelajari. Langkah pertama mari kita ubah dimensi dari gambar yang kita tampilkan. Pada berkas  style.css , buat rule baru untuk selector  .featured-images  dengan properti dan nilai sebagai berikut: . featured - image {    width :   100 %;    max - height :   300px ; } Kemudian terapkan rule tersebut pada seluruh elemen gambar kecuali gambar logo kota Bandung yang terdapat di dalam elemen  <aside> . Untuk menerapkannya kita tuliskan  class  atribut dengan nilai  featured-image . <img src = "assets/image/history.jpg" class = "featured-image" alt = "sejarah" >   ...   <img   src = "assets/image/geografis.jpg"   class = "featured-image"   alt = "geografis" >   ...   <img   src = "assets/image/farm-house.jpg"   class = "featured-image"   alt = "farm house" >   ...   <img src = "ass

Menerapkan styling pada tabel riwayat 100

Image
  Menerapkan styling pada tabel riwayat Sebelumnya kita sudah membuat elemen tabel yang nantinya akan menjadi tempat informasi riwayat kalkulasi, namun tampilannya masih kurang baik. Kita akan merombaknya dengan menerapkan CSS pada elemen tersebut. Silakan buka berkas  style.css , kemudian tambahkan  rule  berikut: . history {    width :   80 %;    margin :   30px   auto   0   auto ;    overflow : scroll ; } Rule tersebut akan mengatur lebar 80% dari viewport pada elemen  <div>  yang menerapkan class  history . Kemudian terapkan pada properti  overflow  dengan nilai  scroll  sehingga elemen  <div>  akan memiliki  scroll bar  secara horizontal dan vertikal. Lalu tambahkan juga rule berikut pada  style.css : table {    border - collapse :  collapse ;    border - spacing :   0 ;    width :   100 %;    border :   1px  solid  #ddd; } Rule tersebut akan membuat tabel memiliki lebar  100%  terhadap parentnya dan menetapkan border pada tepian tabelnya. Lanjut kita tambahkan rule b