Blog Gue

Posts

Selector (element) CSS

Pada selector ini berfungsi untuk menyeleksi semua element yang didefinisikan pada selector, misyal kita akan menyeleksi elemen <h1></h1> , Berikut ini adalah cara penyeleksiannya yaitu dengan menggunakan h1 sebagai selector <html> <head> <style> h1{ color:red; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> <h1> Saya Harus Pintar </h1> </body> </html> Dari skript di atas kita telah memahami dan mengetahui apa fungsi dari selector element, berikut ini adalah hasil dari selector tersebut :

Pengetian Cascading Style Sheet ( CSS )

CSS merupakan skumpulan kode pemerograman yang berguna untuk membuat beberapa komponen web sehingga menjadi tampak tersetruktur dan teratur. CSS juga dapat disebut sebagai kode pem yang digunakan untuk mengidentifikasi desain dari markup ( HTML, XML, dll ). CSS merupakan sebuah teknologi internet yang direkomendasi oleh World Wide Web Consortium atau WWWC. Bicara CSS biasanya CSS selalu berpasangan dengan bahasa markup HTML karena keduanya saling mendukung dan melengkapi, HTML digunakan untuk membuat struktur konten dari halaman web sedangkan CSS digunakan untuk tampilan halaman web tersebut.

CSS : Selector elemen,elemen1{}

Selectror ini berfungsi untuk memberikan even kepada elemen dan elllement1 pada kode html, misyal kita akan menyeleksi h1,p{} makan ketika ada elemen didalah <h1><h/1> dan <p></p> akan mendapatkan even yang dibuat, sebagai contoh <html> <head> <style> h1,p{ color:red; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> <h1> Saya Harus Pintar </h1> <br>Kemana</br> </body> </html> Berikut ini adalah contoh hasilnya :

CSS : Selector elementA elemenB{} CSS

Pada selector kali ini berfungsi untuk merubah style yang terdapat pada elemenB yang terletak di element A Sebagai contoh : <html> <head> <style> h1 b{ color:blue; } </style> </head> <body> <h1> gue juga <b>Nama Saya Blade. <b> Saya Harus Pintar </h1> <b> Aku Manusia </b> </body> </html> Pada source code diatas bisa kita lihat terjadi perubahan pada elemenB yaitu <b><b> yang berada pada element a yaitu <h1></h1> sedangkan element b yang berapada diluar elementA tidak berubah. berikut ini adalah hasil script diatas :

CSS : Selector elementlokasi > elementseleksi

Mengapa pada selector ini saya gunakan nama lokasi dan seleksi, karena element ini berfungsi untuk menyeleksi semua script html element seleksi yang berada pada elementlokasi namun tidak boleh ada pada element lain pada element lokasi. Untuk yang masih bingung bias perhatikan script dibawah ini : <html> <head> <style> lok > sel{ background-color:red; } </style> </head> <body> <h1> <lok> <sel> Aku adalah Superman </sel> <span> <sel> you = kamu </sel> </span> <sel>surat</sel> </lok> <h1> </body> </html> Pada script diatas kita membuat sebuat script html yang yang berisi selector css, perhatikan pada bagian style saya membuat elementlokasi dengan nama lok dan elementseleksi dengan nama sel, jadi ketika sel berada pada lok secara langsung maka akan diberikan sebuat style background merah seperti script diatas namun tiak berlaku ketika ada element lain didalam ele

CSS : Selector Hover

Selector hover digunakan untuk membuat objek yang kita sentuh dengan kursor berubah baik itu warna background maupun warna tulisan. Untuk elemen hover ketentuan penulisannya adalah sebagai berikut “namaelemen:hover{}” berikut ini adalah contoh CSS element hover <html> <head> <style> h1:hover,p:hover{ background-color:red; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> <h1> Saya Harus Pintar </h1> <br>Kemana</br> </body> </html> Pada bagian source code diatas saya coba memberikan style menggunakan elemen hover apabila <p></p> dan <h1></h1> disentuh dengan kursor maka warna backgrounnya akan berubah. Sebagai contoh gambar dibawah ini :

Belajar memberi background berbentuk kotak HTML & CSS

Berikut ini adalah kode html yang saya gabungkan dengan css untuk memberikan sebuah aksi pada objek yang saya buat. berikut ini adalah kode programnya <html> <head> <style> .mulai{ width:110px; height:110px; background-color:red; } </style> </head> <body><center><br> <h1> Selamat Datang Bro<br> ini adalah belajar ngasih warna background dengan dibuat kotak<p> <div class="mulai"> kamu<br> aku<br> dia<br></h1></div> </body> </html> Pada kodingan diatas saya membuat style dengan bantuan css selector class dengan nama mulai. pada mulai saya isikan width dan hightnya dengan ukuran 110 px agar berbentuk kotak ukurannya sama panjang, kemudian saya berikan background-color dengan warna merah. kode program css selector class diatas saya aktifkan pada bagian <div class="mulai"> dan diakhiri </div> dan saya letakan posisinya dengan kode <ce