CSS (Cascading Style Sheets) adalah kode yang Anda gunakan untuk memberikan gaya pada halaman web Anda. Dasar-dasar CSS akan menjelaskan apa sajakah yang Anda butuhkan untuk memulai. Kami akan menjawab pertanyaan-pertanyaan seperti: Bagaimana saya dapat membuat teks saya menjadi berwarna hitam atau merah? Bagaimana saya dapat membuat konten saya tampil sedemikian rupa pada layar? Bagaimana saya dapat mendekor halaman web saya dengan latar belakang gambar atau warna-warna?

Apakah CSS itu?

Seperti HTML, CSS bukanlah sebuah bahasa pemrograman. CSS juga bukanlah sebuah bahasa markup — ia adalah sebuah bahasa style sheet. Ini berarti dengan CSS, Anda dapat mengaplikasikan gaya pada elemen-elemen yang ada dalam dokumen-dokumen HTML. Sebagai contoh, untuk membuat teks pada seluruh elemen paragraf di sebuah halaman HTML menjadi berwarna merah, Anda akan menuliskan CSS sebagai berikut:

p {
  color: red;
}

Salin ketiga baris dari kode CSS tersebut ke dalam sebuah file baru di teks editor Anda, kemudian simpan file tersebut sebagai style.css di direktori styles Anda.

Namun kita masih perlu untuk mengaplikasikan CSS tersebut ke dokumen HTML Anda. Apabila tidak, CSS tersebut tidak akan memengaruhi bagaimana browser akan menampilkan dokumen HTML tersebut. (Apabila Anda belum mengikuti projek kami, bacalah Dealing with files dan HTML basics untuk mencari tahu apakah yang perlu Anda lakukan sebelumnya.)

  1. Bukalah file index.html Anda dan letakkan baris berikut di suatu tempat di bagian head (di antara tag <head> dan </head>):
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Simpan index.html dan bukalah halaman tersebut di browser Anda. Anda seharusnya melihat sesuatu seperti berikut:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Apabila teks paragraf Anda sekarang berwarna merah, selamat!  Anda baru saja menulis CSS pertama Anda dengan sukses.

Bagian-bagian dari sebuah CSS ruleset

Marilah kita lihat CSS di atas dengan sedikit lebih detil:

Seluruh struktur di atas disebut sebagai sebuah rule set (sering juga disebut sebagai "rule" untuk lebih singkatnya). Lihatlah nama-nama dari masing-masing bagian individual:

Selector
Nama elemen HTML di awal rule set. Selector akan memilih satu atau lebih elemen untuk diberikan gaya (dalam kasus ini, elemen ini adalah elemen p). Untk memberikan gaya pada elemen berbeda, Anda dapat mengubah selector sesuai dengan elemen yang Anda inginkan.
Declaration
Sebuah peraturan seperti color: red; yang menentukan properti manakah dari sebuah elemen yang ingin Anda berikan gaya.
Properties
Cara-cara yang dapat Anda lakukan untuk memberikan gaya terhadap elemen HTML yang diberikan. (Dalam kasus ini, color adalah properti dari {elemen {htmlelement("p")}}.) Pada CSS, Anda memilih properti manakah yang ingin Anda pengaruhi di peraturan Anda.
Property value
Di sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada banyak sekali nilai-nilai color selain red).

Perhatikan juga bagian-bagian lain dari sintaks di atas:

  • Masing-masing rule set (selain selector) harus dibungkus dengan sepasang kurung kurawal ({}).
  • Dalam masing-masing deklarasi, Anda harus menggunakan tanda titik dua (:) untuk memisahkan properti dari nilai-nilainya.
  • Dalam masing-masing rule set, Anda harus menggunakan tanda titik koma (;) untuk memisahkan satu deklarasi dari deklarasi selanjutnya.

Untuk memodifikasi banyak nilai properti sekaligus, Anda hanya perlu untuk menuliskannya dengan pemisah tanda titik koma, seperti ini:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Memilih banyak elemen

Anda juga dapat memilih lebih dari satu tipe elemen dan mengaplikasikan sebuah rule set untuk semua tipe elemen. Untuk melakukannya, Anda dapat menuliskan lebih dari satu selector dipisahkan dengan tanda koma. Sebagai contoh:

p,li,h1 {
  color: red;
}

Bermacam-macam tipe selector

Ada banyak sekali tipe-tipe selector yang berbeda-beda. Di atas, kita hanya mempelajari element selectors, yang memilih seluruh elemen dari tipe yang diberikan di dokumen HTML yang diberikan. Namun kita dapat membuat pilihan yang lebih spesifik daripada itu. Berikut adalah beberapa tipe selector lain yang sering dijumpai:

