Perkenalan Dan Mempelajari Dasar CSS
#Siapa itu CSS?
Dia adalah sekumpulan kode yang fungsinya untuk menghias dan mengatur element dari Bahasa Markup seperti HTML sehingga keliatan menarik di mata manusia.
Misalnya kita ambil contoh halaman ini. Disitu kita bisa lihat bermacam hal-hal keren seperti button yang berubah warna setiap kita arahkan cursor mouse ke dalam button-nya, benda-benda lingkaran yang bergerak-gerak atau navigasi yang selalu menempel di atas. Nah… itulah yang CSS bisa lakukan.
Eits, tidak hanya itu loh. Dengan CSS, anda juga bisa mengubah tata letak penempatan element-element-nya sehingga dibuat terpisah dan lebih rapih. Sebagaimana halaman series ini yang memiliki konten utama di sebelah kiri dan Link untuk pembelajaran lainnya di sebelah kanan.
Keren kan? Padahal sebetulnya semua itu merupakan sebagian kecil dari apa yang CSS bisa lakukan. Oleh karena itu, selama series ini, saya akan menuntun anda untuk mempelajari CSS agar impian untuk menjadi seorang web developer semakin dekat.
Oiya, untuk awalan anda bisa copy seluruh sintaks CSS dan HTML di bawah ini dalam satu file berformat .html menggunakan text editor seperti visual studio code atau notepad untuk para mastah 🤣, kemudian anda bisa buka file tersebut di browser untuk melihat hasilnya.
CSS:
<style>
button{
width: 200px;
height: 60px;
color: white;
font-size: 20px;
background-color: #4586f5;
border: 0;
border-radius: 10px;
box-shadow: 0px 8px 0px #c9ddff;
}
</style>
HTML:
<button>klik disini</button>
Hasilnya akan terlihat seperti ini:
Pusingkah liat codenya? pasti yaa dongg. Tapi tenang aja, anda pasti akan mudah memahaminya karena umumnya pattern kode CSS selalu sama.
Untuk selanjutnya saya akan coba untuk kenalkan css lebih dalam, jadi stay read yaa!.
dalam materi ini saya akan membahas tentang hal paling dasar dari CSS, yaitu cara penggunaan sintaksis-nya. Tunggu apa lagi? Let’s to the point.
#Penyimpanan kode CSS
Agar kode CSS dapat dikenali oleh browser, anda harus menyimpan kodenya ke dalam tag HTML <style></style> karena tag tersebut digunakan khusus untuk menyimpan seluruh kode CSS.
Biasanya, para programmer menyimpan tag <style></style> di dalam tag <head></head> karena beberapa alasan, salah satunya adalah karena tag head tersebut berfungsi sebagai tempat menyimpan metadata.
#Penulisan sintaks CSS
Seperti yang saya pernah bilang sebelumnya, CSS umumnya memiliki aturan penulisan sintaks yang sama.
Penulisannya terbagi menjadi tiga blok:
- Selector, yang berupa tag HTML yang dipilih;
- Property, yaitu atribut pada HTML;
- Value, yaitu nilai yang diberikan untuk mengubah suatu property.
Sebagai contoh, saya akan mengganti nilai dalam setiap tag <li></li> menjadi berwarna merah
CSS:
<style>
li {
color: red;
}
</style>
Dalam kode di atas, li adalah apa yang bisa kita panggil dengan selector, sementara color adalah property dan red sebagai nilainya. Kemudian, kita akan menambahkan HTML nya.
HTML:
<ul>
<li>pertama</li>
<li>kedua</li>
<li>ketiga</li>
</ul>
Simpel kan? Dengan mengerti sintaks di atas, anda sudah mengerti cara membuat kode CSS secara hampir keseluruhan. Oleh karena itu, selamat! anda sudah memahami CSS walaupun baru tiba di tutorial pertama
Untuk selanjutnya kita akan mempelajari bagaimana kita bisa mengganti warna pada beberapa bagian CSS yang umum dipakai, jadi stay update dari tutorial ini. !
Sekian dari saya jangan lupa share ke teman, pacar, saudara dan kemanapun itu jika anda merasa tutorial ini bermanfaat dan stay tune terus di web ini!
Makasiii!!!
Posting Komentar