Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.Terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :
Contoh berikut akan menambahkan warna dan margin pada paragraf :
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.Terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :
- Eksternal style sheet
- Internal style sheet
- Inline style
Eksternal Style Sheet
Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>style.css merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh dari file style.css :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Catatan : Ketika menuliskan value property dan unitnya, jangan
menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :
margin-left:20px
Internal Style Sheet
Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style
Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.Contoh berikut akan menambahkan warna dan margin pada paragraf :
<p style="color:sienna;margin-left:20px">Ini adalah sebuah paragraf.</p>
Terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :
Contoh berikut akan menambahkan warna dan margin pada paragraf :
- Eksternal style sheet
- Internal style sheet
- Inline style
Eksternal Style Sheet
Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>style.css merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh dari file style.css :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Catatan : Ketika menuliskan value property dan unitnya, jangan
menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :
margin-left:20px
Internal Style Sheet
Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style
Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.Contoh berikut akan menambahkan warna dan margin pada paragraf :
<p style="color:sienna;margin-left:20px">Ini adalah sebuah paragraf.</p>
Tidak ada komentar:
Posting Komentar