[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-cara-memanggil-css":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},466,"cara-memanggil-css","Tutorial CSS : Cara Memanggil CSS","Jika kamu sudah paham mengenai apa itu css, selajutnya kita akan belajar bagaimana cara memenggil css sehingga bisa digunakan di dalam file html. Secara umum ada 3 cara memanggil css di dalam html. Ya",null,[],"2021-10-21T16:00:00Z","2026-07-14T04:39:41.885789Z","\u003Cp>Jika kamu sudah paham mengenai apa itu css, selajutnya kita akan belajar bagaimana cara memenggil css sehingga bisa digunakan di dalam file html.\u003C\u002Fp>\u003Cp>Secara umum ada 3 cara memanggil css di dalam html. Yaitu:\u003C\u002Fp>\u003Col>\u003Cli>Inline CSS\u003C\u002Fli>\u003Cli>Internal CSS\u003C\u002Fli>\u003Cli>External CSS\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Kita akan bahas satu persatu cara mememanggil CSS dengan datail.\u003C\u002Fp>\u003Ch2>Inline CSS\u003C\u002Fh2>\u003Cp>Inline CSS adalah cara memanggil CSS yang paling mudah dan cepat dilakukan. Caranya adalah menulis CSS ke dalam element HTML langsung. Dengan nambahkan tag \u003Ccode>style=\"\"\u003C\u002Fcode> secara langsung di tag html.\u003C\u002Fp>\u003Cp>\u003Cstrong>Contoh\u003C\u002Fstrong>: Penulisan CSS dengan mode \u003Cstrong>Inline\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode><div style=\"background:red;color:white;padding:10px\">Div dengan background merah<\u002Fdiv>\n<div style=\"background:black;color:white;padding:10px\">Div dengan background hitam<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Internal CSS\u003C\u002Fh2>\u003Cp>Cara memanggil CSS yang kedua adalah dengan mode internal. Berbeda dengan inline css yang menulis style langsung di dalam element, internal CSS membuat CSS di dalam tag \u003Ccode><style><\u002Fstyle>\u003C\u002Fcode> dan ditaruh di dalam tag \u003Ccode><head><\u002Fhead>\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Cstrong>Contohnya:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode><html>\n <head>\n <title>Internal CSS<\u002Ftitle>\n <style>\n div {\n background: red;\n color: white;\n padding: 15px;\n margin: 15px;\n }\n .border {\n border: 1px solid green;\n }\n <\u002Fstyle>\n <\u002Fhead>\n <body>\n <div class=\"border\"> Contoh Internal CSS<\u002Fdiv>\n <div class=\"border\"> Contoh Internal CSS<\u002Fdiv>\n <div class=\"border\"> Contoh Internal CSS<\u002Fdiv>\n <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Hasilnya:\u003C\u002Fp>\u003Cp>Internal CSS lebih efektif dan efisien dibandingkan dengan \u003Cstrong>inline CSS\u003C\u002Fstrong>. Dengan internal CSS kamu bisa membuat styling dan bisa dipakai berulangkali di dalam element HTML.\u003C\u002Fp>\u003Ch2>External CSS\u003C\u002Fh2>\u003Cp>Cara memanggil CSS yang terakhir dengan \u003Cstrong>external CSS\u003C\u002Fstrong>. External artinya kita memisahkan CSS dari file HTML. Untuk memasukkan CSS ke dalam file HTML kita akan memakai tag \u003Ccode><link rel=\"stylesheet\" href=\"path_ke_css_file\" \u002F>\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Jika sedang membuat project web yang besar, sebaiknya menggunakan mode external CSS karena akan jauh lebih mudah untuk maintenance dan juga efisiensi size CSS.\u003C\u002Fp>\u003Cp>\u003Cstrong>Contohnya:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\u003Cstrong>Pertama:\u003C\u002Fstrong> Misalnya kita punya file \u003Cstrong>.css\u003C\u002Fstrong> dengan nama \u003Ccode>style.css\u003C\u002Fcode>. File ini akan berisi semua style style CSS.\u003C\u002Fp>\u003Cp>\u003Cstrong>Kedua:\u003C\u002Fstrong> Di dalam file HTML kita akan include dengan menggunakan tag \u003Ccode><linl \u002F>\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Isi dari \u003Cstrong>style.css\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode>body {\n background: grey;\n}\ndiv {\n background: red;\n color: white;\n padding: 15px;\n margin: 15px;\n}\n.border {\n border: 1px solid green;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Include \u003Ccode>style.css\u003C\u002Fcode> di dalam \u003Ccode>index.html\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode><html>\n <head>\n <title>External CSS<\u002Ftitle>\n <link rel=\"stylesheet\" href=\"style.css\" \u002F>\n <\u002Fhead>\n <body>\n <div class=\"border\"> Contoh External CSS<\u002Fdiv>\n <div class=\"border\"> Contoh External CSS<\u002Fdiv>\n <div class=\"border\"> Contoh External CSS<\u002Fdiv>\n <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika dilihat-lihat, external CSS ini adalah memindahkan internal CSS ke dalam sebuah file.\u003C\u002Fp>\u003Cp>Oke guys, itulah cara memanggil CSS. Ada 3 yaitu \u003Cstrong>inline\u003C\u002Fstrong>, \u003Cstrong>internal\u003C\u002Fstrong>, dan \u003Cstrong>external\u003C\u002Fstrong>. Semoga bisa dimengerti ya. Selanjutnya kita akan mebahas satu-persatu tag CSS di artikel selanjutnya.\u003C\u002Fp>","Jika kamu sudah paham mengenai apa itu css, selajutnya kita akan belajar bagaimana cara memenggil css sehingga bisa digunakan di dalam file html. Secara umum ad",[],[],0]