belajar css part2

Pada bagian kedua ini, kita akan belajar tentang cara menambahkan gaya yang lebih kompleks pada halaman web menggunakan CSS.

1. Box Model
   CSS menggunakan box model untuk menentukan ukuran dan jarak antar elemen. Setiap elemen HTML memiliki margin, border, padding, dan width/height yang dapat ditentukan dengan CSS.
   
   contoh:

   p {
     margin: 10px; /* jarak dari atas dan bawah */
     padding: 5px; /* jarak dari dalam */
     border: 2px solid black; /* garis tepi */
     width: 50%; /* lebar */
   }

2. Position
   CSS menyediakan empat pilihan posisi untuk elemen: static relative absolute dan fixed. Posisi static adalah posisi default yang tidak dapat diubah, sedangkan relative, absolute, dan fixed dapat digunakan untuk mengatur posisi elemen secara lebih spesifik.
   
   contoh:

   p {
     position: relative; /* posisi relatif terhadap posisi default */
     left: 10px; /* jarak dari kiri */
     top: 5px; /* jarak dari atas */
   }

3. Display
   CSS menyediakan pilihan display seperti block, inline, dan none yang dapat digunakan untuk mengatur bagaimana elemen akan ditampilkan. Elemen dengan display block akan mengambil seluruh lebar tersedia, sedangkan elemen dengan display inline hanya akan mengambil sebagian dari lebar tersedia.
   

   img {
     display: block; /* mengambil seluruh lebar tersedia */
   }
   
   span {
     display: inline; /* hanya mengambil sebagian dari lebar tersedia */
   }

4. Class dan ID
   CSS menyediakan selector class dan id yang dapat digunakan untuk menentukan elemen HTML yang akan diberi gaya. Class digunakan untuk menentukan beberapa elemen yang memiliki gaya yang sama, sedangkan id digunakan untuk menentukan satu elemen yang memiliki gaya yang unik.

   <p class="highlight">Ini adalah paragraf dengan gaya yang ditambahkan melalui class.</p>
   <p id="unique">Ini adalah paragraf dengan gaya yang ditambahkan melalui id.</p>

   dan css

   .highlight {
     background-color: yellow;
   }
   
   #unique {
     color: red;
   }

   Dalam contoh di atas, semua paragraf yang memiliki class "highlight" akan berlatar belakang kuning karena gaya yang diterapkan pada class .highlight, sementara paragraf yang memiliki id "unique" akan berwarna merah karena gaya yang diterapkan pada id #unique.
   
   
   
   Itulah beberapa cara untuk menambahkan gaya yang lebih kompleks pada halaman web menggunakan CSS. Selain teknik-teknik tersebut, masih banyak teknik lain yang dapat digunakan untuk membuat halaman web yang lebih interaktif dan menarik. Namun dengan menguasai dasar-dasar dari CSS dan teknik-teknik yang dibahas di sini, Anda sudah dapat membuat halaman web yang profesional dan menarik. Selamat belajar dan semoga sukses dalam pembuatan halaman web Anda!