Sejarah,Pengertian dan Coding CSS 3

SEJARAH CSS3

Pengenalan CSS

Sebelum Anda dapat menguasai CSS, tentunya Anda harus memahami terlebih dahulu pengertian dari CSS itu sendiri. Anda akan mengetahui sejarah singkat lahirnya CSS, kegunaannya, dan cara penggunaannya.

Pengertian & Manfaat CSS3

Menurut Wikipedia, Cascading Style Sheets (CSS) adalah: “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.” 
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri. Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepaduntuk menciptakan script CSS sendiri.

Sejarah Singkat CSS

Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web.

Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan

TAG sendiri untuk mengatur tampilan web.

CSS level 1 mendukung pengaturan tampilan dalam hal:

1. Font (jenis, ketebalan),
2. Warna teks, latar belakang, dan elemen lainnya,
3. Text attributes, misalnya spasi antar baris, kata, dan huruf,
4. Posisi text, gambar, tabel, dan elemen lainnya,
5. Marjin, border, dan padding.

Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnya media-specific CSS. Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 yang terdapat fitur terbaru ini dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.

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 dan merupakan pasangan setia XHTML,
5. Digunakan dalam hampir semua web browser.

 Coding CSS 3

CSS Example

body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}

 

Example

<section id="skills" class="clearfix" itemscope itemtype="http://schema.org/ItemList">

    <h2 itemprop="name">Skillset</h2>

    <section id="skills-left">

        <h4 itemprop="about">Development</h4>

        <ul>

            <li itemprop="itemListElement">HTML5/CSS3</li>

            <li itemprop="itemListElement">JavaScript & jQuery</li>

            <li itemprop="itemListElement">PHP Backend</li>

            <li itemprop="itemListElement">SQL Databases</li>

            <li itemprop="itemListElement">WordPress</li>

            <li itemprop="itemListElement">Pligg CMS</li>

            <li itemprop="itemListElement">Some Objective-C</li>

        </ul>

    </section>

     

    <section id="skills-right">

        <h4 itemprop="about">Software</h4>

        <ul>

            <li itemprop="itemListElement">Adobe Photoshop</li>

            <li itemprop="itemListElement">Adobe Dreamweaver</li>

            <li itemprop="itemListElement">MS Office 2007-2010</li>

            <li itemprop="itemListElement">cPanel & phpMyAdmin</li>

            <li itemprop="itemListElement">Xcode 4</li>

        </ul>

    </section>

</section>

CSS3 Multiple Backgrounds

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
} 

 

CSS3 Colors

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

 

CSS3 Gradients

#grad {
  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */
}