Belajar CSS

dari : http://www.koder.web.id/tutorial-css-html/belajar-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.

PSEUDO-CLASS	Keterangan	KOMPATIBILITAS
:active	Element yang sedang aktif	IE4[*], FF1, O3.5, S1, CSS1
:first-child	Element yang merupakan anak pertama dari suatu element	IE5/7, FF1, O7, S1, CSS1
:focus	Element yang difokuskan	IE5[*], FF1, O7, S1, CSS2
:hover	Element dengan cursor mouse di atasnya	IE4[*], FF1, O3.5, S1, CSS2
:lang()	Element dengan kode bahasa tertentu	FF1.5, O8.5, S1.5, CSS2
:link	Element yang belum dikunjungi	IE4, FF1, O3.5, S1, CSS1
:visited	Element yang telah dikunjungi	IE4, FF1, O3.5, S1, CSS1

Contoh dari deklarasi pseudo class adalah sebagai berikut:

a {
     display: block;
     font-size: larger;
     padding: 2px 4px;
     text-decoration: none;
     border-bottom: 1px solid #ccc;
     font: small Arial, Helvetica, sans-serif; }
a:link {
     color: #f00;
     font-weight: bold; 
}
a:visited {
     color: #c99; 
}

Tag link < a > diatas didefinisikan dengan tiga style berbeda untuk tiga keadaan, yaitu keadaan biasa, keadaan dimana link belum dikunjungi, dan keadaan dimana link telah dikunjungi.
Pseudo Element
Pseudo element merupakan bagian yang unik dari suatu element seperti huruf pertama atau baris pertama dari paragraf yang dapat di-style secara berbeda dengan bagian lainnya dari element yang sama. Berikut ini adalah daftar dari pseudo element:

PSEUDO-ELEMENT	Keterangan	KOMPATIBILITAS
:first-letter	Huruf pertama dari suatu element	IE5[*], FF1, O3.5, S1, CSS1
:first-line	Baris pertama teks dari suatu element	IE5/7, FF1, O7, S1, CSS1
:after	Space sebelum suatu element	IE5[*], FF1, O7, S1, CSS2
:before	Space setelah suatu element	IE4[*], FF1, O3.5, S1, CSS2

Contoh deklarasi dari pseudo element seperti berikut:

p {
     line-height: 150%; }
p.dropCap:first-letter {
     font: bold 700% 'party let', 'comic sans MS', fantasy;
     margin-right: 12px;
     color: red;
     float: left; 
}

dalam tag HTML misalnya:

1 2	<p class="dropCap">The Mock Turtle sighed deeply, and drew the back of one flapper across his eyes... </p>

Cara Penggunaan CSS

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

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

<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>

Penulisan CSS dengan cara inline ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

2. Embedded CSS. Menaruh rule css didalam tag style di dalam header dokumen html. Contoh

<html>
<head>
<style>
     p { color:green;font-family:arial;font-size:120%;}
</style>
</head>
<body>
<p>Belajar Css Mudah</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara </p><p>dan</p>akan memiliki format yang sama
</body>
</html>

3. External CSS. Menggunakan File Css yang dituliskan secara terpisah. Cara ini adalah cara yang paling di anjurkan. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.

Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
1
2

p {font-family: arial; font-size: small;}
h1 {color: red; }
Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag < head > dan < / head >
1
2
3

<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</link></head>

Rekomendasi Artikel: