Di karenakan saya ingin menguasai CSS, Maka dari itu saya mempelajari langkah langkah yang ada di w3schools untuk menguasai CSS.
Agar memiliki Skills CSS dan tujuannya adalah jika membuat halaman web menggunakan bahasa HTML, maka CSS inilah yang saya gunakan untuk mempercantik halaman HTML nya.
Mengetahui dan memahami CSS Syntax, CSS Selectors, CSS Comments, CSS colors, CSS Backgrounds, CSS Borders.
Blok dekralasi berisi satu atau lebih dekralasi yang di pisahkan oleh titik koma. Setiap dekralasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.
beberapa dekralasi CSS dipisahkan dengan titik koma, dan blok dekralasi di kelilingin oleh kurung kurawal.
Contoh :
p {
color: red;
text-align: center;
}
untuk HTMLnya :
hasilnya akan seperti ini :
Penjelasan dari kode di atas :
- p adalah pemilih di css (Menunjuk ke elemen HTML yang ingin Kalian beri gaya: <p>).
- color adalah properti, dan red merupakan nilai properti (untuk mewarnai).
- text-align adalah properti juga, dan center merupakan nilai properti(memposisikan ditengah).
CSS selector (Pemilih CSS)
selector css digunakan untuk "menemukan" (atau memilih) elemen HTML yang Kalian beri gaya.
Kita dapat membagi pemilih CSS menjadi lima kategori :
- Selector sederhana (pilih elemen berdasarkan nama, id, kelas)
- Selektor kombinator (Memilih elemen berdasarkan hubungan spesifik di antara mereka)
- Selector kelas menu (memilih elemen berdasarkan status tertentu)
- Selector elemen menu (memilih dan menata bagian elemen)
- Pemilih atribut (memilih elemen berdasarkan atribut atai nilai atribut)
Pemilih Elemen CSS
Pemilih elemen memilih elemen HTML berdasarkan nama elemen.
Contoh : di dalam HTML kan ada yang namannya tag <p> pada halaman akan diratakan, dengan warna teks merah :
p {
text-align: center;
color: red;
}
Pemilih Id CSS
Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Id dari sebuah elemen adalah unik di dalam sebu- Selector sederhana (pilih elemen berdasarkan nama, id, kelas)
- Selektor kombinator (Memilih elemen berdasarkan hubungan spesifik di antara mereka)
- Selector kelas menu (memilih elemen berdasarkan status tertentu)
- Selector elemen menu (memilih dan menata bagian elemen)
- Pemilih atribut (memilih elemen berdasarkan atribut atai nilai atribut)ah halaman, jadi pemilih id digunakan untuk memilih satu elemen unik!
untuk memilih elemen dengan id tertentu, tulis karakter (#), di ikuti dengan nama id yang Kalian sudah tentukan.
Contoh :
Aturan CSS di bawah ini akan diterapkan ke elemen HTML dengan id="adelwinganteng":
<!DOCTYPE html>
<head>
<style>
#adelwinganteng {
text-align: center
color: red;
}
</style>
<body>
<p id="adelwinganteng">Belajar CSS</p>
<p>Tulisan di atas berubah menjadi merah, dikarenakan sudah di beri CSS. Dan anda harus ingat bahwa CSS ini jenis Inline, dikarenakan kode CSS nya masih satu dokumen denga HTML.</p>
</body>
</html>
Hasilnya :
- Penggunaan pada class CSS
pemilih kelas memilih elemen HTML dengan atribut kelas tertentu. Untuk memilih elemen denga jelas tertentu, tulis karakter (.), di ikuti dengan nama kelas yang Kalian sudah tetapkan.
Contoh
Dalam contoh ini semua elemen HTML dengan class="adel" akan bewarna merah dan rata tengah :
<!DOCTYPE html>
<html>
<head>
<style>
.adel {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="adel">Belajar CSS</h1>
<p class="adel">Disini sudah menggunakan aribut class, maka ketika memanggil kode HTML nya bisa lebih dari satu.</p>
</body>
</html>
Hasilnya :
Anda juga dapat menentukan bahwa elemen HTML tertentu yang harus terpengaruh oleh satu kelas. Saya akan mengambil contoh dari atas tadi dengan mengubah kode pada CSS nya sedikit :
p.center {
text-align: center;
color: red;
}
Hasilnya maka seperti ini :
Elemen HTML juga dapat merujuk ke lebih dari satu kelas.
Contoh : dalam contoh ini elemen <p> ditata menrut class="adel" dan class="adelwin":
- Pemilih pengelompokkan CSS
Pemilih pengelompokkan memilih semua elemen HTML dengan definisi gaya yang sama. Kalian bisa melihat kode CSS berikut (elemen h1, h2, dan p memiliki fungsi/gaya yang sama)
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: tomato;
}
Akan lebih cepat dan simple dalam mengelompokkan kode. Untuk mengelompokkan pemilih, pisahkan setiap pemilih dengan koma.
Contoh :
h1, h2, p {
text-align: center;
color: red;
}
terlihat lebih simple kan?. dengan mengelompokkan langsung seperti kode di atas akan lebih cepat waktu yang digunakan.
Komentar dalam CSS ini berfungsi sebagai penanda dalam pengodingan, kalian bisa menggunakan CSS Coments ini untuk menandai kode kalian. kalian bisa menggunakan penulisan seperti berikut :
/* Komentar yang ingin kalian berikan*/
Jadi komentar ini tidak akan ditampilkan pada halaman web, dikarenkan fungsinya hanya sebagai penanda.
Di CSS, warna dapat ditentukan manggunakan nama warna yang telah ditentukan :
<!DOCTYPE html>
<html>
<body>
<h1 align="center">Sebagian Warna yang ada di CSS</h1>
<h1 style="background-color:Tomato;">AdelwinNL | Tomato</h1>
<h1 style="background-color:Orange;">AdelwinNL | Orange</h1>
<h1 style="background-color:DodgerBlue;">AdelwinNL | DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">AdelwinNL | MediumSeaGreen</h1>
<h1 style="background-color:Gray;">AdelwinNL | Gray</h1>
<h1 style="background-color:SlateBlue;">AdelwinNL | SlateBlue</h1>
<h1 style="background-color:Violet;">AdelwinNL | Violet</h1>
<h1 style="background-color:LightGray;">AdelwinNL | LightGray</h1>
</body>
</html>
Hasilnya :
- Warna teks CSS
Anda dapat mengatur warna teks :
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hallo semua..!</h3>
<p style="color:DodgerBlue;">Kata-kata :</p>
<p style="color:MediumSeaGreen;">Jika anda ingin sesuatu yang besar, maka anda harus siap-siap dalam bersabar.</p>
</body>
</html>
Hasilnya :
- Warna pembatas CSS
anda dapat mengatur warna batas menggunakan properti border. Contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello Kawan...!</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello Kawan...!</h1>
<h1 style="border: 2px solid Violet;">Hello Kawan...!</h1>
</body>
</html>
Hasilnya :
- CSS Background
Properti latar belakang CSS digunakan untuk menambahkan efek latar belakang untuk elemen.
Dalam bab ini, Anda akan mempelajari tentang properti latar belakang CSS berikut :
- background-color
- background-image
- background-repeat
- background-attacment
- background-position
- background (Properti singatan)
Warna latar belakang CSS
properti background-color menentukan warna latar belakang elemen.
Contoh :
Warna latar belakang halaman diatur seperti ini :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hallo kawan....!</h1>
<p>backround/latar belakang halaman akan berubah menjadi warna biru.</p>
</body>
</html>
Hasil :
Dalam CSS, warna paling sering ditentukan oleh :
- nama warna yang valid - seperti "merah"
- nilai HEX - seperti #ff0000
- nilai RGB - seperti rgb(255,0,0)
Elemen lainnya :
Anda dapat mangatur warna latar belakang untuk elemen HTML apapun :
Contoh
Disini, elemen <h1>, <p>, dan <div> akan memiliki latar belakang yang berbeda :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: tomato;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background color menjadi merah tomat.</h1>
<div>
Background-color menjadi biru tua.
<p>background color menjadi kuning.
</div>
</body>
</html>
Hasil :
- Opacity Color/Opasitas Warna :
dalam CSS pun kita bisa mengatur opasitas seberapa tebal tipisnya warna. Itu dapat mengambil nilai dari 0,0 - 1,0. Nilai yang lebih rendah, semakin transparan. Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: red;
}
div.depan {
opacity: 0.1;
}
div.tengah {
opacity: 0.3;
}
div.belakang {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparant blok.</h1>
<p>Disini anda bisa mengubah seberapa opasitas warna yang kalian inginkan.</p>
<div class="depan">
<h1>opasitas 0.1</h1>
</div>
<div class="tengah">
<h1>opasitas 0.3</h1>
</div>
<div class="belakang">
<h1>opasitas 0.6</h1>
</div>
<div>
<h1>opasitas 1 (standar)</h1>
</div>
</body>
</html>
Hasilnya :
Catatan : Saat menggunakan opasitas properti untuk menambahkan transparansi ke latar belakang elemen, semua elemen turunannya mewarisi transparasi yang sama. Ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca.
background(latar belakang) menggunakan gambar :
properti background-image menentukan gambar untuk digunakan sebagai latar belakang elemen. Secara default, gambar diulang sehingga menutupi seluruh elemen.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('back.avif');
background-size: cover;
}
</style>
<body>
<h1 style="color: #f4f4f4;text-align:center;">Belajar CSS</h1>
<p style="color: #f4f4f4;text-align:center;">Ini adalah contoh menggunakan background/latar belakang gambar</p>
</body>
</html>
Hasil :
Catatan : kalian harus menyiapkan file gambar yang tersimpan dalam satu folder terlebih dahulu untuk nanti gambar tersebut di undang untuk dijadikan sebagai background halaman web. Kecuali jika anda menggunakan file gambar dari luar, misal menggunakan link juga bisa tanpa harus menyiapkan file gambar dalam satu folder.
- CSS Borders / Batas dengan menggunakan CSS
Properti perbatasan CSS memungkinkan untuk menentukan gaya, lebar, dan warna perbatasan elemen.
Gaya Perbatasan CSS
properti border-style menentukan jenis perbatasan apa yang akan di tampilkan,
Nilai berikut yang diperbolehkan:
- dotted - Mendefinisikan batas putus-putus
- dashed - Mendefinisikan batas putus-putus
- solid - Mendifinisikan perbatasan yagn solid
- double - Mendefinisikan perbatasan ganda
- groove - Mendefinisikan perbatasan beralur 3D. Efeknya tergantung pada nilai warna batas.
- ridge - Mendefinisikan perbatasan bergigin3D. Efeknya tergantung pada nilai warna batas.
- inset - Mendefinisikan batas sisipan 3D. Efeknya tergantung pada nilai warna batas
- outset - Mendifinisikan batas awal 3D. Efeknya tergantung pada nilai warna batas.
- none - Mendefinisikan tanpa batas
- hidden - Mendefinisikan perbatasan tersembunyi.
Properti border-style dapat memiliki satu hingga empat nilai (Untuk batas atas, batas kanan, batas bawah, dan batas kiri)
Lebar batas CSS
Properti border-width menentukan lebar dari empat perbatasan.
Lebar dapat diatur sebagai ukuran tertentu (dalam px. pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan sebelumnya : tipis, sedang, atau tebal. Contoh :
Demonstrasi lebat perbatasan yang berbeda:
<!DOCTYPE html>
<head>
<title>Belajar CSS</title>
<style>
p.satu {
border-style: solid;
border-width: 5px;
}
p.dua {
border-style: solid;
border-width: medium;
}
p.tiga {
border-style: dotted;
border-width: 2px;
}
p.empat {
border-style: dotted;
border-width: thick;
}
p.lima {
border-style: double;
border-width: 15px;
}
p.enam {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
<p class="satu">AdelwinNL</p>
<p class="dua">AdelwinNL</p>
<p class="tiga">AdelwinNL</p>
<p class="empat">AdelwinNL</p>
<p class="lima">AdelwinNL</p>
<p class="enam">AdelwinNL</p>
</body>
</html>
Hasil :
Untuk lebar lebih Spesifik
Properti border-width dapat memiliki satu hingga empat nilai(untuk batas atas, batas kanan, batas bawah, batas kiri)
Contoh :
<!DOCTYPE html>
<head>
<title>Belajar CSS</title>
<style>
p.satu {
border-style: solid;
border-width: 5px 20px;
}
p.dua {
border-style: solid;
border-width: 20px 5px;
}
p.tiga {
border-style: solid;
border-width: 20px 10px 4px 35px; /* 20px atas, 10px kanan, 4px bawah, 35px kiri*/
}
</style>
</head>
<body>
<p class="satu">AdelwinNL</p>
<p class="dua">AdelwinNL</p>
<p class="tiga">AdelwinNL</p>
</body>
</html>
Hasil :
- Warna Perbatasan CSS
Properti border-color inilah yang akan digunakan untuk mewarnai border. Warna ini seperti biasa bisa di atur dengan :
- nama warnanya : tentukan nama warna sesuka kalian
- HEX : Tentukan nilai HEX, seperti #ff0000
- RGB : Tentukan nilai RGB, seperti rgb(255,0,0)
- HSL : Tentukan nilai HSL, seperti hsl(0, 100%, 50%)
Contoh :
<!DOCTYPE html>
<head>
<title>Belajar CSS</title>
<style>
p.satu {
border-style: solid;
border-color: red;
}
p.dua {
border-style: dotted;
border-color: green;
}
p.tiga {
border-style: solid;
border-width: yellow;
}
</style>
</head>
<body>
<p class="satu">AdelwinNL</p>
<p class="dua">AdelwinNL</p>
<p class="tiga">AdelwinNL</p>
</body>
</html>
Hasil :
Jika kalian ingin merubah warnya secara lebih spesifik, kalian bisa tiru contoh yang di atas tadi waktu menebal tipiskan border.
- Perbatasan CSS sisi Individu
Dari contoh di halaman sebelumnya, Anda telah melihat bahwa memungkinkan untuk menentukan batas yang berbesa untuk setiap sisi.
Di CSS, ada juga properti untuk menentukan setiap batas (atas, kanan, bawah, dan kiri):
Contoh :
<!DOCTYPE html>
<head>
<title>Belajar CSS</title>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p align="center">AdelwinNL</p>
</body>
</html>
Hasil :
Jadi, inilah cara kerjanya :
Jika border-style properti memiliki empat nilai :
-- Gaya perbatasan: putus-putus ganda dapat bertitik
- Batas ata bertitik
- Batas kanan padat
- Batas bawah adalah ganda
- Batas kiri putus-putus
Jika border-style properti memiliki tiga nilai :
-- Gaya perbatasan: dobel padat bertitik:
- Batas atas bertitik
- Batas kanan dan kiri padat
- Batas bawah adalah ganda
Jika border-style properti memiliki dua nilai :
-- Gaya perbatasan: padat bertitik:
- Batas atas dan bawah bertitik
- Batas kanan dan kiri padat
Jika border-style properti memiliki satu nilai :
-- Gaya perbatasan: putus-putus
- Keempat perbatasan putus-putus
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* Four values */
p.four {
border-style: dotted solid double dashed;
}
/* Three values */
p.three {
border-style: dotted solid double;
}
/* Two values */
p.two {
border-style: dotted solid;
}
/* One value */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h2>Menentukan baris yang berbeda-beda</h2>
<p class="four">properti border-style memiliki 4 nilai.</p>
<p class="three">properti border-style memiliki 3 nilai</p>
<p class="two">properti border-style memiliki 2 nilai</p>
<p class="one">properti border-style memiliki 1 nilai.</p>
</body>
</html>
Hasil :
Properti border-style digunakan dalam contoh diatas. Namun, ini juga berfungsi dengan border-width dan border-color.
- Perbatasan CSS (Properti Singkatan)
Seperti yang anda lihat di halaman sebelumnya, ada banyak properti yang perlu dipertimbangkan ketika berhadapan dengan perbatasan. Untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua properti perbatasan individu dalam satu properti.
Properti border adalah properti singkatan untuk properti perbatasan individu berikut :
- border-width
- border-style
- border-color
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>Ini adalah border menggunakan properti singkat</h2>
<p>Hallo kawan, ini adalah sebuah percobaan menggunakan properti singkat untuk membuat border</p>
</body>
</html>
Hasil :
Anda juga dapat menentukan semua properti perbatasan individu hanya untuk satu sisi. Contoh saya akan membuat border pada sebelah kiri saja :
p {
border-left: 6px solid red;
}
Hasilnya :
Jika anda ingin merubah agar bordernya di bawah kalian tinggal ubah yang tadinya border-left menjadi border-bottom. Contoh
- CSS Rounder Borders (Batas bulat CSS)
properti border-radius ini digunakan untuk menambahkan batas bulat ke elemen. Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Properti Radius perbatasan</h2>
<p>Properti ini digunakan untuk menambahkan batas bulat ke elemen.</p>
<p class="normal">Ini adalah border yang normal</p>
<p class="round1">Ini adalah border bulat menggunakan ukuran 5px radius</p>
<p class="round2">Ini adalah border bulat menggunakan ukuran 8px radius</p>
<p class="round3">Ini adalah border bulat menggunakan ukuran 12px radius</p>
</body>
</html>
.png)
