Cascading Style Shee (CSS)

 Cascading Style Shee (CSS)

Pengertian Cascading Style Shee (CSS)

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.

Manfaat dari CSS:

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1.   Position (Posisi)

Mengunakan properti position terdapat 4 cara:

• Static –> posisi normal (default).
• Relative –> posisi elemen tergantung dari elemen yang lain.
• Absolute –> posisi elemen berpatokan pada jendela browser.
• Fixed –> posisi elemen tetap walaupun digeser.

2.   Float (Nempel)

Menggunakan properti float atau clear:

• Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
• Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
• Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
• Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
• Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Margin –> jarak/batas elemen dengan elemen lain

Border –> border/gari tepi elemen

Padding–> jarak elemen dengan isi elemen (elemen anak)

Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. External Style Sheet (file CSS berbeda dari file HTML),

          Pemanggilannya :

          <link rel=”stylesheet” href=”PATH/file.css” />

2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)

          Contoh :

          <font style=”color:red”>Warna tulisan merah</font>

3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

         <style type=”text/css”>

         … /* css code */

         </style>

Selengkapnya download disini DOWNLOAD