» » » » » Bahan Ajar Cascading Style Sheets (CSS)

Bahan Ajar Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

A.      TUJUAN
1.      Praktikan mengetahui manfaat CSS dalam halaman web
2.      Praktikan  mengetahui jenis-jenis penulisan CSS
3.    Praktikan dapat mengaplikasikan format CSS dalam tiap halaman web

B.       DASAR TEORI
CSS (Cascading Style Sheet)
CSS 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.
CSS dimulai dengan :
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.
Contoh:
Contoh: Inline style sheet


Oke Coy!!!!


  • Embedded Style Sheet
Penulisan CSS didalam dokumen HTML dan menggunakan tag
Contoh:
Contoh: Embedded style sheet


Hello World....



  • Linked Style Sheet
Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.
Contoh:
      TYPE="text/css">

Q: sebutkan sebuah kata bijak yang anda ketahui?
A: never judge a book from its cover!!!



            File global.css
            B {color: red; text-decoration: underline;
     font-family: Arial }
I {color:blue; font-family:"Monotype    Corsiva";  font-size:20}  
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
Contoh style1.css
h1
{
      color:red;
}
.isi{
      font-family:Geneva, Arial, Helvetica, sans-serif;
      font-size:large;
      color:#00FF00;
}
Contoh pemanggilan class:


Contoh Class


ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda.
Contoh style2.css
h1
{
      color:red;
}
.isi
{
      font-family:Geneva, Arial, Helvetica, sans-serif;
      font-size:large;
      color:#00FF00;
}
#judul
{
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:36px;
      color:#990066;
}
Contoh pemanggilan ID


Contoh pemanggilan ID



CSS Background
Property background
  1. Background-color
Body {Background-color : green; }
  1.  Background-Image
Body {Background-image : url(gambar1.jpg); }
  1.  Background-attachment
Body {Background-attachment : scroll;}
  1. Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url(image/gambar1.jpg);
}
  1. 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;}
  1.  Font-size (satuan em,pt,px,mm,cm,%)
P { Font-size : 24em; }
  1.  Font-style (nilai : oblique,italic,normal)
P {Font-style : oblique;}
  1.  Font-variant (nilai : normal,small-caps)
P {Font-family : Arial,Helvetica;}
  1. Font-weight (nilai :normal,bold,bolder,lighter,100-900)
P {Font-weight : bolder;}


CSS Teks
Property teks
  1. color
P {color :red;}
  1.  teks-align (nilai left,right,center,justify)
P {Text-align :justify;}
  1.  text-decoration (nilai : none,underline,overline,line-through,blink)
P {Text-decoration :overline;}
  1.  text-transform (nilai : none,capitalize,uppercase,lowercase)
P {Text-transform : capitalize;}
  1.  Letter-spacing
P {letter-spacing : 20px;}
  1.  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 ;}
  1.  List-style-image (nilai : url,none)
Ul {List-style-image : url(gambar1.jpg) ;}
  1.  List-style-position (nilai : inside,outside)
Ul {List-style-position : inside;}

Model Pemformatan Pada CSS
Dengan mengerti tentang pemformatan, maka akan lebih mudah memahami apa yang dilakukan terhadap properti-properti pada CSS.
Setiap kotak, mempunyai content area ( seperti text atau image) dan tiga area lain yang berada di sekelilingnya, yaitu padding, border, dan margin. Ketiga area tersebut masing-masing memiliki 4 bagian yaitu top, right, left, dan bottom.

Margin
Margin adalah untuk mengatur spasi bagian luar, yang sering kita temui adalah sebagai berikut: margin : 10px; <---- 10px="" akan="" atas="" bawah="" kanan="" kiri="" o:p="" sama="" spasi="" ukurannya="" yaitu="">
Margin: 10px 20px 30px 10px; <--- adalah="" atas="" bawah="" kanan="" kiri="" o:p="" urutannya="">
Margin : 10px 20px <--- adalah="" akan="" atas="" bagian="" bawah="" dan="" ini="" kanan="" kiri="" mengikuti="" o:p="" px="" spasi="">
Margin: 20px 10px 30px; <---- akan="" atas="" dan="" ini="" kanan="" kiri....="" menjadi="" o:p="" set="" ter="">

Apabila ingin mengatur jaraknya secara manual/salah satu aja, bisa sebagai berikut :
margin-left:10px;
margin-right:20px;
margin-top:30px;
margin-bottom:10px;
Contoh margin:
kodenya :

margin-left:40px;
background:#ccccff;">
Kalau yang ini contoh Margin....


hasilnya :
kalau yang ini contoh Margin....

