CSS dan Penerapannya

Posted by : Unknown Wednesday, April 30, 2014


Setelah beberapa waktu tidak posting artikel apapun, akhirnya Gudang Receh mulai ngeblog lagi. Pada posting kali ini Gudang Receh akan sedikit berbagi tentang CSS. Apa itu CSS ?
CSS adalah singkatan dari "Cascading Style Sheets" merupakan suatu bahasa markup (bukan bahasa pemrograman) yang berfungsi untuk mengatur style pada webpage html. Apakah fungsi CSS ?
Apabila dalam suatu web page  html akan membuat style untuk suatu element, maka pada sebagian element yang lain harus menuliskan script untuk stylenya lagi. Disinilah fungsi dari CSS, yaitu untuk meringkas style tersebut sehingga tidak perlu diulang-ulang. Bahkan juga dapat diterapkan pada web page lainnya.

Penerapan CSS
Ada 3 cara dalam menerapkan script CSS pada web page yang kita buat:
1. Inline
Pada metode ini, script CSS di letakkan didalam suatu tag html. Contohnya dibawah ini:
<html>
<head>
<title>Contoh Penulisan CSS Inline</title>
</head>
<body bgcolor="#FFFFFF">
<div id="contoh1">
Ini adalah contoh text tanpa ditambahkan script CSS </div>
<div id="contoh2" style="font-size: 24pt;">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point </div>
<div id="contoh3" style="color: blue; font-size: 14pt;">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru </div>
</body>
</html>

Hasilnya akan seperti dibawah:

Contoh Penulisan CSS Inline
Ini adalah contoh Text ini tanpa ditambahkan script CSS

Text ini ditambahkan script CSS inline. Besar font 24 point

Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru

Namun menurut saya pribadi, metode ini kurang efektif, karena hampir sama dengan pemformatan tulisan pada html biasa yang harus mengulang - ulang script tersebut.

2. Embedded
Pada metode ini script di tulis diantara tag <style> </style> yang ada dalam head. Contohnya seperti dibawah:

<html>
<head>
<title>Contoh Penulisan CSS Embedded</title>
<style>
#contoh1 {
color:blue;
}
#contoh2 {
color:red;
font-size:24pt;
}
.contoh3 {
color:green;
font-size:14pt;
}
</style>
</head>
<body>
<div id="contoh1">
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.</div>
<div id="contoh2">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.</div>
<p class="contoh3">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.</div>
</body>
</html>

Dan hasilnya akan seperti dibawah ini:

Contoh Penulisan CSS Embedded
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.

Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.

Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.

Penerapan metode embedded lebih efektif dibanding dengan metode inline, karena tidak perlu mengulang-ngulang script pada setiap tag. Namun pada metode ini masih kurang efektif karena hanya bisa diterapkan dalam satu web page html saja. Untuk diterapkan pada web page html lainnya maka kita harus menuliskannya lagi atau dapat juga copy dan paste.

3. External
Maksud dari external adalah, style script yang kita tulis disimpan dengan nama sendiri, dengan ekstensi file .css . Kemudian dipanggil oleh web page html yang telah dibuat. Contoh penerapan CSS External:
<html>
<head>
<title>Contoh Penulisan CSS External</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="contoh1">
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.</div>
<br>
<div id="contoh2">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.</div>
<p class="contoh3">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.</div>
</body>
</html>
Script diatas adalah script html yang akan diberi style. Simpan dengan nama sesuka anda. Misal "index.html"
Dan script berikut adalah script CSS untuk memberi style pada web page html diatas.
#contoh1 {
color:blue;
}
#contoh2 {
color:red;
font-size:24pt;
}
.contoh3 {
color:green;
font-size:14pt;
}
Simpan dengan nama yang sama dengan file yang dipanggil dalam tag <link rel="stylesheet" type="text/css" href="style.css" />
Pada metode ini, menurut saya pribadi adalah paling efektif untuk diterapkan pada pembuatan web anda. Karena beberapa web page sekaligus dapat memanggil satu style script.

Itulah sedikit yang dapat Gudang Receh bagi, dan sepertinya masih banyak salah dan kata yang membingungkan. Mohon komentarnya untuk kritik dan saran.


Source gambar
Tags: css, script, style, html, web page, web, page, sheets,

