Bab II. CSS

II CSS
 INTRO
CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen
dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi .css
 SYNTAX
SYNTAX (tag) pada CSS memiliki dua bagian, yaitu selector dan declaration.
Selector adalah elemen / HTML tag yang ingin di atur tampilannya, dan setiap declaration
berisi property dan nilainya.
COMMENT pada CSS menggunakan tag yang berbeda dari HTML, pada CSS komentar dimulai
dengan /* dan diakhiri dengan */ berikut contoh penulisan tag CSS
/* styling paragraf, teks paragraf berwarna biru dan rata tengah */
p {color:blue;text-align:center;}
 SELECTOR
ELEMEN Selector digunakan untuk styling elemen pada HTML, contoh lihat bagian syntax.
ID Selector digunakan untuk styling satu elemen unik pada dokumen HTML. ID Selector
pada CSS dinotasikan dengan tanda #
/* pengaturan style berikut akan diaplikasikan pada
elemen dengan id="para1" */
#para1 {color:blue;text-align:center;}
CLASS Selector digunakan untuk styling satu elemen unik pada dokumen HTML. CLASS
Selector pada CSS dinotasikan dengan tanda titik ( . )
seluruh elemen dengan class="center" */
.center {text-align:center;}

seluruh elemen p dengan class="center" */
p.center {text-align:center;}
II - 1
 CSS HTML APPLICATION
