Materi css (CASCADING STYLE SHEETS )
Tentang CSS
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>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”cssku.css”>
</style>
</head>
<body>
<p class=kotak > teks1 <p>
</body>
</html>
0 komentar:
Posting Komentar