contoh dasar css

Tutorial CSS : Dasar CSS

Cascading Style Sheet

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.

•  

o    Selector

Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda < >.

ATRIBUT – ATRIBUT CSS

1.       

a.      Font-size :

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

1.       

b.      Font- family :

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

1.       

c.      Line-height :

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

1.       

d.      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

1.       

e.      Border :

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

1.       

f.       Width :

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

1.       

g.      Height :

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

1.       

h.      Margin :

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

1.       

i.        Padding :

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

Contoh Sintaknya

body {
background-color: #333333;
font-family : Tahoma;
font-size : 12px;
}
#main {
background-color: #ffffff;
width : 1000px;
margin : 0 auto;
border : 1px solid #000000;
} .clear {
clear : both;
flat : none;
}
#header {
background-color: #000000;
}
#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;
}
#menuk {
margin : 5px;
width : 250px;
float : left;
} #menut {
margin : 5px;
width : 725px;
float : left;
}
#bg_menu { background-color: #ccc;
background-image: url(menu.gif);
border : 1px solid #333;
border-bottom : 0;
padding : 7px;
padding-left :10px;
color : #FFFFFF;
font-weight :bold;
font-size :12px;
height :10px;
}