{ 26 comments... read them below or Comment }

  1. UnknownJanuary 25, 2016 at 10:08 PM

    Akan langsung dicoba gan.

    bagi agan yang berminat belajar komputer bisa dilihat di situs berikut ini Kursus Komputer di Denpasar

    ReplyDelete
  2. UnknownMarch 10, 2020 at 3:37 AM

    Assalamualaikum,terima kasih kak atas website nya.., berkat website ini saya dengan mudah memahami tentang cara penerapan css..,dan jujur artikelnya mudah dipahami,bermanfaat,dan sangat membantu saya yang baru belajar tentang penerapan css ini..,saya berharap kedepannya kakak memberikan artikel yang lebih bermanfaat lainnya,dan sukses terus untuk kedepannya,perkelkan nama saya afgar wira satriaji
    Ini website kampus kami
    https://www.atmaluhur.ac.id/

    ReplyDelete
  3. UnknownMarch 10, 2020 at 11:46 PM

    Wah artikel kakak sangat menarik. Dengan adanya artikel kakak ini saya dengan mudah memahami tentang cara penerapan css..
    Saya harap kakak dapat memberikan artikel-artikel yang berguna dan bermanfaat bagi orang banyak...
    Sukses terusss kak...Ditunggu artikel selanjutnya...
    Perkenalkan nama saya Meilianda Aryanti Abelia,kunjungi website kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  4. UnknownMarch 10, 2020 at 11:46 PM

    Wahhh artikelnya keren kak,saya udah cari banyak tentang artikel ini,tapi sulit dipahami dan agak susah dimengerti.Setelah saya lihat artikel yang kakak buat,saya mudah mengerti dan artikelnya tidak rumit,makasih banyak ya kak sudah membantu saya,,,sukses selalu kak
    Perkenalkan nama saya Sawalia Safitri,kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  5. Lailatul Marfu'ahMarch 11, 2020 at 3:42 AM

    wow artikelnya bagus min,penjelasannyapun mudah dimengerti,..semoga kedepannya lebih bagus lagi dan bisa memberikan ilmu yang bermanfaat lainnya...Ditunggu artikel selanjutnya
    kenalkan nama saya LAILATUL MARFU'AH,website kampus saya di https://www.atmaluhur.ac.id/

    ReplyDelete
  6. UnknownMarch 11, 2020 at 6:28 PM

    Wahhh...artikelnya bagus sekali kak.Dengan adanya artikel kakak ini memudahkan saya dalam mempelajari penerapan css.semoga artikel selanjutnya bisa bermanfaat .
    Sekses terus kak.
    Kenalkan nama saya NUZUL SYAFITRI,kunjungi wabsite kampus saya di http://www.atmaluhur.ac.id/

    ReplyDelete
  7. UnknownMarch 11, 2020 at 6:28 PM

    Wahhh...artikelnya bagus sekali kak.Dengan adanya artikel kakak ini memudahkan saya dalam mempelajari penerapan css.semoga artikel selanjutnya bisa bermanfaat .
    Sekses terus kak.
    Kenalkan nama saya NUZUL SYAFITRI,kunjungi wabsite kampus saya di http://www.atmaluhur.ac.id/

    ReplyDelete
  8. ulfaMarch 11, 2020 at 9:31 PM

    maantaapp kak artikelnya cocok untuk saya yang baru belajar. saya semakin mengerti. artikelnya mudah dipahami. terus bekarya dalam membuat artikelnya kak. terimaksih ilmuanya dan artikel ini. nama saya Ulfa Maryanti website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  9. dermaMarch 11, 2020 at 9:51 PM

    wahhhhh,,, Sangat menarik sekali kak. Dengan adanya artikel ini saya dapat memahami dan semakin mengerti. Semoga artikel ini aktif terus kedepannya dan semoga sukses. Ditunggu artikeL selanjutnyaaa kak. saya Derma Anzeny. website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  10. JhenyMarch 11, 2020 at 10:30 PM

    Wess.terimakasih kakak,untuk artikel ini, yang menjelaskan tentang CSS dan Penerapannya.informasi yang disampaikan dalam artikel ini membantu saya dalam mempelajari cara penerapan CSS.Terimakasih ya atas informasinya.
    Perkenalkan nama saya JHENY SANDELLA. Website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  11. EvaMarch 12, 2020 at 9:15 PM

    Alhadulillah ... thank you sis, with this article I am easy to understand how to implement CSS ...
    I hope you can provide useful and useful articles for many people ...
    Terusss success sis ... Waiting for the next article ...
    Introducing my name Eva Maulani, visit my campus website https://www.atmaluhur.ac.id

    ReplyDelete
  12. UnknownMarch 13, 2020 at 6:33 AM

    Waaaawwww....terimakasihh kak sudah berbagi ilmunya....
    Artikelnya sangat keren dan membantu saya dalam belajar dan memahami bagaimana cara penerapan CSS..
    Terus berkarya kak.ditunggu artikel kak selanjutnya.
    Perkenalkan nama saya adeka sri purwanti.
    Jangan lupa kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  13. Dita rahmandaMarch 14, 2020 at 1:33 AM

    Selamat siang kak,terimakasih atas ilmunya sangat bermanfaat terutama pemula seperti saya,sangat mudah dipahami dan di dicoba,semoga kakak terus memberi banyak lagi info.perkenalkan nama saya Dita Rahmanda,nim 1922500076,dari kelompok si2j,dan link kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  14. Ardo Jordi SetiawanMarch 16, 2020 at 4:46 AM

    terimakasih kak atas ilmunya sangat bermanfaat terutama pemula seperti saya,sangat mudah dipahami dan di dicoba,semoga kakak terus memberi banyak lagi info.perkenalkan nama saya ardo jordi setiawan,dan link kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  15. UnknownMarch 16, 2020 at 6:37 AM

    Terimkasih min, artikel ini sangat membantu saya dalam mempelajari apa itu CSS. cara penerapannya pun sangat menarik sehingga mudah untuk dipahami. sukses selalu dan salam ilmu komputer.
    perkenalkan saya EKA SUKMA DEWI dan kunjungi website kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  16. Andi DefriansyahMarch 16, 2020 at 6:37 AM

    Terimakasih min untuk artikelnya saya merasa sangat terbantu setelah membaca artikel yang mimin buat. Karena sedang belajar dan masih kebingungan dalam format teks HTML tentang cara pembuatan dan penambahan tabel. Artikel mimin sangat bagus, terus berkarya, dan saya tunggu artikel berikutnya. Nama saya Andi Defriansyah dari kampus Atmaluhur (web kami https://www.atmaluhur.ac.id/)

    ReplyDelete
  17. aqilafadiyaMarch 16, 2020 at 7:21 AM

    minn.. terimakasih ya atas artikelnya ini membantu sekali dan dapat mudah dimengerti bagi saya untuk dipahami hehe sehingga saya bisa menerapkan bagaimana cara penerapan css itu loh. oh iya terus berkarya ya min dan bisa membuat artikel yang terbaik.perkenalkan nama saya Aqilla Fadiya Haya , ohbiya kenalkan juga website kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  18. UnknownMarch 16, 2020 at 8:47 AM

    Terimakasih atas informasinya yg sangat membantu,Semoga web ini terus berkembang,Dapat memberikan informasi yg lebih banyak lagi. Semangat berkarya min. Perkenalkan Saya peri Supriyanto
    Kunjungi website kampus kami di
    https://www.atmaluhur.ac.id

    ReplyDelete
  19. Margiana RahayuMarch 16, 2020 at 9:36 AM

    This comment has been removed by the author.

    ReplyDelete
  20. Margiana RahayuMarch 16, 2020 at 9:46 AM

    Hallo Min artikelnya membantu banget nih bagi saya yg baru belajar tentang cara penerapan CSS, semoga bermanfaat bagi orang lain & diri saya sendiri tentunya, sukses terus ya Min.. ditunggu artikel selanjutnya :)
    salam kenal nama saya Margiana Rahayu kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  21. Arnold Julyanto SibaraniMarch 16, 2020 at 6:03 PM

    Terimakasih kak artikel sangat membantu sekali, saya jadi mengerti dan bisa mempelajari,belajar sedikit demi sedikit tentang css dan penerapan nya. Tetap terus berkarya kak dan sukses selalu. Perkenalkan nama saya Arnold Julyanto Sibarani,kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  22. NafiladonaMarch 16, 2020 at 6:35 PM

    Terimakasih kak artikelnya sangat bagus dan sangat membantu saya untuk mengerjakan tugas ,setelah saya membaca artikel kakak saya lebih mudah memahami dan mengerti tentang CSS dan penerapan nya.
    Terus berkarya ya kak :)
    Perkenalkan saya nafiladona
    Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  23. Wahyu ramadhanMarch 16, 2020 at 7:09 PM

    Hallo kak, terimakasih atas artikel yang kakak buat tentang mempelajari penerapan css, bermanfaat dan dimengerti bagi saya yang masih pemula ini kak. Ditunggu kak artikel berikutnya sukses dan sehat selalu ya kak..
    Perkenalkan kak nama saya Wahyu Ramadhan. Kunjungi website kampus kami ya kak https://www.atmaluhur.ac.id/

    ReplyDelete
  24. Gazza muhamad suryansahMarch 16, 2020 at 7:45 PM

    Terimakasih Min, artikel ini sangat membantu saya yang sedang mempelajari dan pemrograman web semangat min untuk membuat artikel yang lebih baik lagi dan lebih semangat lagi.
    Nama saya gazza muhamad suryansah
    Nim 1922500013
    https://www.atmaluhur.ac.id/

    ReplyDelete
  25. Abdul rahimMarch 16, 2020 at 8:41 PM

    terimakasih min artikel nya sangat membantu untuk mengerjakan tugas saya untuk penerapan CSS semangat terus bikin artikel nya min.perkenalkan
    Saya Abdul rahim
    Kunjungi juga website kampus kami
    https://www.atmaluhur.ac.id/

    ReplyDelete
  26. UnknownMarch 16, 2020 at 10:54 PM

    Terimakasih kak artikel nya sangat membantu saya untuk mengerjakan tugas dan juga setelah saya membaca artikel nya saya jadi lebih paham.
    Saya tunggu artikel berikutnya kak.
    Perkenalkan saya Lena,
    Kunjungi juga website kampus kami
    https://www.atmaluhur.ac.id/

    ReplyDelete

Share / Subscribe:

Berita IT Terkini

Iptekini Iptekini

Popular Post

Powered by Blogger.

- Copyright © Gudang Receh Powered by Blogger - Themes by Johanes Djogan -