Artikel

Home > Artikel
 

 

Memahami Penggunaan Multi CSS


Diposting : 2017-04-22 oleh : WebHozz



Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai memahami penggunaan multi CSS. Nah untuk menjawab pertanyaan tersebut langsung aja yuk kita masuk ke pembahasan artikelnya sobat Webhozz.

Kalian dapat menggunakan beberapa file CSS eksternal dalam sebuah dokumen HTML. Kalian juga dapat menggabungkan metode CSS eksternal dan CSS internal untuk melayout dokumen HTML. Contoh yang umum misalnya:

 

                <head>

                       . . .

                       <link rel=”stylesheet” href=”tema.css”>

                       <link rel=”stylesheet” href=”gaya.css”>

                       <style>

                                body {color :    white ;    background – color :    blue ; }

                                h1, h3  {color :    red ;  }

                        </style>

                </head>

 

Pada kondisi multi CSS ini, jika ada beberapa selector dengan nama yang sama, maka aturan yang akan dipakai merupakan hasil gabungan dari aturan-aturan di tiap selector. Jika ternyata di dalamnya ada properti yang sama namun dengan nilai yang berbeda, maka yang dipakai adalah nilai pada selector yang disebutkan terakhir pada elemen head. Berikut ilustrasinya:

Misalnya di file rujukan pertaa tema.css terdapat selector h1 dan h3 sebagai berikut:

                h1  {color :   blue ;    margin-top :   50px ; }

                h3  {color :   green ;  }

Misalnya di file rujukan kedua gaya.css terdapat selector body dan h1 sebagai berikut:

                body  {background-color :   pink ;   font-size :   16px ;  }

                h1  {margin-top :   20px ;  }

Maka browser akan menggunakan aturan virtual seperti berikut untuk menampilkan halaman web:

                body  {color :   white ;   background-color :    blue ;    font-size :    16px ;  }

                h1   {color :    red ;    margin-top :    20px }

                h3    {color :    red ;   }

Penjelasannya: 

·         Selector body:

Nilai pink properti backgound-color pada file gaya.css ditimpa oleh nilai blue pada CSS internal. Adapun nilai properti font-size pada gaya.css dan nilai properti color pada CSS internal tetap digunakan.

·         Selector h1:

Aturan pada tema.css tidak dipakai karena nilai properti color-nya ditimpa oleh CSS internal dan properti margin-top-nya ditimpa oleh file gaya.css.

·         Selector h3:

Aturan pada tema.css tidak dipakai karena nilai properti color-nya ditimpa oleh CSS internal.

 

Nah sobat Webhozz itulah pembahasan singkat mengenai memahami penggunaan multi CSS. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam mempelajari CSS, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.

 

 

 




Tag : kursus android, kursus web, kursus web design, kursus php, kursus website, lenovo, woocommerce, windows, excel, xampp, php, mysql, twitter, analytic, adwords, google, maps, seo, jquery, slider, browser, game, transition, animation, whatsapp, desktop, wireframe, desain, vps, css, aplikasi, html, javascript, captcha, form, kode, kaskus, autoscroll, codeigniter, processor, bootstrap, ios, wordpress, div, span, lollypop, background, marquee, behaviour, plugin, chaton, bitcoin, opencart, payment, post, get, tooltip, button, silverlight, webmaster, phonegap, facebook, html5, swicth, sass, bbm, alert, mvc, fungsi, mobile, loading, nokia, template, traffic, laravel, yii, jquerymobile, blogger, adobe, baidu, hosting, font, server, input, sticky, menu, tokoonline, prestashop, joomla, java, yahoo, angular, microsoft, responsive, generator, visitor, counter, flatdesign, kursus web design jakarta, kursus web design bandung, kursus website bandung, kursus php bandung, kursus android bandung, kursus java bandung, kursus web bandung, Aplikasi Ramadhan, Cara Membuat Website, Tempat Kursus Website Bandung, Manfaat Internet, Menggunakan Wireframe Web, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, kursus web jogja, kursus website jogja, kursus web design jogja, kursus web programming jogja, kursus php jogja, kursus android jogja, kursus android programming jogja, kursus java jogja, kursus webmaster jogja, kursus codeigniter jogja, kursus wordpress jogja, kursus seo jogja, kursus vb jogja, kursus sql server jogja, kursus game jogja, kursus website jakarta, kursus web design jakarta, kursus web programming jakarta, kursus webmaster jakarta, kursus php jakarta, kursus wordpress jakarta, kursus android jakarta, kursus seo jakarta, kursus java jakarta, kursus sql server jakarta, framework cordova, mengenal framework cordova, apa itu cordova, membuat aplikasi android dengan cordova, cordova android, aplikasi hybrid android, cordova vs phonegap, Kursus Website Surabaya, Kursus Web Design Surabaya, Kursus Webmaster Surabaya, Kursus PHP Surabaya, Kursus Wordpress Surabaya ,