hello guys, kalian ketika klaian ingin membuat sebuah aplikasi berbasis web, untuk membuat sebuah tampilan yang rapi dan teratur, pasti kalian akan memerlukan yang namnya CSS. pada artikel kali ini, kita akan Mengenal CSS, untuk melengkapi pembuatan website kalian.
Apa Itu CSS
CSS merupakan singkatan dari Cascading Style Sheet, merupakan sebuah dokumen web yang mengatur element HTML dengan property yang tersedia sehingga dapat membuat tampilan HTML dengan berbagai gaya yang diigninkan.
apakah CSS merupakan bahasa pemprograman ?
memang ada sebagian orang yang meanggap CSS bukan sebagai bahasa pemprograman karena memiliki struktur yang sederhana, melainkan hanya berupa kumpulan aturan – aturan style elemen HTML.
Cara kerja dari CSS ini yaitu dengan memodifikasi HTML dengan memilih elemen HTML yang akan diatur kemudian memberikan property dengan tampilan sesuai yang diinginkan. Terdapat 3 bagian pada CSS untuk mengatur tampilan HTML yaitu terdiri dari Selector untuk memilih elemen yang akan di beri aturan, property yang merupakan aturan yang diberikan dan terakhir adalah value yang merupakan nilai dari aturan yang diberikan.
Penulisan CSS
Penulisan CSS pada umumnya terbagi dari 3 macam bentuk penulisan yaitu inline, internal dan external. dari ketiga cara penulisan kalian dapat menggunakan sesuai dari kebutuhan kalian masing masing.
Inline CSS, penulisan yang menggunakan atribut stye langsung dituliskan didalam tag HTML. Cara ini cocok kalian gunakan ketika CSS tidak banyak memiliki property dan bersifat permanent. Kekurangan dari menggunakan metode ini yaitu kalian mungin akan mengalami kesusahan ketika melakukan perubahan desain tampilan. Berikut contoh penggunaan dari inline CSS.
<p style="color:white">hello</p>
<p style="color:red; font-weight:bold;">hello</p>Internal CSS, cara penulisan CSS pada dokument HTML, jika menggunakan PHP, di dalam dokumen PHP langsung dengan menggunakan tag <style>… isi CSS …</style> yang biasa ditulis dalam tag <head> … </head>. Cara ini dapat kalian gunakan jika CSS tersebut hanya mengatur satu buah halaman, kekurang dari cara ini kalian tidak dapat menerapkan CSS yang kalian gunakan pada dokumen ke dokumen lain. Misal kalian menggunakan internal CSS pada page HTML dengan nama home, kemudian kalian ingin menggunakan resource CSS yang telah kalian buat pada halaman home langsung, maka hal ini tidak dapat kalian lakukan, kecuali kalain copy paste kembali CSS yang ada pada halaman Home.
contoh penggunaan pada internal CSS
...
<head>
<style type="text/css">
p{
color: yellow;
}
</style>
</head>
<body>
<p> teks bewarna kuning </p>
</body>External CSS, cara penulisan CSS dengan file terpisah dari file html. Skrip CSS terpisah dan disimpan dengan ekstensi *.css. Cara agar dapat terhubung antara HTML dan CSS, pada umumnya file CSS dipanggil pada bagian head mengginakan code
<link rel="stylesheet" href="file.css">code di atas merupakan penghubung antara file CSS dengan HTML. pada bagian file.css isi sesuai nama dan tempat kalian menyimpan file CSS, dihitung dari folder file html yang ingin dimasukkan CSS.
contoh dapam penggunaan External CSS.
membuat sebuah file dengan nama style.css
p{
color: yellow;
}berikutnya membuat file dengan nama home.html
<!DOCTYPE HTML>
<html>
<head>
<title> belajar css </title>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> teks bewarna kuning </p>
</body>
</html>
cara penulisan external CSS merupakan gaya yang paling umum digunakan dan disarankan, karena pemmbuatan CSS dan HTML terpisah, klaian memiliki fokus untuk mengatur tampilan antara CSS dan HTML, jika kalian memperbaiki tampilan, kalian hanya perlu berfokus pada file CSS, dan style yang ada pada CSS dapat digunakan oleh dokumen lain.
sampai sini kita dalam Mengenal CSS, pada artikel selanjutnya kita akan membahas lebih dalam lagi mengenai CSS. Kita akan praktek menggunakan CSS secara dasar dalam mebuat sebuah tampilan. semoga artikel ini bermanfaat sampai jumpa pada artikel berikutnya.
