4/30/13

Dasar CSS

             Bagi yang mau belajar buat web, wajib nih ngerti sama yang namanya CSS. Apa itu CSS? Guna CSS itu apa ya? Yuk cek :)
          Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam. Kelebihan dari CSS adalah dapat membuat web dengan cepat karena setiap perubahan seperti mengganti font tulisan cukup mengubahnya di CSS, tidak mengubahnya di setiap halaman web. Kekurangan dari CSS adalah pada browser A web terlihat bagus dan di browser B malah terlihat berantakan, dikarenakan cara mengartikan kode CSS tiap browser berbeda.

               Cara menggunakan CSS terdapat 4 jenis yaitu
1.  Eksternal Style Sheet
        merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat  mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag . Tag masuk ke dalam bagian kepala





dengan eksternal style sheet dapat ditulis dalam  bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
Jangan meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.

2. Internal Style Sheet
          merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik. Di bagian kepala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini








3. Inline Style Sheet
        gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan. Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :


4. Multiple Style Sheet
           Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik. Contoh style sheet eksternal untuk pemilih h3 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
          Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
        Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.


             Oke cuma segitu dulu ya, nanti akan dilanjutkan tentang CSS. Belajarnya bertahap saja. Hehehehe :) Sekedar mengingatkan, setelah membaca artikel ini, minta tolong ya.. Di share ke FB atau twitter. Terus diisi ya voting yang ada di pojok kanan atas dari halaman ini. Diisi juga kolom reaksi setelah membaca artikel ini, apakah bagus, penting, bermanfaat, atau yang lainnya. Bagi yang mau copy kata-kataku, jangan sampai lupa menyertai link dari halaman ini. Kalau ada yang bingung, silahkan tuliskan pertanyaan di form komentar. Makasi :)



Sumber :

0 comments:

Post a Comment

Total Pageviews

Copyright © Niia Blog | Powered by Blogger
Design by Lizard Themes | Blogger Theme by Lasantha - PremiumBloggerTemplates.com