Dikutip dari Wikipedia, CSS atau Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih ‘stylish’. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengatur ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, margin kiri, kanan, atas, bawah dan lain-lainnya.

Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS digunakan oleh programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain presentasi dokumen di situs mereka.

Dasar-dasar CSS

Cascading Style Sheet terdiri dari Selektor, Deklarasi, Properti dan Nilai. CSS memiliki aturan dalam penulisan kode. Contoh:

Body {
    background-color: white;
}

Pada contoh diatas, ‘Body’ adalah Selektor, ‘{}’ (kurung kurawal) adalah Deklarasi, ‘background-color’ adalah Properti, dan ‘white’ adalah Nilai. Contoh diatas bermaksud untuk mengatur warna latar belakang (background-color) dari tag ‘Body’ sebuah halaman web.

Penggunaan CSS

Ada 3 cara untuk memasukkan sebuah lembar CSS:

  1. Eksternal Style Sheet
  2. Internal Style Sheet
  3. Inline Sheet

Eksternal Style Sheet

Dengan eksternal style sheet, kamu bisa mengubah tampilan dari keseluruhan web cukup dengan mengubah satu file!

Setiap laman harus memasukkan referensi ke file style sheet eksternal didalam elemen <link>. Elemen <link> harus berada didalam Bagian <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Sebuah lembar CSS dapat ditulis di text editor manapun. Di dalam file-nya tidak boleh terdapat tag HTML manapun. Lembar harus disimpan dengan ekstensi ‘.css’. Note: Jangan berikan ‘spasi’ diantara Properti dengan Unit (seperti margin-left: 20 px). Cara yang benar adalah: margin-left: 20px;. Berikut contohnya:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

Warna didalam CSS

Ada beberapa cara penggunaan warna di CSS:

  • Menggunakan kata, contoh:
    {color: red;}
  • Dengan RGB (Red, Green, Blue), contoh:
    {color: rgb(128,128,128)}
  • Warna Heksadesimal (Hexadecimal Color), #RedRed|GreenGreen|BlueBlue (#RRGGBB). contoh:
    {color: #808080}

Warna Latar Belakang

Properti background-color mendefinisikan warna latar belakang sebuah elemen. Contoh:

body {

background-color: lightgray;

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s