Rabu, 12 Juni 2013

Belajar CSS itu menyenangkan

Apa itu CSS?? mungkin banyak orang yang ga tau tentang css,banyak orang  bilang css namun nggak tau apa pengertian dan fungsi css.kali ini ciko mau membahas tentang css berikut contohnya,
ini adalah lanjutan dari postingan yang kemaren soal HTML bagi yang belum tau apa itu HTML klik disini,


CSS (Cascading Style Sheet)
adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak
terjadi pengulangan tulisan.
Keuntungan menggunakan CSS
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.
Aturan penulisan CSS
Selector
Terdiri dari tag,class,ID
Declaration
Mendeskripsikan property dan value
Contoh
H1
{
Color : #0000FF
}
Keterangan :
Selector : H1
Properti : Color
Value : #0000FF
Macam-macam Selector
Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
stlye1.css

ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain
web krn didefiniskan denga ID berbeda.
Misl.
Style1.css

CSS Background
Property background
1. Background-color
Contoh:
Body {
Background-color : green;
}
2. Background-Image
Contoh:
Body {
Background-image : url('/gambar1.jpg');
}
3. Background-attachment
Body {
Background-attachment : scroll;
}
4. Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url('/image/gambar1.jpg');
}
5. Background-position
Body {
Background-repeat : no-repeat;
Background-image : url('/image/gambar1.jpg');
Background-position : bottom center
}

Property Font
1. Font-family
P {
Font-family : Arial,Helvetica;
}
2. Font-size (satuan em,pt,px,mm,cm,%)
P {
Font-size : 24em;
}
3. Font-style (nilai : oblique,italic,normal)
P {
Font-style : oblique;
}
4. Font-variant (nilai : normal,small-caps)
P {
Font-family : Arial,Helvetica;
}
5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)
P {
Font-weight : bolder;
}
CSS Teks
Property teks
1. color
P {
color :red;
}
2. teks-align (nilai left,right,center,justify)
P {
Text-align :justify;
}
3. text-decoration (nilai : none,underline,overline,line-through,blink)
P {
Text-decoration :overline;
}
4. text-transform (nilai : none,capitalize,uppercase,lowercase)
P {
Text-transform : capitalize;
}
5. Letter-spacing
P {
letter-spacing : 20px;
}
6. Teks-indent
P {
Text-indent : 50px;
}
CSS List
Property list
1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style-image (nilai : url,none)
Ul {
List-style-image : url('/gambar1.jpg') ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
CSS Border
Property Border
1. border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-style-type : groove ;
}
2. border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-bottom-style : groove ;
}
3. border-bottom-width ()
.b1 {
border-bottom-width :10px;
}
4. border-bottom-color ()
.b1 {
border-bottom-color :red;
}
Margin dan Padding
Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web
Body {
Margin-top : 4cm;
Margin-right : 3cm;
Margin-bottom :3cm;
Margin-left : 4cm;
}
Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
Pd css
.kotak {
Padding-top : 25px;
Padding-right : 25px;
Padding-bottom : 25px;
Padding-left: 25px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
Pada file HTML
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”cssku.css”>
</style>
</head>
<body>
<p class=kotak > teks1 <p>
</body>
</html>

Author : oni septian // 22.32
Kategori:

0 komentar:

Posting Komentar

tinggalkan komentar anda demi kemajuan blog saya