Contoh CSS

0 comments
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>

</body>
</html>

Fakta Menggunakan CSS

0 comments
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 browser
  • CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.

Sifat CSS

0 comments
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.

Penulisan CSS

0 comments
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

h1 {
color: #0789de;
}

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.

Selain itu ada tiga metode penulisan CSS atribut, yaitu :

Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet

<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<div id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </div>

<div id="cth2" style="font-size: 20pt;">
Tag P ini diformat dengan besar font 20 point </div>

<div id="cth3" style="color: red; font-size: 14pt;">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </div>
</body>
</html>

Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet :

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>

<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

Versi CSS

0 comments
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Sejarah CSS

0 comments
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Apa Itu CSS

0 comments
Apa Itu CSSCascading Style Sheets (CSS) adalah mekanisme sederhana untuk menambahkan gaya (misalnya, font, warna, spasi) ke dokumen web.

Web style sheet telah ada selama beberapa tahun, tetapi kekuasaan mereka dan pentingnya pergi tanpa diketahui sebagian besar karena implementasi beberapa ada. Penulis Web, ingin menambah kreativitas untuk halaman mereka dengan mempengaruhi presentasi, mulai menggunakan ekstensi milik Netscape bukan style sheet lebih kuat. Ini cukup wajar, karena kepemilikan ekstensi Netscape bisa dilihat oleh sebagian besar pengguna Web, sementara beberapa perangkat tambahan akan melihat style sheet.

Saat ini, browser semakin banyak menerapkan style sheet, membuka mata penulis untuk fitur unik yang memungkinkan pengaruh atas presentasi sambil menjaga independensi platform. Keuntungan dari style sheet menjadi jelas, seperti yang dilakukan kelemahan terus-menerus menciptakan tag HTML untuk efek lebih presentasi.

Atribut TUBUH Netscape sekarang diterima secara luas di Web, dan telah menjadi standar dalam HTML 3.2. Namun BGCOLOR, TEXT dan teman-teman hanya tidak memberikan fleksibilitas style sheet. Gambar latar belakang Kebanyakan akan meninggalkan halaman terbaca bagi seseorang yang hanya menawarkan layar 16 warna; banyak halaman sulit untuk membaca dengan hanya 256 warna. Dengan atribut TUBUH konvensional, seorang penulis harus memilih apakah manfaat dari gambar latar belakang lebih besar daripada biaya; dengan style sheet, penulis dapat menawarkan sejumlah gambar yang berbeda, dalam style sheet yang berbeda, sehingga pengguna dapat memilih "24-bit style sheet "atau" 8-bit style sheet, "tergantung pada berapa banyak warna nya atau sistem nya dapat menampilkan. Jika tidak ada gaya penulis yang dipasok sesuai dengan pengguna, ia hanya dapat mengabaikan gaya penulis.

Style sheet dapat membuat hidup seorang penulis jauh lebih mudah. Sementara satu bisa menggunakan <hr WIDTH="75%" SIZE=5 ALIGN=center> untuk setiap aturan horisontal, ini menjadi sangat rumit untuk penulis. Dengan style sheet, satu hanya perlu menentukan preferensi presentasi ini satu kali, dan gaya dapat diterapkan untuk seluruh situs. Dan jika penulis memutuskan bahwa WIDTH = "50%" akan lebih baik, maka ia hanya perlu mengubah preferensi dalam satu tempat, daripada harus mencari melalui ratusan halaman untuk mengubah HTML. Tidak hanya itu, tapi style sheet juga mengurangi waktu download ketika satu file berisi semua informasi yang gaya.

Style sheet juga menawarkan lebih banyak fleksibilitas dalam hal efek presentasi yang mereka sediakan. Properti seperti warna, latar belakang, margin, perbatasan, dan masih banyak lagi dapat diterapkan untuk semua elemen. Dengan hanya HTML dan ekstensi miliknya, salah satu harus bergantung pada atribut seperti BGCOLOR, yang hanya tersedia untuk beberapa elemen. Style sheet memberikan fleksibilitas menerapkan gaya ke semua paragraf, atau semua tingkat-dua judul, atau semua teks ditekankan.

Dengan style sheet, penulis dapat menggunakan properti text-indent untuk indent teks, bukan beralih ke kludges jelek seperti <dd> atau <IMG SRC="blank.gif" WIDTH=10 ALT=""> yang membawa bersama mereka banyak negatif efek samping. Margin dapat disarankan tanpa harus menempatkan seluruh halaman dalam sebuah tabel. Style sheet juga mengurangi kebutuhan untuk multi-file pencarian dan mengganti, jika seorang penulis memutuskan untuk mengubah indentasi dari semua paragraf di situs, ia hanya harus merubah satu baris pada lembar gaya.

Style sheet merupakan langkah besar ke depan untuk Web. Dengan pemisahan isi dan presentasi antara HTML dan style sheet, Web tidak lagi perlu melenceng dari cita-cita yang kuat kemerdekaan platform yang disediakan medium dengan push awal popularitas. Penulis akhirnya dapat mempengaruhi presentasi dokumen tanpa meninggalkan halaman terbaca bagi pengguna.
 

Copyright © 2012CSS Tutorial

Free Templates Blogger