Tips yang (Tidak) Perlu Diketahui Tentang CSS

Cascading Style Sheets atau CSS adalah bahasa desain yang sering digunakan untuk membuat halaman Web agar telihat lebih indah dan rapi.

Dengan menggunakan CSS, kalian dapat mengatur warna, Font dan gambar Background, dll.

CSS sangatlah berbeda dengan HTML. HTML digunakan untuk membuat struktur halaman Web sedangkan CSS digunakan untuk menambahkan Style/tampilan halaman Web.


Keuntungan Dalam Menggunakan CSS

CSS dapat membuat Website mudah dikelola (Bagi pengembangnya).

Pada artikel ini, saya akan menunjukkan cara membuat Style kedalam halaman Web dengan menggunakan Cascade Style Sheet. Semua informasi Style untuk Website atau aplikasi kalian akan ada pada file yang memiliki nama "style" dan berekstensi ".css".

Pertama, kalian perlu membuat sebuah file yang bernama "style.css".

Selanjutnya, kalian perlu menautkan file CSS tersebut ke dalam file ".html". Hal ini dapat dilakukan dengan menggunakan kode berikut. Ingatlah bahwawasannya saya meletakkan kodenya di antara tag <head>:

<head><link rel="stylesheet" href="style.css"></head>


Setelah membuat stylesheet dan menautkannya ke file ".html", kalian dapat mulai menyusun Style untuk halaman Web kalian. Contoh: Mari kita ubah warna heading pertama dengan kode berikut:

h1 {
    color: blue;
}

p {
    color: coral;
}


Tips: Style sheet tidak berfungsi? Apakah kalian sudah menggunakan dua tanda kutip dengan benar? Pastikan kalian sudah menuliskan atribut rel="stylesheet" dan href="style.css" serta nama file sudah benar.

Nama yang benar untuk file Style sheet pada contoh kali ini adalah "style.css". Pastikan file yang kalian buat serta file yang kalian tautkan memiliki nama file dan nama file eksternal yang sama.

Syntax pada CSS: Setelah memilih tag h1, pastikan bahwa kalian sudah memasukkan tanda kurung kurawal {..}. Setelah properti color perhatikan bahwa terdapat tanda titik dua : dan setelah nilai blue terdapat tanda titik koma ;.

Mengatur Font pada CSS

Properti font-family dapat digunakan untuk mengubah Font:

h1 {
    font-family: sans-serif;
}

p {
    font-family: courier;
}


Tips Syntax: Setelah kita memilih tag seperti h1, pastikan bahwa kalian sudah memasukkan tanda kurung kurawal {...}, setelah properti seperti color terdapat tanda titik dua : dan setelah nilai seperti blue terdapat tanda titik koma ;. Tanda hubung: Teks seperti font-weight dan font-size ditulis dengan tanda penghubung, jadi ingatlah untuk meletakkan tanda hubung -. Ukuran: Pada unit ukuran, Kalian perlu menggunakan unit ukuran seperti px, periksalah kembali apakah terdapat unit tersebut atau tidak. Jika kalian lupa, maka ukurun font tidak akan valid.

Mengatur List pada CSS

Jenis daftar (list) dapat ditulis dengan menggunakan properti list-style-type. Contoh:

ul {
    list-style-type: circle;
}

ol {
    list-style-type: upper-roman;
}


Tips: Pastikan kalian sudah memasukkan dan menuliskan property list-style-type serta tanda hubung di antaranya dengan benar. Tanda titik koma: Jangan lupa untuk memasukkan tanda titik koma ; di akhir nilai dan pastikan tanda tersebut adalah titik koma ;, bukan titik dua :.

Membuat Penanda List Custom pada CSS

Kalian dapat membuat Penanda pada List Custom dengan menggunakan properti list-style-image.

Menggunakan properti list-style-image mirip dengan memasukkan gambar ke halaman Web. Pertama, kalian harus menyiapkan gambar yang akan dijadikan penanda Custom. Selanjutnya, kalian harus menautkan gambar tersebut ke stylesheet.

Ingat juga bahwa gambar Custom yang kalian miliki harus berukuran kecil:

ul {
    list-style-image: url('gambar/penanda-custom.png');
}


Tips: Pastikan tanda petik tersebut berada di dalam tanda kurung. Nama folder: pastikan kalian telah memasukkan nama folder dengan benar tepat sebelum nama file. Jadi, jika file gambar kalian memiliki nama "penanda-custom.png" dan disimpan dalam folder bernama "gambar", maka kalian dapat memasukkan kode src="gambar/penanda-custom.png".

Mengatur Style Heading pada Tabel

Judul tabel dapat ditulis dengan menggunakan tag <th>. Contoh:

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <tr>
                <th>No</th>
                <th>Nama Lengkap</th>
                <th>Nama Panggilan</th>
            </tr>

            <tr>
                <td>1</td>
                <td>Qolbil Yasya El Hakim</td>
                <td>Yasya</td>
            </tr>
        </table>
    </body>
</html>


Kode CSS:

th {
    font-weight: 600;
}


Tips Urutan tag: Kalian tidak dapat langsung membuat table dengan tag <tr> atau <td>. Tag harus dibuat secara berurutan; Tag bagian luar akan adalah <table> diikuti dengan tag <tr> serta tag <td>.

Mengubah Font pada Tabel

Pada bagian ini, saya akan menunjukkan cara untuk mengubah Font pada tabel:

table {
    font-family : Helvetica, sans-serif;
}


Tips tanda Kurung: Ingatlah bahwasannya kita harus menggunakan tanda kurung kurawal {...} pada CSS!.

Cara Menggunakan Property table-border-collapse

Properti table-border-collapse dapat menentukan apakah garis batas pada tabel harus tetap terpisah atau di kecilkan menjadi satu garis batas:

table {
    border-collapse: collapse;
}


Tips Ejaan: Pastikan kalian sudah menuliskan nilai border-collapse dengan benar. Yaitu dengan tanda hubung antara dua kata -.

Mengubah Warna Tabel

Pada bagian ini, saya akan menunjukkan cara untuk mengubah warna Background dan Font dari Header pada tabel:

th {
    font-weight     : 800;
    background-color: #2695A6;
    color           : #ffffff;
}


Tips Ejaan: Pastikan kalian sudah menuliskan property background-color dengan benar yaitu dengan menggunakan tanda hubung. Warna: Apakah kalian sudah memasukkan tanda pagar # sebelum kode warna? Ingatlah bahwasannya dalam kode warna, kita tidak pernah menggunakan huruf "O". Disini kita menggunakan angka nol "0".

Kesimpulan

Masih terdapat banyak cara untuk dapat membuat Workflow agar menjadi lebih baik atau dapat meningkatkan pengetahuan kalian, jadi jangan berhenti belajar! Terimakasih.

Tulis Komentar

0 Komentar