STRUKTUR PENULISAN CSS

STRUKTUR PENULISAN CSS

Berikut ini adalah struktur penulisan CSS.

Selector { Properties : Value; }

1.      Selector

Bagian pertama sebelum tanda “{}” disebut selector, selector digunakan untuk menentukan element mana yang akan diatur stylenya. CSS memiliki 3 jenis selector basic yaitu class selector, ID selector, dan tag selector.

      

a.    Class  selector

                     Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam CSS disimbolkan dengan tanda titik ( . ).

            Contoh :

       Penulisan code di dalam dokumen HTML

            . . . .

            <h3 class=’judul’>

            Belajar Membuat Website

            </h3>

            . . . .

            Penulisan code dalam CSSnya

            .judul{

            Font : 12pt Impact;

            }

                     Sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.

       b. ID Selector

                     Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.

            Contoh:

            Penulisan code dalam dokumen HTML

            . . . .

            <div id=’footer’>

            Copy-Right Telkom School – 2014

            </div>

            . . . .

            Penulisan code di CSSnya

            #footer {

            color: blue;

            border: 1px solid black;

            }

                          Selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #footer di atas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.

       c. Tag selector

                     Nama dari elemen HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.

            Contoh:

            Penulisan code di dokumen HTML

            . . . .

            <h1> Mengarungi Samudra PHP </h1>

            <h1> Belajar HTML dan CSS </h1>

            . . . .

            Penulisan code di CSSnya

            h1{

            font: 12pt Impact;

            color:red;

            }

2.        Declaration

          Bagian yang berada di dalam tanda “{}”, terdiri dari property dan nilainya.