Show
Ada 3 cara untuk menambahkan style CS ke website Anda: Anda bisa menggunakan internal CSS dan menambahkannya ke rule CSS di dalam bagian <head> pada dokumen HTML, atau menghubungkan file CSS eksternal yang mengandung semua rule CSS, atau yang terakhir adalah menggunakan inline CSS. Tutorial ini akan membahasa 3 cara tersebut, beserta keuntungan dan kerugiannya masing-masing. Simak perbedaan CSS berikut ini. Kode CSS internal diletakkan di dalam bagian <head> pada halaman. Class dan ID bisa digunakan untuk merujuk pada kode CSS, namun hanya akan aktif pada halaman tersebut. Style CSS yang dipasang dengan metode ini akan di-download setiap kali halaman dipanggil, jadi ini akan meningkatkan kecepatan akses. Namun, ada beberapa case dimana penggunaan internal stylesheet justru berguna. Salah satu contohnya adalah untuk mengirimkan template halaman ke seseorang – karena semuanya bisa terlihat dalam 1 halaman, maka akan lebih mudah untuk melihat previewnya. CSS internal diletakkan di dalam tag <style></style>. Contohnya: <head> <style type="text/css"> p {color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} #button-go, #button-back {border: solid 1px black;} </style> </head>Manfaat internal CSS:
Kekurangan menggunakan Internal CSS:
Cara menambahkan internal CSS ke halaman HTML1. Buka file HTML Anda dengan menggunakan text editor. Jika halaman sudah di-upload ke hosting, Anda bisa menggunakan text editor yang telah disediakan oleh hosting Anda. Jika Anda memiliki file HTML di komputer Anda, Anda bisa menggunakan text editor apapun untuk meng-edit dan kemudian meng-upload file ke akun hosting Anda menggunakan aplikasi FTP. 2. Temukan bagian awal kode <head> dan tambahkan kode berikut ini di bawahnya: <style type="text/css">3. Pada baris baru, tambahkan rule CSS: body { background-color: blue; } h1 { color: red; padding: 60px; }4. Setelah Anda menambahkan rule CSS, tambahkan tag penutup: </style>Nantinya file HTML yang sudah ditambahkan style CSS akan terlihat seperti ini: <!DOCTYPE html> <html> <head> <style> body { background-color: blue; } h1 { color: red; padding: 60px; } </style> </head> <body> <h1>Hostinger Tutorials</h1> <p>This is our paragraph.</p> </body> </html>Opsi 2 – External CSSSalah satu cara yang paling nyaman untuk menambahkan CSS ke website Anda adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang Anda buat pada file CSS akan tampil pada website Anda secara keseluruhan. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman: <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>Dalam contoh diatas, file style.css berisikan semua rule. Contohnya: .xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; }Manfaat CSS eksternal:
Kekurangan CSS eksternal:
Opsi 3 – Inline CSSInline CSS digunakan untuk tag HTML tertentu. Atribut <style> digunakan untuk memberikan style ke tag HTML tertentu. Cara ini kurang direkomendasikan, karena setiap tag HTML malah harus diberikan style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, pada saat Anda tidak memiliki akses ke file CSS atau harus mengubah style untuk 1 elemen saja. Manfaat Inline CSS:
Kekurangan inline CSS:
KesimpulanKini Anda sudah mengetahui beberapa cara menambahkan CSS ke website Anda dan juga mengetahui perbedaan antara inline, eksternal dan internal stylesheets.
Menampilkan sebuah gambar tentu menjadi hal penting dalam mendesain sebuah halaman website. Konten yang memiliki bentuk visual lebih menarik dari pada konten yang seluruhnya hanya berisi teks. Semua itu bisa diatasi dengan menggunakan teknik CSS Background Image. background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh. Hmm.. menarik juga. Bagaimana caranya? Mari kita pelajari sekarang! Langkah 1: Buat Halaman HTMLPertama kita harus membuat sebuah halaman html sederhana. Silahkan buka Notepad teman-teman dan ketikan kode html berikut. Kode HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Background Image</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>Hello CSS!</h1> </body> </html> Simpan dan beri nama index.html. Langkah 2: Buat File CSSAku lebih sering membuat folder untuk menyimpan file css maupun image sendiri agar lebih terstruktur rapih. Untuk itu, silakan kamu buat dua buah folder dan beri nama css dan images dalam direktori folder projek kamu. Buatlah sebuah file CSS dengan nama style.css. Kemudian letakan ke dalam folder css seperti gambar diatas. Buka file style.css dan ketikan kode berikut. Kode CSS: body { background-image: url('../images/contoh-gambar.jpg'); } Perhatikan cara penulisan direktori diatas. Aku menggunakan tanda ../ karena folder images aku letakan diluar folder css. Apabila kamu membuat folder images di dalam folder css (tidak direkomendasikan), maka penulisannya harus seperti ini: Kode CSS: body { background-image: url('images/contoh-gambar.jpg'); } Simpan dan buka file index.html yang sebelumnya kita buat. Hasilnya akan seperti gambar berikut. Langkah 3: Opsi CSS Background ImageAda beberapa cara untuk mengatur image yang telah kita ubah menjadi background dengan css. Diantaranya adalah: Tampilan Background Image Secara PenuhKode CSS: body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } Background Image Fixed (tidak dapat di-scroll)Kode CSS: body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; background-attachment: fixed; /* Tambahkan baris berikut */ } Background Image Tanpa Pengulangan (no-repeat)Kode CSS: body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; /* Tambahkan baris berikut */ } Background Image dengan Gradient WarnaPenggunaan css background-image juga dapat dipakai untuk menampilkan warna gradient atau gradasi. Cara ini biasa diterapkan pada elemen button. Ada 2 tipe gradasi pada css, yaitu Linear Gradient dan Radial Gradient.
Linear Gradient – BasicDasar penggunaan linear-gradient secara default dimulai dari atas ke bawah. Kita akan coba terapkan pada sebuah elemen button. Syntax: background-image: linear-gradient(warna atas, warna bawah); Kode CSS: button.gradient { background-image: linear-gradient(orange, red); } Kode HTML: <body> <button class="gradient">Hello CSS!</button> </body> Hasil akan seperti berikut: Linear Gradient – DerajatTeknik menggunakan css linear-gradient dengan memakai derajat. Nilai derajat ditulis dengan deg yaitu singkatan dari degree. Syntax: background-image: linear-gradient(derajat, warna awal, warna akhir) Kode CSS: button.gradient { background-image: linear-gradient(45deg, red, blue) } Hasilnya akan seperti berikut: Linear Gradient – Multi ColorTeknik membuat gradasi warna dengan memakai perpaduan lebih dari 2 warna. Caranya nggak jauh berbeda dengan contoh-contoh lainnya. Kita hanya menambahkan opsi warna pada baris linear-gradient tersebut. Syntax: background-image: linear-gradient(opsi_arah, warna_1, warna_2, warna_3, warna_dst...); Kode CSS: button.gradient { background-image: linear-gradient(180deg, red, yellow, green); } Hasilnya akan seperti berikut ini: Contoh Penggunaan Background GradientNah sob, kurang lengkap kayanya kalau kita nggak coba langsung praktekan ke elemen HTML supaya belajar background image jadi makin sip. Background Gradient pada HeadingKamu sudah tau belum, sob? Heading (H1, H2, H3, dst) juga bisa kita bikin keren dengan menggunakan background gradient loh. Kode HTML: <body> <h2 class="heading-gradient">iPad Pro. The world's fastest tablet ever.</h2> </body> Kode CSS: h2.heading-gradient { background-image: linear-gradient(90deg, #B92B27, #1565C0); } Hasil awal dari kode diatas akan tampak seperti ini: iPad Pro. The world's fastest tablet ever. Udah gitu aja? Belum. Ada kode rahasia supaya warna gradien nya hanya untuk si heading saja, bukan malah menjadi latar. Hehe. Tambahkan kode berikut pada script css yang telah kita buat. Kode CSS: h2.heading-gradient { background-image: linear-gradient(90deg, #B92B27, #1565C0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } Hasil akhirnya akan seperti ini: iPad Pro. The world's fastest tablet ever. Gimana keren nggak, sob? Selain Heading, kamu juga bisa menggunakannya pada elemen Paragraph <p> yaa.. PenutupTutorial CSS background image banyak ditemukan di internet sekarang. Kamu bisa belajar di situs seperti w3schools. Untuk teman-teman yang ingin belajar membuat website dengan html, aku membuat materi belajar html dari nol khusus pemula. Materi yang akan dipelajari sebagai berikut:
Silakan kamu baca materi tersebut di link berikut. Gratis! Belajar HTML Gampang Banget! – HTML Warrior #1 Demikian tutorial belajar CSS mengubah image menjadi background. Semoga bermanfaat dan jangan lupa share yah 🙂 Baca Juga:
|