 |
| Cascading Style Sheet |
Style Sheet adalah text sederhana dengan eksitensi (.css) yang ditulis menurut aturan bahasa pemrograman yang merujuk rekomendasi dari CSS 1 atau CSS 2 dari W3C/ World Wide Web (w3.org) yang merupakan badan gabungan dari pemilik web, universitas, perusahaan ( seperti : Microsoft, Netscape, Apple, Opera, Mozilla dan Macromedia) tak luput juga para ahli dalam bidang web. dapat di simpulkan bahwa CSS adalah tempat untuk meletakan semua Style yang ada pada HTML,
Keuntungan Menggunakan CSS
Sobat bisa banyak menemukan keuntungan setelah menggunakan CSS, Dibanding saat sebelum menggunakan CSS
CSS sangat menguntungkan banyak keuntungan menggunakan CSS, salah satunya adalah kita bisa membuat banyak sekali halaman Web dengan hanya menggunakan satu CSS tidak perlu membuat banyak CSS untuk mempercantik banyak Web. hanya saja sobat harus menaruh Link CSS di halaman Web agar terhubung dengan CSS yang sudah dibuat.
Kesimpulanya HTML merupakan Kerangka dasar pembuatan Halaman Web yang akan lebih baik hanya untuk menulis artikel selebinya serahkan urusan tampilan kepada CSS. dan Sobat bisa menambahkan CSS lebih dari Satu di Halaman Web sesuai keperluan.
Cara Menggabungkan HTML ke CSS
Jika Sobat telah membuat CSS dan ingin menghubungkanya ke HTML yang telah sobat buat. Cara untuk menghubungkanya sangat mudah, Hanya dengan membuat coding seperti berikut ini, Dan jangan lupa untuk mengingat nama css sobat.css dan diletakan dalam satu Folder bersama dengan File HTML.
<html>
<head>
<title>Penggabungan File HTML ke CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p> <h2>Contoh untuk Link Style </p> </h2>
</body>
</html>
Sobat bisa mengganti link CSS dengan Link CSS yang Sobat punya, Tentunya harus sesuai dengan nama File CSS Sobat. Misal <link href=”css/style.css” rel=”stylesheet” type=”text/css” /> Sobat harus mengganti css/style.css dengan nama CSS Sobat.
Setelah mengetahui apa itu CSS dan bagaimana cara kerjanya selanjutnya kita akan mempelajari coding yang ada didalamnya, berikut ini contoh coding yang ada di dalam CSS:
#container{
width:1000px;
margin:0 auto;
font-family: verdana;
}
#menu{
background-color:#993300;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
a:link{
background-color:#FFFF00;
color:#000099;
text-decoration:none;
font-size:14px;
}
a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}
Sobat pasti bertanya apa gunanya Rule di atas, tenang saya akan menjelaskanya. berikut penjelasanya:
#container {…}
saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkannya ditengah.
#menu {…}
untuk membuat background menu dengan warna #993300, lebar 1.000 px, penempatan text di tengah dengan kali ini saya menghilangkan ukuran tinggi dan mengatur dengan memberi nilai padding atas dan bawah masing-masing 10 px.
a:link {…}
ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari content atau image yang telah diberi link. Text menu telah diberi link dan pengaturannya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka saya memberikan text decoration dengan nilai none dengan font size 14 px.
a:hover {…}
adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warna tulisan menjadi putih ( #FFFFFF ), kali ini saya memberikan hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px.
a:active {…}
dimana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam
( #000000 ) lalu ketebalan saya kembalikan lagi seperti asal.
Untuk lebih jelasnya dalam bagaimana cara penggunaan CSS selanjutnya akan saya buatkan Artikel Cara membuat Website Dengan bantuan CSS.
EmoticonEmoticon