Apa itu CSS?

CSS digunakan untuk mendesain situs web. Dengan CSS, Anda dapat mengubah hal-hal seperti warna, ukuran, dan spasi pada element HTML. Gambar disisi kiri hanya terdiri dari HTML saja. Dengan menerapkan CSS, Anda dapat menentukan style seperti tata letak, sesuai contoh yang ditampilkan disisi kanan.

Cara Kerja CSS

CSS ditulis dalam file terpisah dari HTML. Anda dapat menerapkan CSS ke element HTML dengan menentukan "dimana", "apa", dan "bagaimana" Anda ingin mengubahnya. Pada contoh dibawah, CSS diterapkan ke element <h1> ("dimana"), dan warnanya ("apa") diubah menjadi merah ("bagaimana"). Element HTML yang ditargetkan disebut sebagai Selector.

Warna

Mari kita pelajari property color (warna)!

Di CSS, warna ditentukan oleh nilai heksadesimal seperti color: #ff0000;. Anda tidak perlu menghafal nilai heksadesimal warna tersebut, karena Anda dapat mencarinya secara online.

Sintax CSS

Ada beberapa hal yang harus diingat saat menulis CSS.

Seperti HTML, Anda harus selalu mengindentasi code CSS seperti gambar di bawah. Selain itu, perhatikan bahwa anda harus menambahkan titik dua : di akhir property CSS dan titik koma ; diakhir baris seperti gambar dibawah.

Komentar CSS

Seperti di HTML, Anda dapat menulis komentar di file CSS.

Namun di CSS, komentar harus diapit oleh /* */.

Ukuran Font

Ukuran font dapat ditetapkan dengan property font-size.

Satuan umum untuk menentukan font-size adalah px (piksel).

Jenis Font

Dengan property font-family, Anda dapat menentukan jenis font.

Anda dapat melakukan ini dengan menetapkanfont-family: nama font; Jika nama font berisi spasi, Anda harus mengapitnya dengan tanda petik ganda.

Aneka ragam Font

Saat menetapkan property font-family, Anda dapat menentukan berbagai jenis font seperti serif dan sans-serif.

Anda tidak perlu mengingat nama font karena anda bisa mencarinya secara online.

Warna Latar Belakang

Property background-color memungkinkan Anda untuk mengubah warna latar belakang. Anda dapat menetapkan warna latar belakang seperti menetapkan property color. Selain itu, jika huruf yang sama memanjang seperti #dddddd, ini dapat disingkat menjadi #ddd.

Lebar dan Tinggi

Untuk mengubah lebar dan tinggi element, gunakan property width (lebar) dan height (tinggi). Unit kedua element ini dapat ditentukan dengan px, sama seperti font-size.

Menerapkan CSS ke Elemen Tertentu

Jika ada beberapa element <li> di code Anda, menerapkan CSS seperti gambar dibawah akan mengubah semua element <li> menjadi merah.

Jadi, bagaimana cara mengubah hanya satu element <li> menjadi merah?

Memberi Label pada Tag

Anda dapat melakukannya dengan memberi label pada element yang ditargetkan dengan menggunakan atribut class. Dengan menambahkan class ke tag HTML, Anda dapat menerapkan CSS yang berbeda ke setiap element. Saat menerapkan CSS ke class selector, perhatikan bahwa titik . diperlukan di depan nama class.

Menerapkan CSS ke Beberapa Tag

Seperti gambar diatas, Jika Anda menetapkan nama class yang sama kebeberapa element HTML, CSS yang sama akan diterapkan untuk semuanya.

Syntax untuk Class

Seperti disebutkan sebelumnya, nama selector class selalu dimulai dengan titik. Jika Anda lupa memberikan titik, CSS tidak akan diterapkan. Perhatikan bahwa selector class dimulai dengan titik, tetapi tag tidak demikian.

Kini Saatnya Membuat Situs Pertama Anda