Nama selector Apa yang dipilih Contoh
Element selector (kadang-kadang juga disebut sebagai tag atau type selector) Seluruh elemen HTML dari tipe yang diberikan. p
Memilih <p>
ID selector Elemen pada halaman dengan ID yang diberikan (pada halaman HTML yang diberikan, Anda hanya boleh memiliki satu elemen per ID). #my-id
Memilih <p id="my-id"> atau <a id="my-id">
Class selector Satu atau lebih elemen pada halaman dengan kelas yang ditentukan (banyak class instances yang dapat muncul di sebuah halaman). .my-class
Memilih<p class="my-class"> dan <a class="my-class">
Attribute selector Satu atau lebih elemen pada halaman dengan atribut yang ditentukan. img[src]
Memilih <img src="myimage.png"> namun tidak memilih <img>
Pseudo-class selector Satu atau lebih elemen yang ditentukan, namun hanya ketika elemen tersebut sedang berada pada state tertentu, seperti sedang di-hover. a:hover
Memilih <a>, namun hanya ketika mouse pointer sedang meng-hover link.

Ada banyak sekali selector lain yang dapat dieksplor, dan Anda dapat menemukan daftar yang lebih detil di Selectors guide kami.

Fonts dan teks

Setelah mengeksplor dasar-dasar CSS, mari kita tambahkan aturan-aturan lain dan informasi pada file style.css kita agar contoh yang kita buat memiliki tampilan yang lebih baik. Kita dapat memulai dengan membuat fonts dan teks kita untuk terlihat sedikit lebih baik.

  1. Pertama-tama, kembalilah dan temukan keluaran dari Google Fonts yang Anda simpan di tempat yang aman. Tambahkan elemen <link> di suatu tempat pada bagian head dari index.html Anda (di manapun di antara tag <head> dan </head>). Elemen link tersebut akan terlihat seperti ini:
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. Selanjutnya, hapus aturan yang sudah ada yang Anda miliki di file style.css.
  3. Tambahkan baris berikut, dan ubah baris placeholder dengan font-family sungguhan yang Anda dapatkan dari Google Fonts. (font-family berarti jenis font yang ingin Anda gunakan untuk teks.) Aturan ini mengatur jenis font dan ukuran font dasar secara global untuk seluruh halaman (karena <html> merupakan parent element dari seluruh halaman, dan semua elemen di dalam halaman tersebut mewarisi font-size dan font-family yang sama):
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts
    }

    Catatan: Apapun yang ada di dalam sebuah dokumen CSS antara /* dan */ adalah komentar CSS, yang akan diabaikan oleh browser ketika browser sedang mengolah kode untuk ditampilkan. Komentar berguna bagi Anda untuk menulis catatan-catatan yang membantu terkait apa yang sedang Anda lakukan.

  4. Sekarang kita akan menentukan font size untuk elemen-elemen berisi teks yang ada di dalam body HTML (<h1>, <li>, dan <p>). Kita juga akan menengahkan posisi teks pada heading dan menentukan line height serta letter spacing pada konten bagian body agar dapat lebih mudah dibaca:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

Anda dapat menyesuaikan nilai-nilai px tersebut untuk mendapatkan desain yang Anda inginkan, namun secara umum desain Anda seharusnya akan terlihat seperti ini:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Semua tentang boks

Satu hal yang Anda akan sadari tentang menulis CSS adalah banyak hal dalam CSS sebenarnya terkait dengan boks — mengatur ukuran, warna, posisi, dan lain-lain. Kebanyakan dari elemen-elemen HTML yang ada di halaman Anda dapat dilihat sebagai banyak boks yang saling menumpul di atas satu sama lain.

a big stack of boxes or crates sat on top of one another

Pada prinsipnya, susunan CSS didasari oleh box model. Masing-masing blok akan menempati tempat di halaman Anda dengan properti sebagai berikut:

  • padding, ruang di sekitar konten (e.g., di sekitar teks paragraf)
  • border, garis solid yang ada di luar padding
  • margin, ruang di luar elemen

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

Pada bagian ini kita juga menggunakan:

  • width (lebar dari sebuah elemen)
  • background-color, warna di belakang konten dan padding sebuah elemen
  • color, warna dari konten elemen (biasanya berupa teks)
  • text-shadow: mengatur drop shadow pada teks di dalam elemen
  • display: mengatur tampilan sebuah elemen (untuk sekarang, jangan mengkhawatirkan hal ini)

Ayo kita mulai menambahkan lebih banyak CSS pada halaman kita! Terus tambahkan aturan-aturan baru sampai ke bagian bawah halaman, dan jangan takut untuk bereksperimen dengan menggonta-ganti nilai-nilai untuk melihat bagaimana hasilnya.

Mengganti warna halaman

html {
  background-color: #00539F;
}

Aturan ini mengatur warna latar belakang seluruh halaman. Gantilah kode warna di atas menjadi warna apapun yang Anda pilih ketika Anda merencanakan situs Anda.

