pengertian css
Nim : 281412015
Jurusan/Kelas : Sosiologi/A
Tugas : Pengantar computer
PENGERTIAN CSS
A. CSS (Cascading Style Sheets) adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML dan merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warnamouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
2. Keuntungan menggunakan CSS yaitu:
Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita.User yang berbeda dapat mempunyai style-sheet yang berbeda pula.Ukuran dan kompleksitas document code dapat diperkecil.
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
3. Fakta Menggunakan CSS diantaranya :
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browserCSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.
CONTOH CSS
B. Setelah dasar dari pondasi dalam pembuatan web telah dikuasai, langkah selanjutnya adalah menghiasi dari pondasi yang telah dibangun dengan menggunakan CSS. CSS sendiri sampai sekarang sudah sampai pada CSS3. Untuk belajar lebih mudah dapat langsung dipelajari pada.
Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun tampilan yang dihasilkan syntaks - syntaks dari CSS lama masih belum menarik bagi para end-user atau pengunjung. Syntaks css secara umum dapat ditulis sebagai berikut:
<html>
<head>
<style type="text/css">
...isi css...
</style>
...isi halaman...
</body>
</html>
<a href="http://tutorial-pembelajaran.blogspot.com/">Tutorial Pembelajaran</a>
Apabila suatu style dari css akan dipergunakan untuk beberapa halaman, akan lebih tepat mendeklarasikan css tersebut ke dalam suatu file css terpisah dan baru dipanggil pada suatu halaman. Contoh yang paling sederhana adalah sebagai berikut:
Contoh kerangka kode berikut akan disimpan pada file.css
html {...}
body {...}
a {...}
.b {...}
.c {...}
#tujuan{...}
#header h1 a:visited{...}
a.page-numbers:hover {...}
div.content-bottom{...}
table th {...}
fieldset {...}
legend {...}
form {...}
p{...}
h1 {...}
div#nama li{...}
textarea {...}
input[type="..."] {...}
select {...}
label{...}
pre {...}
code {...}
blockquote {...}
ul {...}
li {...}
Untuk memanggilnya dengan menambahkan kode html seperti berikut <link rel="stylesheet" type="text/css" href="contoh.css" /> atau dapat juga dengan <style src="contoh.css" type="text/css" media="screen" />. Pada pemanggilan fungsi dari css terdapat 2 penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula. Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat digunakan dengan cara sebagai berikut:
<p class="b c"></p> dan untuk penulisan id adalah <div id="header"> </div> atau lebih jelas lagi seperti pada penggunaan link <a href="#tujuan "/>. Jadi secara logika kita tidak dapat menggunakan class pada penggunaan link seperti contoh di atas. Atribut dari css pada dasarnya ada banyak sekali walaupun jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara lain;
BackgroundBorderClassificationDimensionFontGenerated ContentList and MarkerMarginOutlinesPaddingPositioningTable
Contoh Tabel dengan CSS
Header Kolom 1
Header Kolom 2
Header Kolom 3
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Jika menggunakan internal atau eksternal CSS akan kelihatan lebih simpel.
Kode CSS:
table{margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb;}
caption h3{}
th, td{border:1px solid #999;}
th{padding:8px 0;background: #0cf;}
td{padding:4px 8px;}
Kode HTML:
<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Hasil:
Contoh Tabel dengan CSS
Header Kolom 1
Header Kolom 2
Header Kolom 3
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Jika ingin membuat warna baris cell yang selang seling kita dapat menambahkan atribut "class" atau "id" di dalam tag <td>, dalam contoh berikut kita akan menggunakan atribut class dengan nama baris-ganjil
<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</tr>
<tr>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Kita akan membuat background baris ganjil tersebut dengan warna putih maka di dalam CSS kita tambahkan:
.baris-ganjil(background:#fff;}
Maka hasilnya adalah sebagai berikut:
Contoh Tabel dengan CSS
Header Kolom 1
Header Kolom 2
Header Kolom 3
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
w3schools.com/css3/default.asp