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>
0 komentar:
Posting Komentar
tinggalkan komentar anda demi kemajuan blog saya