cara membuat kode css

Cara membuat kode CSS | WebCSS | 05

Posted on
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 :
Baca juga :   Sejarah CSS | WebCSS | 04
cara membuat kode css
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.
Baca juga :   Sejarah HTML | WebHTML | 04
[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”.

Leave a Reply