hanifrizal.blogspot.com

RzaaL 1306 | Jasa Desain Template Blogger Murah, Aman, Terpercaya


CSS (CASCADING STYLE SHEET)


Tentang CSS

CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untukmempersingkat 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.

Cara penulisan CSS


  • Inline style sheet

Penulisan didalam elemen HTML.
<html>
<head>
<title> Contoh : Inline Style Sheet </title>
</head>
<body>
  <p style='color : red ; font-size : 200%'> Hello </p>
</body>
</html>

Hello

  • Embedded Style Sheet

Penulisan CSS didalam dokumen HTML dan menggunakan tag <style></style>
<html>
<head>
<title> Contoh : Embedded Style Sheet </title>
<style>
h1{color:red}
</style>
</head>
<body>
<h1>Hello</h1>
</html>

Hello

  • Linked Style Sheet

Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.
<html>
<head>
<title> Contoh : Linked Style Sheet </title>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<h1>Linked Style Sheet</h1>
</html>
style.css

<style>
h1{color:red}
</style>

Hello


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
style.css
h1{
      color:red
}
.isiteks{
      font-family:Arial;
      font-size:24 px;
      color: #6699FF;
}

<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<p class='isiteks'>Contoh Class</p>
</html>

Contoh class

ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda.
style.css
h1{
      color:red
}
#judul{
      font-family:Arial;
      font-size:14 px;
      color: #6699FF;
}


<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<p id='judul'>Contoh ID</p>
</html>

Contoh ID


CSS Background

Property background
1. Background-color
Body {
Background-color : green;
}

2. Background-Image
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
}


CSS Font

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>

Sponsor

DMCA.com

Artikel Terkait

57 Comment at " Dasar Dasar CSS "

  1. Masih Berantakan Dasar Dasar CSSnya, Tapi mudah mudahan pada ngerti :D

    BalasHapus
  2. mantap (y)
    cukup lengkap, boleh di bookmark kalo mau posting lagi

    BalasHapus
  3. dah malam.. besok dilanjutin bacanyee

    BalasHapus
  4. wahhhhh mantap kali nih sob....

    ane mau tanyak nih... gmana cara buat kotak koment nih di atas, sperti punya sobat...

    BalasHapus
  5. mantap banget mas bro...
    izin nyimpan di brankas dulu??

    BalasHapus
  6. kunjungan gan.... jangan lupa kunjungan baliknya...
    Boriel Cyber ++== - Tutorial Blog | Jadwal Olahraga | Berita Teknologi | Tips n Trik | Sepakbola

    BalasHapus
  7. Meskipun ruwet tetapi Cukup lengkap & bisa untuk kupelajari yang belum tahu mas :D
    Nice post dah (y) :jempolbesar

    BalasHapus
  8. mantep sob..
    skarang ane udah paham..

    BalasHapus
  9. @AL-STE Alhamdulillah kalo ini bisa membantu :D

    BalasHapus
  10. wah lengkap bgt ni... mzki radak bingung.. hehehehe :)

    BalasHapus
  11. sepp nih semoga bnyak yg ngerti hehe sehingga makin banyak blogazine indonesia

    BalasHapus
  12. wekwkwek azine jadi tutor wkwkwk..

    BalasHapus
  13. wah.. jago bgt css nya bang.

    mau tanya kalo yang ini artinya apa ya gan?


    #sesuatu p+p { text-indent: 25px; }

    newbie lagi minta pencerahan bang. tolong dibantu ya :)

    BalasHapus
  14. <-- masih bingung sama id dan class

    BalasHapus
  15. tutorial yang sangat lengkap

    BalasHapus
  16. Lengkap sob, tpi ane bingung @_@

    BalasHapus
  17. Mantaaappp ... Detail banget bang..
    Kapan kapan buat blog kek bang rizal ...

    BalasHapus
  18. @Algo Wijaya Kalo id pake #
    kalo class pake titik (.)

    BalasHapus
  19. @Hafiizh Eko ini masih dasar"nya mas, kalo bingung bisa tanya" atau baca lagi :D

    BalasHapus
  20. wooww lengkap banget nih...
    bookmark dulu lah..
    thanks tutornya mas :D

    BalasHapus
  21. @Yoga SadegaSip, tapi ini cuma dasarnya aja :D

    BalasHapus
  22. kawan tw caranya mengatasi avatar yang gak muncul pada comment tw gak?

    BalasHapus
  23. @Dimas Setya Aji kasih <b:include data='blog' name='all-head-content'/> dibawah head

    BalasHapus
  24. Mantap Gan ,baru tau ane kalo element tag css class ,id dll itu beda ya :D

    kirain sama
    # sama . :D hahahaha

    BalasHapus
  25. wah...mantab pisan...super lengkap mas gan

    BalasHapus
  26. Huwaa.. ini cocok banget buat Pembelajaran Ayas neh,
    yang dari dulu masih rada ngerti dan sering lupa buat kode-kode dasarnya Sob!!
    Hweheheee....

    MAKASI BANGET atas Tutorialnya yach!!
    ^_^

    BalasHapus
  27. @bagi bagiosaya juga kadang" lupa makanya di post aja :D

    BalasHapus
  28. A blog like yours should be earning much money from adsense.

    BalasHapus
  29. wah. jago bgt css.nya. saya masih bingung. wajar. bru 4 bl sob

    BalasHapus
  30. Bagus pembelajarannya bisa dijadikan referensi untuk buat template blogazine ihi, thanks sudah mau berbagi.

    BalasHapus

website passionately designed and developed by Hanif Rizal .
© 2011 - 2013 RzaaL 1306 | powered by Blogger