Belajar Dasar-Dasar CSS

Pengantar

CSS merupakan alat sederhana yang digunakan untuk mempercantik tampilan website kita. CSS bukan sebuah bahasa pemrograman, melainkan sintak yang didesain khusus untuk membuat tampilan website kita jadi jauh lebih menarik. Pada saat ini, mayoritas website didunia menggunakan CSS untuk mendesain halamannya. Penasaran, bagaimana cara menggunakan CSS untuk website yang Anda buat? ayo baca sampai tuntas.

Prasyarat

Sebelum mengikuti tutorial ini, Anda diwajibkan memiliki pengetahuan dasar tentang penggunaan HTML.

Defisini

CSS merupakan singkatan dari Cascading Style Sheet. Sintak CSS biasa disisipkan pada tag-tag html atau disertakan pada tag html dengan tujuan utama untuk memperindah HTML. CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Dikarenakan kebutuhan tersebut, maka dibuatlah CSS.

Jika sintak HTML adalah tulang, maka CSS adalah daging dan kulit yang membungkus tulang tersebut. Bayangkan Anda ketemu dengan tulang yang bisa berjalan, menakutkan bukan? nah, CSS membuat HTML jadi tidak menakutkan, jadi nyaman untuk dilihat.

Bahasa ini sangat dekat dengan kehidupan sehari-hari kita, apalagi bagi kita yang terbiasa mengakses internet setiap harinya. Apa yang Anda lihat pada halaman ini, semuanya disajikan dengan perpaduan apik antara HTML dan CSS.

Mulai menerapkan CSS

Untuk memulai CSS, mari kita siapkan dulu alat tempurnya. Sama seperti Anda koding menggunakan HTML, css relatif membutuhkan alat sederhana. Aplikasi pertama yang perlu Anda siapkan adalah teks editor seperti visual studio code, sublime, atom, atau yang lainnya. Kemudian yang perlu Anda siapkan lainnya adalah web browser seperti google chrome, mozilla firefox, atau opera. Semuanya disesuaikan dengan selera Anda masing-masing.

Sintak CSS

Contoh sintak CSS

Silakan perhatikan, berikut ini adalah contoh dari sebuah sintak CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Struktur Umum Sintak CSS

Perhatikan gambar berikut (sumber : w3school)

Sintak CSS biasanya terdiri dari selector, property, dan juga value.

  1. Selector merupakan target dari penerapan CSS-nya. Selector biasanya diisi oleh tag, class, atau id. Jika selector diisi oleh tag, maka sintak css tersebut akan berpengaruh terhadap semua tag html yang diatur style-nya. Namun jika ditempatkan dalam sebuah class maupun id, dia hanya akan berpengaruh pada id atau class yang telah ditentukan saja.
  2. Property berisi tentang atribut apa yang akan diubah. Contohnya, apakah dia akan mengubah warna, warna latar, ukuran font, atau jenis font.
  3. Value berisi nilai dari property yang akan diubah style-nya. Value bisa diisi oleh warna, ukuran, jenis font dan lainnya.

Contoh 1 : Implementasi CSS

Silakan coba code berikut pada text editor Anda, kemudian simpan dalam format .html dan jalankan pada web browser

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Hi,</p>
<p>Anda sedang berlajar CSS bersama Prilude Academy</p>

</body>
</html>

Tampilan website-nya akan seperti berikut

Dimana menerapkan CSS?

Ada tiga tempat, dimana kita bisa menerapkan CSS.

  1. Eksternal CSS, file css ditempatkan diluar dari file html. Biasanya disimpan dalam format .css
  2. Internal CSS, kode css disematkan pada file html. Biasanya ditempatkan diantara tag <head> dan </head>
  3. Inline CSS, penempatan kode CSS langsung pada tag html-nya

Eksternal CSS

Buatlah sebuah file html, kemudian isi sintak-nya sebagai berikut. Simpan dalam file bernama index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>Ini adalah judul</h1>
<p>Ini adalah isi dari judul-nya</p>

</body>
</html>

Kemudian, buat file css dengan nama mystyle.css. Pastikan simpan file tersebut pada folder yang sama dengan file html yang dibuat. Kemudian setelah itu, masukan sintak berikut

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Jalankan file tersebut, output dari kode program tersebut bisa Anda lihat dibawah ini

Internal CSS

Untuk contoh implementasi dari CSS secara internal, silakan buat sintak seperti pada kode dibawah

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>Bebek, bebek apa yang jalannya selalu muter ke kiri terus?</h1>
<p>Bebek dikunci stang :( </p>

</body>
</html>

Output dari sintak tersebut, adalah sebagai berikut

Inline CSS

Silakan tuliskan source code berikut

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Ini dikasih warna biru</h1>
<p style="color:red;">Ini warna merah</p>

</body>
</html>

Output dari sintak tersebut adalah

About the Author

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You may also like these

No Related Post

Mulai Chat
Butuh Bantuan?
Hi, selamat datang di Prilude Academy. Ada yang bisa kami bantu?

Kami siap membantu Anda pada jam kerja :)