CSS (Cascading Style Sheet)

08.16 0 komentar
  • Dasar Teori
  1. CSS (Cascading Style Sheet)
Style Sheet merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, akan teteapi pemakaian style sheet merupakan kelebihan tersendiri.
Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style – style yang ada. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar. Teman-teman juga bisa menyebutnya sebagai template dari documents HTML yang mengunakannya.
Teman-teman juga bisa membuat efek-efek spesial di web Teman-teman dengan mengunakan style sheet. Sebagai contoh Teman-teman bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan bewarna biru. Atau pada tag <p> yang akan di tampilkan dengan warna kuning dan mengunakan font verdana dan masih banyak lagi yang bisa Teman-teman lakukan dengan style sheet.
Secara teoritis Teman-teman bisa mengunakan technology dengan HTML. Akan tetapai pada praktiknya hanya Cascading Style Sheet (CSS) technology yang suport pada hampir pada semua web browser.  Karena CSS telah di standarkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.
Fakta Mengunakan CSS:
  1. Telah di dukung oleh kebanyakan browser bersi baru, tetapi tidak di dukung oleh browser-browser versi lama.
  2. Lebih fleksibel dalam penempatan posisi layout. Dalam layout CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
  3. Menjaga HTML dalam pengunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file dan keceptan downloading.
  4. Dapat menampilkan konten utama terlebih dahulu, semntara gambar dapat di tampilkan sesudahnya.
  5. Penercemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat dari berbagai browser.
  6. CSS adalah layouting “masa depan” dengan pengabungan bersama XHTML.
2.  Sintaks CSS (Cascading Style Sheet)
Sintaks CSS di buat atas 3 bagian, yaiut: selector, property, dan value. Bentuk susunannya adalah sebagai berikut:
?
1
selector {property : value }
Selector adalah elemen atau tag HTML normal yang ingin didefinisikan. Property merupakan atribut yang ingin dipilih dan masing-masing property dapat diberi sebuah nilai (value). Contoh:
?
1
body { color : black }
Maksud perintah di atas adalah jika selector body dipanggil pada HTML, tampilan pada web akan berwarna hitam (black). jika nilai yang di berikan lebih dari satu kata, gunakan tanda petik ganda (“”) seperti contoh berikut:
?
1
p {font-family : "sans serif"}
Berikut ini adalah contoh halaman web sederhana yang mengunakan style sheet, Teman-teman bisa mengcopy dan memodifikasinya sesui keinginan Teman-teman.

<html>
<head>
<title>latihan CSS</title>
<style type = "text/css">
body {
font-family : verdana, sans-serif;
color : black; background : white; }
p { text-indent : 2em; margin-top: 0; marginbottom: 0;}
h2 { font-size : 150%;}
h3 { font-size : 100%;}
div.box {border : solid; border-width: thin; width : 100%;}
a:link { color: rgb(255, 0, 102)}
a:visited { color : rgb(153, 0, 153)}
a:active { color : rgb (0, 96, 255)} </style>
</head>
<body>
<h1 style ="color:red"> header satu mengunakan style</h1>
<h2>Header 2</h2>
<h3>header 3</h3>
<p> Teks yang di tulis mengikuti sebuah heading dapat menimbulkan tampilan akibat tampilan jenis huruf yang berbeda pada beberapa jenis program browser. Teman-teman disarankan segera menutup teks pada paragraf tersebut. </p>
<div class="box"> Teks pada bagian ini mengunakan DIV dan memiliki border yang mengelilinggi teks yang ada </div><br>
<p>contoh link adalah sebagai berikut:</p>
<ul><li><a href="link 1.html">link pertama</a></li>
<li><a href="link2.html">link kedua</a></li>
</ul>
</body>
</html>
 
 
Dalam postingan ini mungkin hanya itu yang dapat Saya bagikan kepada Teman-teman Informatika, selamat berjumpa dalam postingan selanjutnya ya 

About the Author

Perakata Admin

Semoga Bermanpaat, mohon keritik dan saran membangun.


0 komentar:

Terima Kasih sudah berkunjung dan berkomentar, semoga menjadikan sebagai bahan pengembangan dalam penulisan selanjutnya

Langganan: Posting Komentar (Atom)