Penjelasan tentang CSS
Cascanding Style Sheet (CSS) adalah style yang digunakan untuk mengatur tampilan dari halaman web. Dengan menggunakan css maka untuk menghasilkan tampilan web yang indah dan menarik. Bahasa pemrograman ini lebih mudah dan ringkas dari pada menggunakan atribud ditiap tag html.
Selian bisa membuat indah, css juga bisa digunakan untuk menciptakan web dengan tampilan yang dinamis dan fleksibel. Baik itu untuk tampilan web di browser ataupun ketika halaman web dicetak lewat printer.
SCC juga disusun dengan struktur tertentu berikut contoh dan penjelasan dari strukturnya :
- Selector dan Declaration adalah Perintah css
- Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css akan diterapkan
- Selector dapat berupa nama tag, selector class atau selector id
- Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan value.
Kelebihan dari CSS
- Dapat memisahkan desain dengan konten halaman web
- Dapat mengatur desain seefisien mungkin
- Jika ingin mengedit suau tema halaman web dapat dilakukan dengan mudah,yaitu cukup dengan memodifikasi pada cssnya saja
- Satu css dapat diakses oleh banyak web
Kekurangan dari CSS
- Tampilan pada setiap browser yang berbeda
- Ada juga browser yang tidak dapat menyuport css
- Membutuhkan waktu yang lama dalam pembuatanya
- Sering terjadi bug atau eror
Fungsi CSS
Fungsi dari adanya file CSS dalam setiap website kami rasa cukup penting. Sebelumnya juga sudah sempat dibahas bahwa dengan adanya CSS anda dapat membedakan konten atau style dengan dokumen atau file website itu sendiri. Bisa dibilang salah satu tolak ukur dari kualitas halaman website yang dibuat adalah dari style yang digunakan, dan disini CSS berperan sangat vital.
Keuntungan lain dari penggunaan file CSS adalah seakan – akan dapat dibuat menjadi library style yang bisa digunakan lagi sewaktu – waktu, tergantung dari anda untuk mengkreasikannya agar bentuk tampilan antar website yang dibuat tidak sama. Selain itu dengan adanya CSS seorang programmer web juga diberi kebebasan untuk berinovasi serta berkreasi seindah mungkin karena tidak ada batasan – batasan dari penggunaan kode CSS itu sendiri.
Cara Kerja CSS
Berbeda dari pembelajaran HTML, PHP atau Javascript yang memiliki rumus atau metode tersendiri pada CSS cara kerja penulisan kode bisa dibilang paling mudah. Seorang programmer hanya perlu menambah wawasan mengenai instruksi atau perintah untuk mendesain web secara menyeluruh. Pada CSS anda hanya perlu menulis stylenya saja yang terdiri atas selector id dan class. Contohnya jika anda berfokus pada background atau latar belakang anda dapat mengatur penggunaan image atau warna solid sebagai background, serta mensetting ukuran secara fixed atau sesuai ukuran asli dan lain sebagainya.
Jika penulisan kode CSS dijadikan satu dengan file HTML maka biasanya dapat ditulis di bagian Head, beda halnya dengan file Javascript yang diletakan pada Body di bagian terakhir. Sedangkan jika penulisan file CSS di halaman tersendiri maka tidak ada patokan khusus, namun perlu diperhatikan pada dokumen yang menggunakan CSS haruslah ada instruksi untuk pemanggilan file CSS beserta class – classnya.
nternal CSS
Metode penulisan kode CSS langsung dalam file HTML.
contoh:
<html>
<head>
<style type = “text/css”>
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
Eksternal CSSfile CSS terpisah dengan HTML.
Buat file dengan ekstention .css.
contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
Inline CSSPenulisan kode CSS dalam tag HTML. contoh:<html>
<head>
</head>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat kode berikut:
<h1 style=”font-family: ‘Times New Roman’, Times, serif”>Serif font</h1>
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
berikut kodenya
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
Blog Eli 