Cara membuat kode CSS | WebCSS | 05

Contents

1 Share this:
2 Related posts:

Cara membuat kode CSS dalam desain halaman website terdapat 3 cara diantaranya : Inline Style CSS, Internal Style CSS dan External style CSS. Lalu seperti apa cara penulisan dari ketiganya? berikut penjelasan dari 3 cara membuat kode CSS :

1. Cara membuat kode CSS dengan inline style CSS

[sc name=”iklan umum terbaik 300 x 250 float left”]

Cara membuat kode css dengan Inline CSS merupakan cara yang paling praktis tetapi “Sangat tidak disarankan” !! secara teknis, cara ini mencampurkan kode HTML dengan kode CSS dan membuat kode CSS menjadi sangat banyak dan membuat halaman web menjadi lebih besar. Selain itu jika ada revisi untuk kode CSS yang ingin diperbaharui atau diperbaiki, anda mesti meninjau setiap baris kode yang ingin di revisi kode CSS-nya, Tentu hal ini sangat merepotkan dan memakan waktu yang lumayan lama saat ngoding.

Lalu, jika cara ini tidak disarankan karena lumayan merepotkan dan membuat halaman web menjadi lebih besar, mengapa cara inline style di ciptakan dalam cara penulisan kode CSS? Sebab, dalam beberapa kasus misalnya anda tidak memiliki akses langsung ke dokumen HTML, Inline Style CSS ini merupakan cara terbaik dalam mengatur tampilan teks. Contoh dari penulisan Inline Style CSS adalah sebagai berikut :

<!DOCTYPE html>
<head> 
 <meta charset="UTF-8">
</head>
<body>
 <p style="color:blue; background-color:yellow"> Paragraf ini menggunakan Inline Style CSS, efek dari CSS ini akan menjadikan paragraf ini memiliki teks yang berwarna biru dan memiliki latar belakang berwarna kuning </p>
 <p> Paragraf ini tidak menggunakan Inline Style CSS sehingga tidak ada efek yang ditimbulkan pada teks ini </p>
</body>
</html>

Jika desain kode CSS diatas digenerate pada web browser, maka tampilannya akan menjadi seperti ini :

2. Cara membuat kode CSS dengan Internal Style CSS

Cara membuat kode CSS dengan Internal Style CSS adalah cara terbaik untuk membuat kode CSS yang efektif. Walaupun kode CSS masih dalam 1 halaman dengan desain kode HTML, tetapi posisi CSS terletak tersendiri dan tidak tercampur dengan HTML. Kode CSS dengan Internal Styule CSS terletak di dalam tag HTML <head> <Style> ….. Kode CSS disini ….. </style></head>. untuk menjelaskan lebih spesifik, anda dapat melihat contoh cara membuat kode CSS dengan Inline Style CSS berikut :

<!DOCTYPE html>
<head> 
 <meta charset="UTF-8">
 <title> Belajar CSS di website Perpusteknik.com </title>
 <style>
 .internal-style-css {
  font-size: 20px;
  background-color: yellow;
  color: blue;
  }
 </style>
</head>
<body>
 <p class="internal-style-css"> Paragraf ini adalah paragraf pertama, dan ini adalah paragraf yang mengandung Internal Style CSS</p>
 <p> Paragraf ini adalah paragraf kedua, dan ini tidak mengandung Internal Style CSS </p>
 <p class="internal-style-css"> Paragraf ini adalah paragraf ketiga, dan ini adalah paragraf yang mengandung Internal Style CSS</p>
 <p> Paragraf ini adalah paragraf keempat, dan ini tidak mengandung Internal Style CSS </p>
 <p class="internal-style-css"> Paragraf ini adalah paragraf kelima, dan ini adalah paragraf yang mengandung Internal Style CSS</p>
 <p> Paragraf ini adalah paragraf keenam, dan ini tidak mengandung Internal Style CSS </p>
</body>
</html>

Jika desain kode CSS diatas digenerate pada web browser, maka tampilannya akan menjadi seperti ini :

Dengan memahami Gambar diatas tentu anda sudah dapat membandingkan bahwa Cara membuat kode dengan Internal Style CSS lebih menjadikan kode HTML teratur, tidak tercampur dengan CSS dan membuat kode HTML menjadi lebih efisien sehingga membuat halaman website tidak menjadi lebih besar. Coba bayangkan jika paragraf pertama, ketiga dan kelima apabila memakai Inline Style CSS bagiamana repotnya? selain membuat satu persatu style dalam setiap paragraf yang dimaksud, jika ada perubahan/ revisi kode CSS tentu anda harus merevisi satu persatu tag HTML yang dimaksud. [sc name=”Iklan teknik sesuai konten”]

