Belajar CSS untuk pemula

Belajar HTML dan CSS adalah sebagai landasan utama jika anda ingin mengedit website anda atau ingin menjadi seorang web designer. CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol penyajian dari HTML untuk di tampilkan sebagai website.

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:

1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:

Cara membuat background transparan dengan CSS dan Gambar

Cara membuat background yang transparan dalam HTML dapat kita lakukan dengan menggunakan CSS maupun gambar.

Membuat background transparan dengan CSS.

Untuk membuat background transparan dengan CSS dapat menggunakan style CSS dengan properti opacity dan background dengan nilai rgba. Kedua properti tersebut merupakan properti dari CSS3.

Cara membuat sudut lengkung dengan CSS

Sudut lengkung atau dalam bahasa Inggris-nya rounded corners dulunya biasa dibuat dengan menggunakan gambar.

Pengaturan List menu dengan CSS

Pengaturan List menu dengan CSS

Tag elemen untuk membuat List di dalam dokumen HTML adalah: <ul> digunakan untuk list yang tidak berurutan (unordered list) kemudian, <ol> digunakan untuk list yang berurutan kemudian diikuti <li > adalah list menu yang akan ditampilkan (list item).
Untuk lebih jelasnya perhatikan contoh berikut ini:

Nama dan kode hexadecimal warna

Nama dan kode hexadecimal warna . Berikut ini adalah tabel nama-nama warna serta kode hexadecimal warna standar yang sering digunakan di dalam dokumen HTML dan CSS.

Jenis-jenis font family untuk CSS

Jenis-jenis font family untuk CSS

Berikut adalah contoh penulisan font-family:

selector {font-family: family-name, generic-family;}

Sebagai contoh untuk pengaturan font selector heading (h1) di dalam CSS:

Mengubah satuan ukuran font dari px, %, em dan pt

Tabel berikut ini dapat digunakan untuk mengubah satuan ukuran font didalam dokumen HTML maupun CSS. Telah di test dan di uji di modern browser dengan ukuran font dan jenis font standarnya masing-masing.

Dalam satu baris pixels (px), percent (%) Ems (em) dan points (pt) di bawah ini akan menghasilkan ukuran font yang sama.

Dengan catatan ukuran font dipengaruhi juga oleh jenis font, browser dan system yang digunakan.

CSS example - CSS in action

Berikut ini adalah hasil karya saya, sebuah contoh membuat tulisan HTML dan CSS dengan hanya menggunakan CSS. Semua sudut lengkung menggunakan CSS juga, tidak ada tabel atau javascript. Bisa di perbesar dan diperkecil mengikuti lebar jendela browser.

Mungkin akan terlihat berantakan jika menggunakan browser versi lama, saya pernah mencobanya di Internet Explorer 7 dan Mozilla Firefox 2.0 Windows.