Kini saatnya membuat situs pertama Anda!

Lihat gambar di atas untuk mendapatkan ide tentang apa yang akan Anda ciptakan.

Belajar HTML & CSS

 Memulai dengan HTML & CSS

   Selamat datang di dunia HTML & CSS yang seru!

Pada pelajaran kali ini,kita akan membuat situs web yang ditampilkan pada gambar dibawah.

Kelihatannya mungkin sulit,tapi jangan khawatir! Kami akan memandu Anda disetiap langkahnya.

https://sandisitorus.github.io/project1.github.io/kerangkaweb.html

Web diatas adalah contoh web paling sederhana dalam HTML & CSS.

Cara kerja HTML

Mari kita mulai pelajaran kita dengan HTML!

Aturan pertama penulisan code HTML adalah mengapit teks dengan tag. Tag dapat memberikan arti seperti judul atau tautan pada teks.

Tag Pembuka dan Penutup

Sebagian besar element HTML memerlukan sepasang tag, tag pembuka dan tag penutup, dengan teks disisipkan di antara keduanya.

Saat menggunakan tag penutup, pastikan untuk meletakkan /.

Tag Judul

Tag judul digunakan untuk memformat element judul.

Tag ini bervariasi mulai dari <h1> hingga <h6>, <h1> menjadi yang terbesar dan <h6> menjadi yang terkecil (※ h mewakili heading (judul)).

Tag Paragraf

Tag <p> menentukan paragraf (※ p mewakili paragraf).

Teks yang diapit oleh tag seperti <h2> dan <p> dimulai di baris baru.

Menggunakan Judul dan Paragraf

Tag <h1>...<h6> digunakan sesuai ukuran dan signifikansi judul seperti ditunjukkan di bawah. Untuk teks yang bukan merupakan judul, gunakan tag <p>.

Komentar

Teks yang diapit oleh <!-- --> menjadi komentar.

Komentar tidak ditampilkan di browser. Komentar sangat berguna untuk menjelaskan code Anda.

Tag Tautan(1)

Anda dapat dengan mudah membuat tautan dengan tag <a> (※ a mewakili anchor (penambat)).

Teks dalam tag <a> ditampilkan di browser sebagai teks tautan.

Tag Tautan(2)

Setiap tautan memiliki tujuan. Jadi, agar tautan berfungsi, Anda harus menentukan URL tujuan di element <a> dengan menambahkan atribut href. Seperti yang ditampilkan pada gambar di sisi kiri, URL tujuan masuk ke bagian url dari <a href="url">.

Atribut HTML

Pada HTML, Anda dapat menentukan atribut seperti href di tag pembuka (※ lihat gambar di sisi kiri).

Selalu letakkan nilai atribut dalam tanda kutip ganda ".

Tag Gambar

Tag <img> digunakan untuk menampilkan gambar.

Kita dapat menetapkan gambar dengan menentukan url di atribut src seperti berikut: <img src="url">. Perhatikan bahwa tag <img> tidak memerlukan tag penutup karena tidak ada teks yang diapit.

Daftar(1)

Anda dapat membuat daftar dengan mengapit teks dengan tag <li>.

Jangan khawatir, kita akan membahas tag <ul> di slide berikutnya.

Daftar(2)

Jenis daftar akan berubah tergantung pada tag yang Anda gunakan.

Dengan tag <ul> Anda dapat membuat daftar dengan bullet.

Jika element Anda "bersarang" seperti gambar dikiri bawah ini, element yang menutupi akan menjadi induk dan element yang ditutupi akan menjadi anak-nya.

Indentasi

Untuk element bersarang, praktik yang baik adalah mensejajarkan code dengan indentasi. Meskipun tidak diperlukan, indentasi dapat memudahkan Anda untuk melihat hubungan induk-anak, terutama pada saat code Anda sudah mulai banyak dan rumit

(※ untuk membuat indentasi, tekan tombol "tab" di awal baris).