Dengan menggunakan Cara Inline Style CSS anda hanya cukup membuat 1 kode CSS yang terpisah dari kode HTML dan terletak di bagian antara <head> <style> …. kode CSS disini ….. </style> </head>. Selain itu, cara ini akan menghemat waktu anda apabila terdapat Revisi dalam memperbaiki kode CSS, cukup mengubah 1 kode CSS kelak semua HTML yang terinfeksi Class CSS yang dimaksud akan berubah semuanya. Pada contoh diatas, Class CSS yang dimaksud adalah “internal-style-css”.

3. Cara membuat kode CSS dengan Eksternal Style CSS

Jika cara membuat kode CSS Internal Style CSS hanya bisa menangani 1 halaman web HTML, hal tersebut berbeda dengan cara membuat kode CSS dengan Eksternal Style CSS. Cara ini mampu menangani banyak halaman web HTML, Hal ini sangat Powerfull dan sangat direkomendasikan apabila anda memiliki banyak halaman web. Untuk prakteknya, saya akan mencontohkannya dengan petunjuk berikut ini.

— 3.1 Buatlah atau salin kode CSS berikut sebagai eksternal dari kedua halaman web

.eksternal-css {
  Font-size: 20px;
  background-color: yellow;
  color: blue;
  width: bold;
}

Kode CSS diatas saya letakkan pada directory Local Disk C > Xampp > htdocs > Folder dengan nama : perpusteknik. Setelah itu simpan kode CSS diatas dengan nama eksternal-css.css

— 3.2 Buatlah atau salin kode HTML berikut sebagai halaman web pertama:

<!DOCTYPE html>
<head> 
 <meta charset="UTF-8">
 <title> Halaman web pertama </title>
 <style>
  @import url("https://localhost/perpusteknik/eksternal-css.css"); <!-- Protokol Wajib diikutsertakan, protokol yaitu http atau https. Jika tidak menggunakan protokol maka Eksternal style CSS tidak akan berjalan dengan baik -->
 </style>
</head>
<body>
 <p class="eksternal-css"> Paragraf ini adalah paragraf pertama dari halaman web pertama dan teks ini mengandung eksternal CSS. Memang kalimatnya lumayan pendek, karena kalimat ini hanyalah contoh penerapan eksternal CSS </p>
 <p> Pragraf ini adalah paragraf kedua dari halaman web pertama dan teks ini tidak mengandung eksternal CSS </p>
</body>
</html>

Kode HTML diatas saya letakkan pada directory Local Disk C > Xampp > htdocs > Folder dengan nama : perpusteknik. Setelah itu simpan kode HTML diatas dengan nama halaman-web-pertama.html

— 3.2 Buatlah atau salin juga kode HTML berikut sebagai halaman web kedua:

<!DOCTYPE html>
<head> 
 <meta charset="UTF-8">
 <title> Halaman web kedua </title>
 <style>
  @import url("https://localhost/perpusteknik/eksternal-css.css"); <!-- Protokol Wajib diikutsertakan, protokol yaitu http atau https. Jika tidak menggunakan protokol maka Eksternal style CSS tidak akan berjalan dengan baik -->
 </style>
</head>
<body>
 <p class="eksternal-css"> Paragraf ini adalah paragraf pertama dari halaman web kedua dan teks ini mengandung eksternal CSS. Memang kalimatnya lumayan pendek, karena kalimat ini hanyalah contoh penerapan eksternal CSS </p>
 <p> Pragraf ini adalah paragraf kedua dari halaman web kedua dan teks ini tidak mengandung eksternal CSS </p>
</body>
</html>

Kode HTML diatas saya letakkan pada directory Local Disk C > Xampp > htdocs > Folder dengan nama : perpusteknik. Setelah itu simpan kode HTML diatas dengan nama halaman-web-kedua.html

— 3.3 Setelah itu buka aplikasi Xampp

Untuk mengakses dan mengaktifkan Xampp anda dapat menuju ke directory filenya dengan mengikuti petunjuk berikut :

Klik File Explorer
Menuju ke directory file di : Local disk C > Xampp > Klik Xamp-Control
Klik Start di bagian Apache dan MySQL
Klik minimize dan biarkan aplikasi xampp sedang berjalan

[sc name=”iklan umum link”]

— 3.4 Buka Browser, Misalnya Mozilla Firefox atau Google Chrome

Saat anda menggunakan browser anda langsung bisa menguji coding diatas dengan mengakses directory file berada. contoh diatas menunjukkan url html berada pada alur : localhost/perpusteknik/halaman-web-pertama.html dan localhost/perpusteknik/halaman-web-kedua.html

— 3.5 Hasil dari kedua halaman menggunakan External Style CSS

Hasil dari halaman web pertama setelah di generate di browser

Hasil dari halaman web kedua setelah di generate di browser [sc name=”Subscribe website ini”]