Tutorial CSS Pemula Memahami Dasar Syntax | CSS bekerja sebagai pelengkap pada HTML. Jika anda baru mempelajari HTML, maka cobalah untuk sekaligus belajar CSS. Pada panduan ini, kami akan berbagi informasi tutorial CSS pemula memahami dasar syntax dan cara membuatnya untuk pemula.
Cascading Style Sheet (CSS) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan metode CSS ini mudah mengubah secara keseluruhan warna dan tampilan yang ada pada website.
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. Sebagai contoh, perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins (ukuran), background (latar belakang), font size (ukuran font) dan lain-lain. Elemen-elemen tersebut disebut juga dengan styles.
Baca juga: Cara Tepat Fresh Graduate Diterima Kerja IT
Syntax Dasar CSS
Syntax dasar CSS merupan penulisan dasar CSS, yang dimana aturan CSS memiliki dua bagian utama, yaitu: selector dan declaration, atau kalo diterjemahkan ke bahasa Indonesia menjadi pemilih dan deklarasi. Berikut penjelasan lebih detailnya:
Seperti yang dilihat pada contoh di atas, satu selector dapat memiliki beberapa property. Jika terdapat beberapa selector yang memiliki property yang sama, dapat dilakukan pengelompokan selector. Lihat contoh berikut :
- Syntax CSS
h1, body, p, ul { color: blue; }- Syntax HTML
<body> <h1>Warna Biru</h1> Contoh teks </body>Pada contoh di atas, elemen header, body, paragraph, dan unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan memiliki teks berwarna biru.
Cara Menulis Code CSS
Mempercantik tampilan tombol
Untuk mempercantik tampilan tombol, kamu bisa menggunakan beberapa property CSS, seperti border, padding, dan border-radius.
Misalnya, kamu memiliki elemen HTML berikut:
<button class="my-button">Klik Saya</button>Kamu bisa menulis kode CSS sebagai berikut untuk mempercantik tampilannya:
.my-button {
border: 2px solid #007BFF;
padding: 10px 20px;
border-radius: 5px;
}Dalam contoh di atas, border menambahkan batas sekitar tombol, padding memberikan jarak antara teks dan batas tombol, serta border-radius membuat sudut tombol menjadi bulat.
Menambahkan warna latar dan teks pada tombol
Untuk menambahkan warna latar dan warna teks pada tombol, kamu bisa menggunakan property background-color.
Contoh:
.my-button {
background-color: #007BFF;
color: white;
}Pada contoh di atas, background-color: #007BFF; menetapkan warna latar belakang tombol menjadi biru dan color: white; menetapkan warna teks menjadi putih.
Dengan menggabungkan semua property ini, kode CSS untuk tombol akan ditampilkan sebagai berikut:
.my-button {
border: 2px solid #007BFF;
padding: 10px 20px;
border-radius: 5px;
background-color: #007BFF;
color: white;
}Pelatihan Web Development using HTML5 CSS3 and Javascript Jogja
Demikian informasi pentingTutorial CSS Pemula Memahami Dasar Syntax. Segera ikuti pelatihan Web Development using HTML5 CSS3 and Javascript di PITMA, untuk informasi pelatihan dan jadwal terbaru silahkan hubungi kami di nomor whatsapp kami disini.
