Apa Itu CSS ??

Apa itu CSS ???

Cascading Style Sheet atau yang biasa disingkat CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur.

Lalu apa sih kegunaan dari CSS ???

CSS  sendiri digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. 

Penggunaan CSS juga memiliki beberapa keuntungan loh.. Simak baik-baik yaah penjelasan di bawah ini...

1.     Memisahkan presentastion sebuah dokumen dari content document itu sendiri.

2.     Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web

3.     Mempercepat proses rendering/pembacaan HTML.

Bagaimana Penulisan CSS Yang Benar???

1. Script css body

body {
margin: ... ;
border: ... ;
background: ... ;}

2. Scrip css bagian header

#header {
border: ... ;
background: ... ;
text-align: ... ;
padding: ... ;
margin: ... ;}

#header h1 {
text-align: ... ;}

#header h1 a {
color: ... ;}

#header p {
text-align: ... ;
color: ... ;}

#header a {
color: ... ;}

3. Script css untuk mengatur kategori postingan blog

#category {
border: ... ;
background: ... ;
text-align: ... ;
padding-bottom: ... ;}

#category h2 {
border: ... ;
background: ... ;
text-align: ... ;
margin: ... ;
padding: ... ;}

#category li { list-style-img: url() ;}

4. Script css untuk mengilangkan tampilan search form (pencarian konten blog)

#search_form {
display:none;}

5. Contoh script untuk mengatur shortcut menuju navigasi

#nav_shortcut {
border: ... ;
background: ... ;
text-align: ... ;
color: ... ;
padding: ... ;
margin: ... ;}

#nav_shortcut a {
color: ... ;}

6. Contoh css untuk mengatur konten

#content {
margin: 0 ;
text-align: ... ;}

.post {
border: ... ;
background: ... ;
margin: ... ;}

.post .title {
border: ... ;
background: ... ;
color: ... ;
text-align: ... ;
margin: ... ;
padding: ... ;}

.post .title a {
color: ... ;}

.post p {
color: ... ;
text-align: ... ;
margin: ...px ;
padding: ...px ;}

.post a {
color: ... ;}

.post .comment_link {
text-align: ... ;}

7. Contoh scrip css khusus untuk ubah gambar tombol share
.share_button img{content:url(http://caramembuat.mywapblog.com/files/fb.png);}

8. Contoh css bagian navigasi

#navigation {
border: ... ;
background: ... ;
margin: ... ;}

#navigation h2 {
border: ... ;
background: ... ;
text-align: ... ;
margin: ... ;
padding: ... ;}

#navigation h2 a {
color: ... ;}

#navigation p {
color: ... ;
margin: ... ;
padding: ... ;}

#navigation a { color: ... ;}

9. Contoh cara menghilangkan bagian footer dengan css

#footer {display:none;}

10.  Contoh kode css untuk pengaturan blogroll

#blogroll {
border: ... ;
background: ... ;
margin: ... ;}

#blogroll h2 {
border: ... ;
background: ... ;
text-align: ... ;
margin: ... ;
padding: ... ;}

#blogroll h2 a {
color: ... ;}

#blogroll p {
color: ... ;
margin: ... ;
padding: ... ;}

#blogroll a {
color: ... ;}

11. Css pengaturan komentar

#comments {
border: ... ;
background: ... ;
color: ... ;
text-align: ... ;
margin: ... ;}
#comments a {
color: ... ;}
#comments h2 {
border: ... ;
background: ... ;
color: ... ;
text-align: ... ;
margin: ... ;
padding: ... ;}
#comments h2 a {
color: ... ;}
#comments h6 {content:url(http://caramembuat.mywapblog.com/files/ridho.gif);}
.comment {
border: ... ;
background: ... ;
margin: ... ;}

.comment .title {
border: ... ;
background: ... ;
color: ... ;
text-align: ... ;
margin: ... ;
padding: ... ;}
.comment .title a {
color: ... ;}
.comment p {
color: ... ;
text-align: ... ; padding: ... ;}
#comments form {
border: ... ; background: ... ;
text-align: ... ;
padding: ... ;
margin: ... ;}
#comments form a {
color: ... ;}
#comments form [type=text] {
background: ... ;
color: ... ;}
#comments form [type=submit] {
background: ... ;
color: ... ;}
#comments form textarea {
background: ... ;
color: ... ;}

Posted in: