PENGERTIAN DAN PERINTAH DARI CSS

CSS adalah bahasa yang kita gunakan untuk berbicara kepada komputer mengenai perintah – perintah untuk mengatur tampilan, gaya atau style dari suatu website sehingga dengan kita menggunakan css kita bisa mempersingkat pembuatan dan penulisan kode dibandingkan kita mengatur style web menggunakan format yang ada di html. 

Berikut perintah CSSnya:

.daerah-footer {
margin: 1px;
padding: 3px;
text-align: justify;
font: 12px;
color: #151515;
background: #585858;
}

Penulisan css pada web dapat dibagi menjadi tiga:

1.penulisan css internal

2.penulisan css external.

3.Penulisan css Inline style.

Penulisan css internal kode css ditulis langsung pada halaman website anda diantara

<head>

</head>

Berikut contoh penulisan css internal yang ditaruh pada file index.html

<head>

<title> judul web </title>

<style type=text/css>
body {
    background-color:#999;
} 

</style>

</head>

 Penulisan css secara external kode css disimpan dengan nama file yang berbeda
contoh:

pada dreamweaver klik

file new-->blank page -->CSS lalu create setelah itu tulis kode dibawah ini

<style type=text/css>

body {
    background-color:#999;
} 
</style>

 Anda dapat meyimpan kode dengan extention css. contoh simpan kode diatas dengan nama

seting.css  

contoh  Penulisan css Inline style.

penulisan ini langsung ditaruh di tag css:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan agar terlihat rapi.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kenapa kita perluh belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

INPLEMNTASI CSS

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

o    Inline CSS

o    Embed atau memasang kode css ke dalam bagian <head>

o    Pada link ke external CSS

o    Import CSS file

Penasaran ? ,, Mari kita bahas satu per satu :

1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:

<P style=”color:blue”>
Isi paragraf.
</p>

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warnabiru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:

<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. 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.
Contoh:

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

p {font-family: arial; font-size: small;} h1 {color: red; }

2.      Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>

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

4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:

@import "style.css";

atau
@import url("style.css");