Halo semua!!
Pada tulisan kali ini saya akan melanjutkan pembahasan sebelumnya yaitu website. Sebelumnya kita membahas tentang kerangka website, bagaimana contohnya, dan dimana kita dapat mempelajarinya. Untuk kali ini kita akan mempelajari tentang bagian kulit website dan memperhidup tampilan website yang akan kita buat.
Oke, langsung saja ke pembahasannya!
Pengenalan
Sama halnya dengan membuat kerangka website, kita memerlukan sebuah bahasa untuk membuatnya. bahasa tersebut adalah bahasa lembar gaya yang di sebut CSS (Cascading Style Sheet). Dengan CSS ini kita dapat mengatur bentuk, ukuran, warna dan tata letak <Tag> pada HTML. Untuk catatan dikarnakan CSS memiliki fungsi untuk mempercantik HTML manjadikan CSS tidak bisa dberjalan sendiri dan harus dikombinasikan dengan HTML.
Contoh CSS
h1{
background-color: black;
}
bagian 'h1' merupakan deklarasi berguna untuk memilih <tag> mana yang akan kita atur tampilannya dan bagian 'background-color: black' berguna untuk memilih style apa yang akan kita ubah contohnya bagian ini mengatur warna background <h1>.
Untuk penggunaannya CSS sering dipakai dengan 2 cara yaitu :
- Digabung dalam 1 file dengan HTML
Pada cara ini CSS diletakan dalam tag head dan memiliki tag sendiri yaitu style untuk contohnya seperti berikut.
<head>
<title>dokumen</title>
<style>
body{
background-color: black;
}
</style>
</head>
Semua CSS dapat di tuliskan di dalam <style> tidak memiliki batasan. Ketika kita menggunkan cara ini kekurangannya adalah kode yang terlihat panjang dan kesulitan dalam mengubah HTML. Kelebihannya adalah kode bisa dijalankan pada perangkat mobile.
- Dipisah dengan HTML
Cara ini memisahkan HTML dan CSS menjadi 2 file dan menghubungkannya dengan pada bagian head
seperti
<head>
<title>Dokumen</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
tag <link> digunakan untuk menyertakan file eksternal. Bagian rel="stylesheet" Atribut
rel (relationship) menunjukkan hubungan antara dokumen HTML dan file eksternal yang disertakan. Nilai stylesheet menunjukkan bahwa file eksternal yang disertakan adalah file CSS yang digunakan untuk mendefinisikan gaya halaman. Bagian href="style.css" Atribut href (hypertext reference) menentukan lokasi atau path dari file eksternal yang akan disertakan. Untuk 'style.css' adalah nama file CSS yang akan kita gunakan untuk mempercantik website kita.untuk penulisan nama file seperti ini file CSS dan HTML harus berada pada folder yang sama jika file berada pada folder yang berbeda maka penulisannya diganti menjadi 'folder/style.css'. Dengan menggunakan cara ini pemeliharaan kode kita akan lebih mudah.
sebenarnya ada satu cara lagi dalam menuliskan CSS yaitu dengan menuliskannya langsung di dalam tag yang akan diubah. Tapi cara ini tidak direkomendasikan karena menyulitkan dalam pemeliharaan dan membuat kode terlihat rumit.
CSS Sederhana
Untuk memperjalas penjelasan kita langsung saja kee contoh penggunaan CSS. Saya akan mencontohkannya dengan menghias <form> HTML.
HTML contoh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<br><br><br><br><br><br><br><br>
<div class="countainer">
<div class="isi">
<h1>SELAMAT DATANG</h1>
<hr size="5px" color="lightblue">
<p>Silahkan log in terlebih dahulu sebelum mengakses situs</p>
<form action="buah">
<label for="nama">User</label>: <input id="nama" type="text" placeholder="username/email/phone" maxlength="30"><br>
<label for="pw">Pasword</label>: <input type="password" id="pw" placeholder="password"><br><br>
<button type="submit" align="right">Masuk</button>
</form>
</div>
</div>
</body>
</html>
Untuk tampilan awalnya seperti ini
mari kita tambahkan CSS dengan metode pertama
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: aliceblue;
}
.countainer {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
width: 900px;
margin: auto;
padding: 20px;
border-radius: 30px;
box-shadow: 0 10px 5px rgb(51, 122, 122);
}
.isi {
background-color: rgb(255, 255, 255);
padding: 10px;
position: relative;
align-items: start;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
label {
display: inline-block;
margin-bottom: 5px;
width: 120px;
color: #333333;
font-weight: lighter;
}
input {
display: inline-block;
width: calc(100% - 130px);
padding: 7px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #96fcfc;
border-radius: 3px;
font-size: 15px;
position: relative;
}
button {
padding: 5px 10px;
margin-top: 20px;
background-color: #15e2e2;
color: #3a3434;
border: none;
border-radius: 3px;
cursor: pointer;
position: absolute;
bottom: 5px;
right: 18px;
}
h1 {
align-self: flex-start;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 50px;
margin-bottom: 0ch;
top: 5px;
text-align: left;
}
p {
margin-bottom: 25px;
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br>
<div class="countainer">
<div class="isi">
<h1>SELAMAT DATANG</h1>
<hr size="5px" color="lightblue">
<p>Silahkan log in terlebih dahulu sebelum mengakses situs</p>
<form action="buah">
<label for="nama">User</label>: <input id="nama" type="text" placeholder="username/email/phone" maxlength="30"><br>
<label for="pw">Pasword</label>: <input type="password" id="pw" placeholder="password"><br><br>
<button type="submit" align="right">Masuk</button>
</form>
</div>
</div>
</body>
</html>
maka hasilnya akan seperti ini
Nah begitulah kira-kira pengenalan CSS yang saya tulis untuk selengkapnya kalian bisa mengunjungi w3schools.com. Semoga bermanfaat dan salam sejahtera!!.