Untung saja ada CSS, dengan skill ini, kamu bisa menghias website kamu menjadi berbeda dari yang lain. Mulai dari memberi warna, menentukan ukuran, mengubah posisi sampai membuat animasi! Kalau kamu penasaran, CSS adalah singkatan dari Cascading Style Sheets.
Referensi lain:
- APA ITU CSS
- Referensi CSS bahasa Indonesia
Struktur dasar CSS
Kamu bisa menggunakan CSS, dengan memilh html apa yang mau dihias, ditambah dengan nama property dan nilainya. Analoginya seperti memilih bagian si Budi (tag HTML) lalu rambutnya (property) hias dengan warna kuning (nilanya). Penulisannya di css seperti ini:
p {
color: red;
text-align: center;
}P berarti, element tag p di HTML, color adalah property untuk warna, text-align adalah property untuk posisi dari tulisannya, dan di sebelah kanan : adalah nilainya masing-masing.
Contoh dasar menggunakan CSS
//mengubah background halaman menjadi warna biru
body {
background-color: blue;
}//mengubah text h1 menjadi warna putih dan di tengah
h1 {
color: white;
text-align: center;
}//mengganti ukuran pada tag p
p {
font-size: 20px;
}Ada beberapa cara untuk mengimplementasikan CSS di file HTMl kamu
Cara menggunakan CSS di HTML
1. internal CSS
Kamu bisa menulis css langsung di dalam HTML, dengan menaruh di dalam tag style
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>2. inline CSS
menulis langsung style css di tag html masing-masing
<h1 style="color:black;text-align:right;">This is a heading</h1>
3. file css
membuat file css sendiri, dan menghubungkannya dengan html
bikin file dengan nama apa saja dengan ekstensi .css
nama.css
h1 {
color: red;
}
p {
font-size: 12px;
}lalu hubungkan dengan htmlnya
<head> <link rel="stylesheet" type="text/css" href="nama.css"> </head>
Bersama HTML, kamu bisa membuat website yang khas dan menarik. Kamu bisa melihat kelas dibawah untuk dasar dasar dari CSS, setelah itu bisa melanjutkan ke CSS3
Daftar Materi Belajar CSS dari dasar
CSS tidak boleh dilewatkan saat belajar mengembangkan website, dengan CSS website yang dibuat akan jauh lebih cantik dan menarik. Belajar bagaimana cara menggunakan css di sini
Apa itu css
Bekenalan dengan css, bahasa yang digunakan untuk menghias website. Kalau sudah belajar html sebelumnya, css jadi bumbu pelengkap hidangan website kita!
Menghubungkan css dan html
Bagaimana cara menghubungan css dan html? Ada tiga cara, inline, internal dan external, temukan jawabannya di video ini
Struktur dasar CSS
Belajar struktur dasar dari css, lihat bagaimana cara penulisannya
Selektor pada CSS
Bagaimana cara kita menentukan elemen html mana yang mau dihias? untuk itu kita akan belajar selektor, memilih tag, id ataupun kelas
Background color
Bagaimana cara mengubah warna background pada css
Background Gambar dan komentar
Bukan hanya warna, kita juga bisa menambahkan gambar sebagain background pada css. Belajar juga apa itu komentar dan penggunannya di css
Text pada css
Text adalah media yang paling penting dan paling banyak dikonsumsi di dunia website. Belajar cara menghias text dengan css
Font pada css
Selain text yang bisa kita hias, jenis font tulisannya pun bisa kita atur dengan css
Menghias link
Link punya style yang automatis datang saat dibuat, disini kita akan melihat bagaimana cara mengubah dan menghias link yang ada pada website
Dimensi element
Sangat penting untuk mengetahui pengaturan dimensi pada CSS, pelan pelan kita akan melihat tentang display, boxmodel, margin, border dan padding.
Display inline, block dan inlineblock
Mengatur display elemen elemen html, mulai dari melihat apa itu inline, block dan juga inlineblock, pelajari perbedannya di sini.
Menghilangkan elemen
Ada dua cara biasa untuk menghilangkan elemen dengan css, bisa kita sembunyikan atau kita hapus keberadaanya, apa bedanya? lihat disini
Box model dan margin
Penting untuk mengetahui apa itu boxmodel, konsep dasar dari pengetahuan seputar tinggi dan lebar konten pada css, ada juga margin yang akan menjadi pembuka
Padding dan border
Selain margin, ada padding dan border yang mempengaruhi pengaturan lebar dan tinggi suatu konten, lihat perbedaan dan cara menggunakannya
Posisi relative dan posisi static
Pengaturan posisi pada css tidak boleh dilewatkan, kita akan mulai belajar perbedaan posisi relative dan static di sini.
Posisi absolute
Belajar apa itu posisi absolute pada css dan bagaimana cara menggunakan posisi absolute
Posisi fixed
Belajar apa itu posisi fixed pada css dan bagaimana cara menggunakan posisi fixed
Posisi parent element
Posisi parent atau pembungkus suatu element sangat berpengaruh pada isinya. Belajar bagaimana cara mengatur posisi parent pada css
Z-index pada CSS
Kita bisa mengatur posisi elemen pada koordinat z, atau seakan-akan suatu elemen berada di atas elemen lainnya dengan z-index
Float dan clear
Float dan clear akan sangat sering ditemukan pada pembuatan struktur website. Kemampuannya memang bisa dimanfaatkan untuk banyak hal, termasuk mengatur layout dasar suatu website
Masih tentang float
Float tidak cukup kita pelajari di satu video, lanjutkan belajar float dan kuasai cara menggunakannya
Selektor bagian kedua
Selain selektor dasar, seperti memilih tag, id atau class, ada juga cara lain yang membuat pemilihan element html jauh lebih fleksibel
Referensi selektor
Temukan informasi lebih banyak tentang selektor yang bisa kita gunakan disini referensi CSS w3school dan onlastblog css cheatsheet
Hover dan focus
Membuat website lebih menarik dengan efek hover dan focus. User akan mendapatkan feedback dari aktivitasnya
Latihan dan latihan
Belajar CSS dasar selesai! terus latihan dan belajar untuk menguasainya. Setelah ini kita bisa belajar html5 atau CSS3