Mengatur body

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Sekarang kita akan mengatur elemen <body>. Ada beberapa deklarasi di sini, jadi mari kita bahas semuanya satu per satu:

  • width: 600px; — aturan ini memaksa body untuk selalu memiliki lebar sepanjang 600 piksel.
  • margin: 0 auto; — ketika Anda mengatur dua nilai pada dua properti seperti margin atau padding, nilai pertama akan memengaruhi sisi atas dan bawah dari elemen (pada contoh ini, buatlah 0), dan nilai kedua akan memengaruhi sisi kiri dan kanan  (di sini, auto adalah sebuah nilai khusus yang dapat membagi ruang horizontal yang ada secara adil antara kiri dan kanan). Anda juga dapat menggunakan satu, tiga, atau empat nilai seperti yang didokumentasikan di sini.
  • background-color: #FF9500; — sama seperti sebelumya, aturan ini menentukan warna latar belakang elemen. Kita sudah menggunakan warna merah kejinggaan untuk bagian body, namun teruslah bereksperimen.
  • padding: 0 20px 20px 20px; — kita memiliki empat nilai yang mengatur padding untuk membuat sedikit ruang di sekitar konten kita. Saat ini, kita menentukan tidak ada padding pada sisi atas dari body, dan ada padding sepanjang 20 piksel di sisi kiri, bawah, dan kanan. Nilai-nilai di atas mengatur bagian atas, kanan, bawah, dan kiri secara berurutan.
  • border: 5px solid black; — aturan ini mengatur border setebal 5 piksel berwarna hitam di seluruh sisi body.

Mengatur posisi dan memberikan gaya pada judul halaman utama kita

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Anda mungkin sudah menyadari bahwa ada jarak yang cukup jelek di bagian atas body. Hal tersebut terjadi karena beberapa browser mengaplikasikan gaya yang bersifat default ke elemen <h1> element (salah satunya), meskipun Anda belum memberikan CSS apapun sama sekali! Kedengarannya buruk, namun kita juga menginginkan halaman web yang belum diberikan gaya juga memiliki keterbacaan yang mendasar. Untuk menghilangkan jarak tersebut, kita dapat merubah gaya default tersebut dengan mengatur  margin: 0;.

Selanjutnya, kita mengatur bagian atas dan bawah padding menjadi 20 piksel, dan membuat warna dari teks heading agar sama dengan warna latar belakang HTML.

Sebuah properti menarik yang kita gunakan adalah text-shadow, di mana properti ini akan mengaplikasikan bayangan teks ke konten teks dari sebuah elemen. Empat nilai dari properti tersebut adalah sebagai berikut:

  • Nilai piksel pertama mengatur horizontal offset bayangan dari teks — seberapa jauh bayangan tersebut berada (secara horizontal): sebuah nilai negatif seharusnya akan memindahkan bayangan tersebut ke sisi kiri.
  • Nilai piksel kedua mengatur vertical offset bayangan dari teks — seberapa jauh bayangan tersebut berada (secara vertikal), pada contoh ini, sebuah nilai negatif akan memindahkannya ke atas.
  • Nilai piksel ketiga mengatur blur radius dari bayangan — nilai yang lebih besar akan membuat bayangan yang lebih kabur.
  • Nilai keempat mengatur warna dasar dari bayangan.

Cobalah untuk bereksperimen dengan berbagai nilai berbeda dan lihat hasilnya!

Memposisikan gambar ke tengah

img {
  display: block;
  margin: 0 auto;
}

Akhirnya, kita akan memposisikan gambar ke tengah untuk membuatnya terlihat lebih baik. Kita dapat menggunakan trik  margin: 0 auto lagi seperti yang telah kita lakukan pada bagian body, namun ada satu hal lagi yang perlu dilakukan. Elemen <body> adalah block level, di mana elemen tersebut menempati ruang di halaman dan kita juga dapat mengaplikasikan margin dan nilai-nilai spacing lain pada elemen tersebut. Di sisi lain, gambar adalah contoh dari inline element, yang berarti kita tidak dapat melakukan hal yang sama. Sehingga untuk mengaplikasikan margin pada gambar, kita harus memberikan gambar tersebut perlakuan seperti block level menggunakan display: block;.

Catatan: Jangan khawatir apabila Anda belum dapat memahami display: block;dan perbedaan antara block-level dan inline. Anda akan memahaminya seiring dengan Anda mempelajari CSS lebih dalam. Anda dapat menemukan lebih lanjut tentang nilai-nilai display yang tersedia di halaman referensi display kami.

Kesimpulan

Apabila Anda sudah mengikuti seluruh instruksi di artikel ini, Anda seharusnya memiliki sebuah halaman yang tampak seperti ini (Anda juga dapat melihat versi kami di sini):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

Apabila Anda mengalami kebingungan, Anda dapat selalu membandingkan hasil Anda dengan contoh sampel kode kami di Github.

Di sini, kita hanya baru saja membahas sedikit tentang CSS. Untuk mempelajari lebih lanjut, kunjungi halaman CSS Learning topic milik kami.

 

Di modul ini

 

Tag Dokumen dan Kontributor

Tag: 
Kontributor untuk laman ini: galuhsahid
Terakhir diperbarui oleh: galuhsahid,