Tutorial Css

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website. Cascading Style Sheet (CSS) memberikan kenyamanan mendesain Web seperti apa yang dapat kita lakukan di word processor, yaitu menggunakan style. Kita dapat menentukan CSS dalam satu lokasi yang nantinya dapat mempengaruhi tampilan dari tag HTML tertentu baik dalam satu HTML hingga keseluruhan Web.
Walaupun CSS bekerja dalam lingkup HTML, tetapi CSS bukan HTML. CSS merupakan kode terpisah yang dapat mengembangkan kemampuan HTML untuk menampilkan isi dari suatu tag.CSS sangatlah mudah untuk dibuat. Tidak membutuhkan plugin atau software tambahan karena hanya teks biasa dengan aturan yang telah ditentukan.

Tipe Selector Css

Ada tiga selector umum atau cara untuk memilih HTML yang akan menggunakan style, yaitu:

• HTML selector.Nama dari element 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:

  h1 { font: bold 12pt times; }

• Class selector. Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kita dapat membuat nama kelas dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serba guna. Contohnya:

  .myClass { font: bold 12pt times; }

  Perlu di tekankan sekali lahi, 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.

• 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. Contohnya:

  #myObject1 { position: absolute; top: '10px; }

  Sekali lagi di tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #header diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.

Pseudo Class

Banyak element HTML yang mempunyai status/keadaan atau fungsi yang spesial yang dapat menggunakan style yang berbeda. Contoh utama adalah tag link < a > yang tidak hanya memiliki keadaan normal tetapi juga keadaan dimana link sudah dikunjungi.
Pseudo class merupakan keadaan atau fungsi yang sebelumnya telah ditetapkan untuk suatu element yang dapat menggunakan style berbeda dengan keadaan biasa dari suatu element.