PENGERTIAN DAN PERINTAH-PERINTAH CSS

Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam

Pengertian CSS mengenai perintah – perintah untuk mengatur tampilan, gaya atau style dari suatu website sehingga dengan kita menggunakan css kita bisa mempersingkat pembuatan dan penulisan kode dibandingkan kita mengatur style web menggunakan format yang ada di html.

Contohnya begini, ketika kita ingin membuat sebuah style untuk sebuah judul artikel kita bisa menggunakan tag Font yang ada di HTML

<font size='7' color='#CCCCCC' >

<b>Format Judul menggunakan tag Font</b>

</font>

Sepertinya tidak ada masalah dengan kode diatas, tapi masalah mulai muncul ketika kita menulis banyak artikel dan kita harus memformat banyak judul. kita harus mengetikan berulang – ulang format html diatas.

CSS datang disini memberikan solusi, kita bisa mempermudahnya.. seperti apa si, gimana sih.. penasaran.. nah sebelum kita lanjut lebih jauh. kita bahas dulu apa itu css dan seterusnya.. yah kita coba pahami, kita kenali agar kita lebih sayang.. :D

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse 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

Sejarah CSS

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.

Versi dan Perkembangan CSS

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 dan kedua.

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

Penulisan

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.

Ada beberapa Cara dalam penulisan CSS :

– 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">

<p id="cth1">

Ini adalah contoh tag P tanpa diformat menggunakan CSS </p>

<p id="cth2" style="font-size:20pt">

Tag P ini diformat dengan besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red">

Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>

</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>

Sifat CSS

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.

Fakta Menggunakan CSS

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.

Banyak hal yang bermanfaat dan pastinya mempermudah kita dalam mendesign Website dengan CSS. kita akan bahas secara detail mengenai CSS.

pengertian css dan perintahnya

CSS adalah kepanjangan dari Cassading Style Sheet. Kode CSS ini hampir terdapat di seluruh bagian template blog anda. Adapun fungsi dari CSS adalah untuk mempercantik sebuah halaman web, termasuk blog. CSS dapat bekerja secara maksimal jika tidak ada kesalahan dalam mengedit atau menambahkan kode CSS kedalam template blog Anda. Jika tedapat kesalahan, baik dalam menambahkan atau mengedit tampilan blog, maka dapat dipastikan blog anda akan menjadi berantakan. Sebenarnya, untuk menjadikan blog anda indah dan cantik, Anda tidak perlu mendalami pengetahuan kode CSS karena kode CSS ini akan bekerja maksimal dengan sistem kode yang disebut mark up language, seperti kode HTML, XHTML, dan XML. Namun, mempelajari dasar-dasar kode CSS dapat membantu Anda dalam mengedit template blog sehingga terlihat cantik dan menarik. Pengetahuan dasar tentang kode CSS akan membantu Anda nantinya, dalam mempelajari dan mempraktikkan bab-bab selanjutnya. Kode CSS tidak jauh berbeda dengan kode HTML. Perintah dasar dari kode CSS hampir sama dengan kode HTML yang diawali dengan kode pembuka dan kode penutup. Jika tidak, template tidak dapat di-parse atau disimpan pada halaman blog anda. ciri dari kode CSS adalah dapat ditambahkan atau digunakan langsung untuk mengedit dari template blog anda. Kode-kode CSS biasanya meliputi warna dan aksesori yang ada di halaman blog Anda. Misalnya, jika anda ingin menuliskan tulisan "blog pertamaku" dengan warna merah, maka kode yang membuat warna merah itulah yang disebut dengan CSS. Sebagai contoh, jika saya menuliskan kode warna merah dengan kalimat ""membuat blog pertamaku" pada posting, maka kodenya adalah sebagai berikut: membuat blog pertamaku pada kode diatas, terdapat yang dipertebal, yaitu color:rgb(255, 0, 0); font-weight: bold; kode inilah yang dinamakan dengan kode CSS. Adapun fungsi dari kode tersebut adalah untuk mempertebal dan memberikan warna merah pada kalimat "membuat blog pertamaku". kode warna merah dapat juga diwakilkan dengan cara menuliskan tanda# dan kode warna. Misal, jika warna yang akan digunakan adalah warna putih, maka kode CSS untuk warna putih adalah sebagai berikut, #FFFFFF. Untuk warna hitam, kodenya adalah #000000, dan seterusnya. Biasanya, di dalam template blog, kode CSS diawali dengan kode {dan kode penutup} yang biasa disebut container code CSS karena diantara kode tersebut terdapat kombinasi kode CSS. Contoh kode CSS yang ada di template blogger pada menu Main (tempat posting)) adalah sebagai berikut:
#main {
margin: 0 0 10px;
width: 480px;
float:right;
padding:0 9px 12px 9px;
border:1px
dotted #900;
color:#ffffff; } 

Keterangan: 

Border : garis yang ada di sekeliling sidebar atau main

Color   : warna

Dotted : garis titik-titik pada border

Float    : letak penempatan, baik di kanan atau di kiri

Margin : jarak batas dari main atau sidebar

Padding : jarak tepi isi sidebar atau main

Px        : ukuran pixel

Width  : lebar dari area sidebar atau main.

Beberapa Cara Memanggil CSS ke dalam HTML

Tuesday, June 08, 2010 Posted by: Blogger Indo
Categories: CSS, HTML

