Beranda
Coding

Cara Menggunakan CSS: Panduan Mempercantik Website untuk Pemula

CSS (Cascading Style Sheets) merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan web atau situs. Sebagai pengembang web, tentu Anda perlu tahu cara menggunakan CSS untuk mempercantik website.

Dengan CSS, Anda dapat mengubah warna, ukuran, layout, dan banyak elemen lainnya pada website Anda. Artikel ini akan memberikan panduan pemula untuk mempercantik website dengan CSS.

Heading Pembahasan:

  1. Memahami Struktur File CSS
  2. Menambahkan CSS pada Website
  3. Mengatur Warna dan Latar Belakang
  4. Menyesuaikan Ukuran dan Tampilan Huruf
  5. Menyesuaikan Layout dan Tata Letak

Cara Menggunakan CSS

Cara Menggunakan CSS

Berikut di bawah ini akan kami jelaskan bagaimana cara menggunakan CSS yang benar. Simak pembahasannya hingga selesai!

1. Memahami Struktur File CSS

Sebelum mulai mengatur tampilan website dengan CSS, ada baiknya jika Anda memahami struktur file CSS terlebih dahulu.

File CSS biasanya terdiri dari beberapa aturan yang ditulis dalam bentuk selector dan properti. Selector menentukan elemen HTML mana yang akan diberi efek, sedangkan properti menentukan bagaimana elemen tersebut akan diberi efek.

Contoh cara menggunakan CSS:

/* selector */
body {
 /* properti */
 background-color: #fff;
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
}

2. Menambahkan CSS pada Website

Untuk menambahkan CSS pada website, Anda bisa menggunakan salah satu dari tiga cara berikut:

Memasukkan CSS ke dalam elemen <style> pada halaman HTML.

Menyimpan CSS dalam file tersendiri dengan ekstensi .css, lalu memasukkannya ke dalam halaman HTML dengan elemen <link>.

Menambahkan CSS langsung ke dalam elemen HTML dengan atribut style.

Contoh cara menggunakan CSS:

<!DOCTYPE html>
<html>
<head>
	<title>Memasukkan CSS</title>
	<style type="text/css">
		/* selector */
        body {
         /* properti */
         background-color: #fff;
         font-family: Arial, sans-serif;
         margin: 0;
         padding: 0;
        }
	</style>
</head>
<body>
	<h1>Cara Memasukkan CSS</h1>
</body>
</html>

3. Mengatur Warna dan Latar Belakang

Untuk mengatur warna dan latar belakang pada website, Anda bisa menggunakan properti color dan background-color.

Warna dapat ditentukan dengan menggunakan nama warna, hexadecimal, atau RGB. Sedangkan latar belakang dapat ditentukan dengan menggunakan gambar atau warna solid.

Contoh cara menggunakan CSS:

body {
  background-color: #ffffff; /* warna solid */
  background-image: url('/img/bg.jpg'); /* menggunakan gambar */
  background-repeat: repeat-x; /* mengulang gambar secara horizontal */
  background-attachment: fixed; /* menempelkan gambar pada layar */
  background-position: center; /* menempatkan gambar di tengah */
}

a {
  color: #007bff; /* warna hexadecimal */
}

p {
  color: rgb(0, 0, 0); /* warna RGB */
}

4. Menyesuaikan Ukuran dan Tampilan Huruf

Untuk menyesuaikan ukuran dan tampilan huruf pada website, Anda bisa menggunakan properti font-size, font-family, font-weight, dan text-transform.

Ukuran huruf dapat ditentukan dalam ukuran absolut atau relatif. Sedangkan keluarga huruf dapat ditentukan dengan nama font yang tersedia di komputer pengunjung.

Contoh cara menggunakan CSS:

h1 {
  font-size: 36px; /* ukuran absolut */
  font-family: Arial, sans-serif; /* nama font */
  font-weight: bold; /* tebal */
  text-transform: uppercase; /* huruf besar */
}

p {
  font-size: 16px;
  font-family: Georgia, serif;
  font-weight: normal; /* normal */
  text-transform: none; /* huruf kecil */
}

5. Menyesuaikan Layout dan Tata Letak

Untuk menyesuaikan layout dan tata letak pada website, Anda bisa menggunakan properti display, position, top, right, bottom, left, float, dan clear. Properti display menentukan bagaimana elemen tersebut ditampilkan, sedangkan properti position menentukan posisi elemen tersebut dalam layout.

Contoh cara menggunakan CSS:

header {
  display: block; /* menampilkan elemen sebagai block */
  position: fixed; /* menempelkan elemen pada layar */
  top: 0; /* menempatkan elemen di atas */
  left: 0; /* menempatkan elemen di kiri */
  width: 100%; /* memenuhi lebar layar */
  height: 60px; /* tinggi elemen */
  background-color: #333333;
  color: #ffffff;
  z-index: 1; /* membuat elemen di atas elemen lain */
}

nav {
  display: inline-block; /* menampilkan elemen sebagai inline block */
  float: right; /* menempatkan elemen di sebelah kanan */
  margin-top: 20px; /* memberikan margin pada atas */
  margin-right: 20px; /* memberikan margin pada kanan */
}

nav ul {
  list-style: none; /* menghilangkan tanda pada list */
}

nav li {
  display: inline-block; /* menampilkan elemen sebagai inline block */
  margin-left: 20px; /* memberikan margin pada kiri */
}
Future Creative Blog