Ada tiga cara untuk mengaplikasikan CSS kedalam dokumen HTML yaitu inline style, internal
style sheet dan external style sheet.
INLINE STYLE adalah cara pengaplikasian CSS langsung pada atribut style sebuah elemen
HTML, namun cara ini tidak disarankan dikarenakan akan lebih sulit melakukan perubahan
style keseluruhan. Berikut contoh inline style pada elemen paragraf.
<h1 style="font-family:verdana;">judul pertama menggunakan h1</h1>
<p style="font-family:arial;color:red;font-size:20px;">ini paragraf</p>
INTERNAL STYLE digunakan ketika sebuah dokumen HTML memiliki tampilan yang unik dari
dokumen lainnya, pendefinisian CSS pada metode terletak pada bagian <head> dari dokumen
HTML dengan menggunakan tag <style> seperti contoh berikut;
<head>
<style type="text/css">
body{background-color:yellow;}
p{color:#333;}
hr {color:sienna;}
</style>
</head>
EXTERNAL STYLE digunakan ketika sebuah style diaplikasikan untuk banyak dokumen HTML,
dengan external style sheet kita dapat merubah tampilan seluruh halaman web hanya dengan
merubah satu file .css saja, dan setiap dokumen HTML harus dihubungkan ke file .css
menggunakan tag <link> pada bagian <head>
<head><link rel="sylesheet" type="text/css" href="mystyle.css"></head>
External style sheet dapat ditulis melalui text editor apapun dan dalam penulisannya tidak
dibenarkan menuliskan tag HTML apapun. External style sheet harus disimpan dengan ekstensi
.css berikut contoh penulisan CSS untuk file mystyle.css
body{background-color:yellow;}
p{color:#333;}
hr {color:sienna;}
Jika pada sebuah dokumen HTML, CSS diaplikasikan dengan ketiga cara diatas secara
bersamaan pada satu elemen, maka urutan yang lebih diutamakan untuk diaplikasikan adalah
inline style, internal style dan yang terakhir external style.
 STYLING BACKGROUND
CSS BACKGROUND PROPERTIES digunakan untuk mendefinisikan efek background pada

sebuah elemen, berikut CSS properties yang digunakan untuk styling background :
BACKGROUND COLOR digunakan untuk mendefinisikan warna latar belakang elemen;

body{background-color:#b0c4de;}
h1{background-color:white;}
p{background-color:rgba(0,0,0,0.5);}
II - 2
BACKGROUND IMAGE digunakan untuk mendefinisikan gambar yang akan digunakan
sebagai latar belakang elemen;
body{background-image:url('paradiso.png');}
BACKGROUND REPEAT digunakan untuk melakukan pengulangan background baik secara

vertikal ataupun horizontal
body{
background-image:url('gradient.png');
background-repeat:repeat-x;
/* opsi value untuk properti repeat : repeat-x, repeat-y, no-repeat */
}
BACKGROUND POSITION digunakan untuk mengatur posisi gambar background

body{
background-repeat:no-repeat;
background-position:right top;
/* opsi value untuk properti position : x% y%, xpos ypos */
}
BACKGROUND ATTACHMENT digunakan untuk mengatur sifat scrolling background

body{
background-repeat:no-repeat;
background-attachment:fixed;
/* opsi value untuk properti attachment : scroll, fixed, local */
}
BACKGROUND SHORTHAND merupakan penyingkatan penulisan sintaks CSS, berikut contoh

shorthand pada sintaks background;
body{background:#fff url('paradiso.png') no-repeat right top;}
 STYLING TEXT
body{
color:blue; /* untuk mengatur warna teks */
text-align: left; /* untuk mengatur perataan teks,
opsi value : left, right, center, justify */
}
a{
text-decoration: none; /* untuk mengatur dekorasi teks,
opsi value : none, underline, line-through, overline */
text-transform: capitalize; /* fungsi change case,
opsi value : uppercase, lowercase, capitalize */
}
p{
text-indent:50px; /* mengatur indentasi baris pertama sebuah teks */
}
II - 3
 STYLING FONTS
body{
/* mendefinisikan jenis huruf yang digunakan*/
font-family:"Times New Roman", Times, serif;
font-size:11px; /* untuk mengatur ukuran huruf */
}
h1{
font-variant: small-caps; /* mengubah teks menjadi kapital dan
lebih kecil dari ukuran biasa */
font-weight: bolder; /* mengatur ketebalan teks
opsi value : normal, bold, bolder, lighter */
}
 STYLING LINK
Berbeda dengan styling text, pada link terdapat beberapa moment yaitu normal, setelah diklik
( visited ), ketika dilalui cursor ( hover ) dan ketika sedang diklik ( active ), pada
css penulisan moment diawali dengan titik dua ( : ) diikuti oleh nama moment setelah tag
a:link{text-decoration:none;font-size:11px;color:#000;}
a:hover{text-decoration:underline;font-size:13px;}
a:active{color:red;}
a:visited{color:#333;}
 STYLING LIST
ol{list-style-type:decimal-leading-zero;} /* mengatur tanda list item

opsi value (ol):none, upper-roman, lower-alpha, decimal, dll
opsi value (ul):none, disc, square */
ul{list-style-image:url('ownbullet.png');} /* menggunakan gambar sebagai

tanda list item
 STYLING TABLE
table, th, td{border: thin solid #a7c942}; /* mengatur beberapa elemen

yang memiliki kesamaan style pada border
opsi value : thin, thick, 1px (ukuran dalam px)
opsi value : solid, dashed, dotted, none
opsi value : warna html (kode warna, nama warna, kode rgb) */
table{
border-collapse:collapse; /* border tabel menjadi satu garis */
width:100%; /* mengatur lebar tabel */
}
II - 4
th{height:50px; background-color:#a7c942;} /* warna header table */
td{vertical-align:midle; padding:5px;} /* atur jarak teks dari border */
tr.ganjil{background-color:#98bf21;} /* warna baris dgn class ganjil */
Berikut tabel yang dihasilkan dari kode CSS diatas;
 BOX MODEL
Seluruh elemen HTML dapat dianggap sebagai box, box model digunakan ketika perancangan
dan layout. Box model diilustrasikan sebagai sebuah kotak yang membungkus elemen HTML
dan sebuah box memiliki css properties margin, border, padding dan konten (isi sebenarnya).
Berikut ilustrasi box model :
MARGIN adalah jarak kosong antara border elemen dengan elemen lainnya.
BORDER adalah garis tepi yang mengelilingi padding dan content.
PADDING adalah jarak kosong antara border dengan content.
CONTENT adalah isi dari box, tempat tampilnya teks dan gambar.
width:250px; /* lebar content box 250 pixel */
margin:10px; /* lebar box ditambah 20px margin kiri kanan */
border:2px solid green; /* lebar box ditambah 4px border kiri kanan */
padding:5px; /* lebar box ditambah 10px padding kiri kanan */
/* total lebar box : 284px (250px + 20px + 4px + 10px) */
II - 5
 GROUPING SELECTOR
GROUPING SELECTOR adalah penggabungan beberapa elemen HTML yang memiliki style yang
sama, contoh grouping selector dapat dilihat pada contoh kode di bagian styling table.
 CSS DISPLAY & VISIBILITY
Properties display mendefinisikan bagiamana suatu elemen ditampilkan, dan properties

visibility mendefinisikan apakah elemen harus ditampilkan atau disembunyikan.
h1{ visibility:hidden; } /* visibility akan tetap mengambil space */
p{ display:none; } /* display none tidak akan mengambil space
opsi value : inline, block */
li{ display:inline; }
Pada properti display, terdapat nilai inline dan block, properti ini sangat penting ketika kita
membangun layout menggunakan elemen div.
display:inline elemen hanya akan mengambil space sebesar yang dibutuhkan, dan tidak
memiliki pemisah baris (line break), <span> , <a> adalah contoh dari inline elemen.
display:block elemen dapat memanfaatkan/mengambil seluruh space yang tersedia, elemen

block juga memiliki pemisah baris (line break) sebelum dan sesudahnya, <h1> , <p> , <div>
adalah contoh dari block elemen.
Halaman Awal dengan elemen diatur dengan display dan visibility
Elemen dengan visibility di set Elemen dengan display di set

hidden (hide) none (remove)
II - 6
 CSS POSITIONING
Dengan CSS positioning kita dapat mendefinisikan posisi sebuah elemen, dapat juga
menempatkan elemen dibelakang elemen lain dan mendefinisikan bagaimana elemen
ditampilkan ketika isinya lebih besar dari kontainernya. Pada dasarnya setiap elemen HTML
akan ditampilkan sebagaimana alur halaman HTML dibuat.
FIXED POSITIONING merupakan pengaturan posisi elemen dengan titik kait browser
window, elemen dengan position fixed, oleh dokumen dan elemen lain posisinya akan dianggap
seakan-akan tidak ada.
#fb-topbar{position:fixed;top:0;left:0; /* mengatur posisi elemen */
width:100%;height:30px;background:blue;}
RELATIVE POSITIONING merupakan pengaturan posisi elemen terkait dengan posisi

normalnya, elemen dengan position relative dapat diletakkan berlapis dengan elemen lain dan
tetap mengikuti alur normalnya.
#content{position:relative;top:50px;}
ABSOLUTE POSITIONING merupakan pengaturan posisi elemen terkait elemen diatasnya,

jika tidak ditemukan elemen diatasnya maka elemen yang dijadikan titik kait adalah <html>
h2{position:absolute;top:100px;left:150px;} /* mengatur posisi elemen */
OVERLAPPING ELEMENTS terjadi ketika elemen diletakkan diluar alur normalnya.

Pendefinisian urutan tampilan elemen diatur dengan perintah z-index:999, dimana nilai
terbesar akan tampil diatas elemen lain.
 FLOATING ELEMENTS
Dengan CSS float, sebuah elemen dapat (melayang) diletakkan di kiri ataupun kanan. Float
biasa digunakan untuk gambar juga sangat berguna ketika merancang layout.
img{float:right;width:150px;height:150px;} /* opsi value: right, left */
div.last {clear:both;} /* opsi value : left, right, both, none, inherit
mendefiniskan tempat kosong yang tidak boleh diletakkan elemen */
 CSS TRANSPARENCY
Image ditampilkan normal Diatur dengan css img{opacity:0.4;}
II - 7
 CSS ATRIBUT SELECTOR
Styling atribut merupakan cara styling tanpa menggunakan id ataupun class, dimana kita
mendefinisikan tampilan terkait atribut lain pada elemen HTML.
input[type="text"]{background-color:yellow;}
 SELENGKAPNYA http://www.w3schools.com/css/default.asp
II - 8

Bab II. CSS

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab II. CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

II CSS

/* pengaturan style berikut akan diaplikasikan pada

<head><link rel="sylesheet" type="text/css" href="mystyle.css"></head>

CSS BACKGROUND PROPERTIES digunakan untuk mendefinisikan efek background pada

BACKGROUND COLOR digunakan untuk mendefinisikan warna latar belakang elemen;

BACKGROUND REPEAT digunakan untuk melakukan pengulangan background baik secara

BACKGROUND POSITION digunakan untuk mengatur posisi gambar background

BACKGROUND ATTACHMENT digunakan untuk mengatur sifat scrolling background

BACKGROUND SHORTHAND merupakan penyingkatan penulisan sintaks CSS, berikut contoh

ol{list-style-type:decimal-leading-zero;} /* mengatur tanda list item

ul{list-style-image:url('ownbullet.png');} /* menggunakan gambar sebagai

table, th, td{border: thin solid #a7c942}; /* mengatur beberapa elemen

Berikut tabel yang dihasilkan dari kode CSS diatas;

 CSS DISPLAY & VISIBILITY

Properties display mendefinisikan bagiamana suatu elemen ditampilkan, dan properties

display:block elemen dapat memanfaatkan/mengambil seluruh space yang tersedia, elemen

Elemen dengan visibility di set Elemen dengan display di set

RELATIVE POSITIONING merupakan pengaturan posisi elemen terkait dengan posisi

ABSOLUTE POSITIONING merupakan pengaturan posisi elemen terkait elemen diatasnya,

h2{position:absolute;top:100px;left:150px;} /* mengatur posisi elemen */

OVERLAPPING ELEMENTS terjadi ketika elemen diletakkan diluar alur normalnya.

Image ditampilkan normal Diatur dengan css img{opacity:0.4;}

Anda mungkin juga menyukai