Kalau kemarin membahas "Mengenal Bahasa Pemrograman CSS", sekarang saya akan membahas sedikit cara memanggil CSS dalam HTML. Mungkin tutorial kali ini tidak sebaik yang Anda kira, jadi saya sebagai penulis, minta maaf sebelumnya...hehehehehe...
Pada dasarnya untuk memanggil file CSS ini ada 3 cara:
1. Membuat File CSS terpisah dengan HTML
2. Menyisipkan perintah CSS diantara <head></head>
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML.


1. Membuat File CSS terpisah dengan HTML.
Untuk membuat file CSS terpisah dengan HTML, Anda bisa membuat file dengan format .CSS dan setelah itu memanggil file Anda dalam HTML. Sebagai contoh, saya akan membuat file yang akan saya beri namastyle.css,seperti ini:

h1{color:white; letter-spacing:-1px; margin:0; text-align:left; font:42px verdana;}
h2{font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px; font: 22px verdana;}
img{border: 0px;}
blockquote {background-color: #666; color: white; font-style: italic; text-align: left; width: 300px; margin: 10px auto;}
code {color: #444;font: verdana, monospace;background-color: #f4f4f4;font-size: 1.2em;}
Dan untuk perintah pemanggilnya di HTML begini:
<link href="style.css" rel="stylesheet" type="text/css">
Dengan membuat demikian, maka file-file Anda akan simple, dan mudah kalau dilakukan pengeditan ulang.

2.Menyisipkan perintah CSS diantara <head></head>
Untuk bagian ini akan banyak Anda temui pada template-template blogger, seperti ini contoh perintahnya
<style>a:hover {
text-decoration: none;
color: blue;
font-size: 16px;}
</style>
Keuntungan bagian ini, Anda tidak perlu membuat 2 file, cukup 1 file dalam HTML, tetapi kelemahannya, jika file CSS Anda terlalu panjang dan Anda ingin mengadakan pengeditan, maka siap-siap saja pusing melihat perintah yang bertaburan...hehehehe

3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML
Yang saya maksudkan pada bagian ini adalah perintah CSS nanti akan langsung dimasukkan dalam perintah HTML, sebagai contoh adalah demikian, saya memakai contoh jika saya mau memberikan style pada perintah HTML <blocknote>, seperti ini;
<blockquote style="font-color: white; font-size:12px;">Ini Adalah perintah <code><blocquote>...</blockquote></code></blockquote>
Mungkin sampai disini dulu, Anda bisa mencoba-coba sendiri pada file HTML Anda, seperti pembahasan kemarin tentang Penerapan HTML.

Penggunaan Perintah Background di dalam CSS

Monday, July 05, 2010 Posted by: Blogger Indo
Categories: CSS

Pada bab-bab sebelumnya saya telah mebahas mengenai "Mengenal Bahasa Pemrograman CSS" dan "Beberapa Cara Memanggil CSS ke dalam HTML". Kali ini sedikit mengulas dari kedua bab tersebut, dan lebih di spesifikkan kedalam penggunaan perintah background. Sebenarnya kalau kita bahas satu-persatu bakalan banyak banget mulai dari perintah background, behavior, border, bottom, caption-side, clear, clip, color, content, dll. Semoga saja saya bisa mengulas semuanya di blog ini.

Sebenarnya perintah background ini terdiri dari perintah-perintah sebagai berikut:

1. Background
Perintah ini pada dasarnya adalah keseluruhan perintah yang memungkinkan didalamnya akan berisi perintah-perintah background-color, background-image, background-attachment, background-repeat, dan background-position. Sebagai contoh adalah sebagai berikut:
contoh{ background: background: red url(image.gif) no-repeat fixed left top;}

2. Background-color
Perintah ini berfungsi untuk memberikan warna pada latar belakang. Sebagai contoh:contoh{background-color:red;}

3. Background-image
Perintah ini akan memberikan tampilan gambar yang diambil dari URL. Sebagai contoh:
contoh{background-image: url(image.jpg);}

4. Background-attachment
Perintah ini akan mengatur apakah tampilan background-image mengikuti dokumen(scroll) atau dokumen yang mengikuti background-image(fixed). Sebagai Contoh:
contoh{background-attachment: fixed;}

5. Background-repeat
Perintah ini akan mengatur apakah perintah background-image diulang atau tidak, kalau diulang maka di ulang ke arah mana. Perintah ini terdiri dari 4 jenis:

x = dengan perintah ini, maka background akan diulang kearah sumbu x.

y = dengan perintah ini, maka background akan diulang kearah sumbu y.

no-repeat = dengan perintah ini, maka background tidak akan diulang.

Sebagai contoh adalah sebagai berikut:
contoh{ background-repeat: repeat-x;}
,
contoh{ background-repeat: repeat-y;}
atau
contoh{ background-repeat: no-repeat;}

6. Background-position
Perintah ini akan mengatur posisi dari background-image yang akan menyebabkan gambar diulang dalam kedua arah (x dan y) sepanjang ditentukan sumbu. Sebagai contoh:
contoh{ background-position: x y;} » contoh{ background-position: right bottom;}

Semoga pembahasan saya kali ini bisa menambah wawasan Anda mengenai CSS, kritik, saran, dan dukungan tetap diperlukan demi kemajuan blog ini. Sampai jumpa lagi pada pembahasan selanjutnya