CSS

Cascading Style Sheet

---

---

1. Pengertian

CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya.


• Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda < >.
• Property
Adalah aturan dalam CSS untuk mengubah selector yang dipilih. Property mempunyai nilai yang disebut dengan value. Property berada dalam tanda {}.
• Value
Merupakan nilai dari property CSS.

---



2. Atribut - Atribut CSS


1. Font-size :
Untuk mengubah ukuran font. Contoh : {font-size:large}

2. Font- family :
Untuk mengubah jenis tulisan. Contoh : { font-family:Geneva, Arial, Helvetica, sans-serif; }

3. Line-height :
Untuk menentukan line spacing(jarak vertikal antara baris). Contoh : {line-height:1.5 em}

4. Text-align :
Untuk menyesuaikan perataan text yang kita berikan apakah itu rata kiri, rata kanan, rata tengah atau rata kanan dan kiri. Contoh :
{ text-align:left; } =untuk perataan teks kiri
{ text-align:right; } =untuk perataan teks kanan
{ text-align:center; } =untuk perataan teks tengah
{ text-align:justify; } =untuk perataan teks kanan dan kiri

5. Border :
Untuk memberi garis/batas pada kotak/bidang HTML. Contoh : { border:double; }

6. Width :
Untuk menentukan lebar kotak/bidang HTML. Contoh : { width:30px; }

7. Height :
Untuk menentukan tinggi kotak/bidang HTML. Contoh : { width:10px; }

8. Margin :
Untuk pemberian jarak di luar kotak/bidang HTML. Contoh : { margin:20px; }

9. Padding :
Untuk pemberian jarak di di dalam kotak/bidang HTML. Contoh : { padding:15px; }


---



3. Contoh Syntax CSS :



body {
background-color: #9F6;
font-family : Times New Roman;
font-size : 12px;
}

#main {
background-color : #fffff;
width : 1000px;
margin : 0 auto;
border : 1px solid #000000;
}

.clear {
clear : both ;
float : none;
}

#header {
background-color : #000000;
height : 237;
width : 1000;
}

#menu {

background-color: #000000;

background-image: url (menua.gif);

border : 1px solid #00000;

padding : 11px;

height : 10px;

padding-bottom : 15px;
}


#menu li {
display: inline; }


#footer {
background-color: #000000; }

---