Border
Border merupakan pembatas antara margin dan padding yang dapat berupa garis yang dapat diatur ketebalannya dengan menggunakan atribut border-width, warna border dengan border-color, dan jenis garis dengan atribut border-style. Berikut contoh penggunaan border:

Padding
Padding adalah untuk mengatur spasi bagian dalam. Yang sering kita jumpai sebagai berikut: (sama seperti margin)
Padding : 10px; <---- 10px="" akan="" atas="" bawah="" kanan="" kiri="" o:p="" sama="" spasi="" ukurannya="" yaitu="">
Padding: 10px 20px 30px 10px; <--- adalah="" atas="" bawah="" kanan="" kiri="" o:p="" urutannya="">
Padding : 10px 20px <--- adalah="" akan="" atas="" bagian="" bawah="" dan="" ini="" kanan="" kiri="" mengikuti="" o:p="" px="" spasi="">
Padding: 20px 10px 30px; <---- akan="" atas="" dan="" ini="" kanan="" kiri....="" menjadi="" o:p="" set="" ter="">

Apabila ingin mengatur jaraknya secara manual/salah satu aja, bisa sebagai berikut :
padding-left:10px;
padding-right:20px;
padding-top:30px;
padding-bottom:10px;
Contoh padding:
kodenya :


 Ini contoh padding lhooo....


hasilnya :
            ini contoh padding lhooo....

C.      LATIHAN
Latihan 1 :
Contoh penerapan Margin,Padding dan Border


  • Elemen pertama
  • Elemen kedua(dengan border)




    •
     CSS
    Layout dan Posisi

    A.      TUJUAN
    1.      Praktikan dapat merancang dan membuat halaman web menggunakan CSS
    2.      Praktikan dapat mengaplikasikan elemen pengaturan layout dan posisi menggunakan CSS dalam halaman web.

    B.       DASAR TEORI
    Layout dan Posisi
                Ada beberapa cara untuk menentukan posisi sebuah element mneggunakan CSS. Anda bisa meletakkan sebuah elemen dengan salah satu dari empat cara, yaitu :
    ·    Static. Merupakan model peletakkan elemen secara normal. Elemen diletakkan bersambungan denagn elemen sebelumnya. Misalkan ada tiga paragraf,paragaraf kedua diatur dengan style berikut :
    Width: 350px; height:150 px;
    Border : 1pt solid black;
    Background-color: white;
    Padding : ,5em;
    Position : static;
    ·    Relative. Model peletakkan elemen secara relative terhadap elemen sebelumnya. Dapat diberikan atribut tamabahan top dan left, untuk menagtur jarak elemen terhadap elemen sebelumnya. Contoh :
    Width: 350px; height:50px;
    Border : 1pt solid balck;
    Background-color: white;
    Padding : .5em;
    Position : relative;
    Top :50px; left:100px;

    ·    Absolute adalah peletakkan model paragraph secara absolute di dalam sebuah window. Anda dapat menambahkan atribut top, left, right, right, dan bottom, terhadap elemen untuk mengatur posisinya dengan pasti. Contoh :
    Width : 350px; height : 50px;
    Border :1pt solid black;
    Background-color:white;
    Padding:.5em;
    Position:absolute;
    Top:50px; left:100px;

    ·    Fixed sama seperti pada peletakkan dengan model relative. Hanya saja posisi fixed tidak berubah, walaupun window di scroll keatas atau kebawah.
    Contoh html pengaturan posisi
    Contoh :
    Pengaturan posisi image
    Mengunci image agar berada pada posisi yang pasti, dapat dilakukan dengan mengubah property background-attachment dengan nilai fixed, berikut listing selengkapnya:
    Contoh :
    C.      LATIHAN
    Latihan 1: layout dengan dua kolom:
    Layout 2 Kolom



    Praktikum-2009


    Modul Praktikum, Sudah jadi

    3 Oktober 2009
    silahkan mengisi paragraf ini




  • 2009
  • 2008
  • 2007
  • 2006
  • 2005



    • © 2009 Labkom 6
    labkom6.blogspot.com




    Latihan 2: layout dengan 3 kolom :
    (layout tiga kolom dengan navigasi di sebelah kiri, isi di tengah, dan tambahan satu kolom di kanan.



    [...isi bagian header....]


    [...isi bagian kolom kiri...]


    [...isi bagian kolom tengah...]


    [....isi bagian kolom kanan....]


    [....isi bagian footer....]




    0 Response to "Bahan Ajar Cascading Style Sheets (CSS)"

    Post a Comment

    Subscribe to: Post Comments (Atom)