CSS (Cascading Style Sheet)

Oleh ; D. Sinaga, M.Kom

 CSS (Cascading style sheet)
• Adalah bahasa pemrograman yang digunakan untuk
membantu menata tata letak sebuah halaman web.
• Terkadang element yang terpasang di html hanya
mempunyai satu propertis saja, maka dengan bantuan
CSS setiap element di dalam html bisa dimodifikasi.
• Oleh karena itu setiap element yang dibuat dengan CSS
bisa mempunyai sifat inheritance (turunan).
• Pendeklarasian sebuah CSS berada pada hirarki head
pada hirarki HTML.
• Setiap element di dalam CSS mempunyai atribut
masing-masing, misal font-size:10px
 Selectors

• Penulisan element (selector) CSS dalam

HTML ada 3 kelompok :
1.CSS Tag HTML
2.CSS Element id
3.CSS Element class
 Penulisan CSS
1. Embedded style sheet = CSS bisa langsung dituliskan di dalam
head dengan memberikan MIME Type (text/css)
• Contoh :
• <style type=“text/css”>
• ...Content....
• </style
1. External style sheet = CSS juga bisa dibuat diluar file HTML,
dengan (external link).
• Contoh :
• <link rel=“stylesheet” type=“text/css” href=“style.css”>
1. Inline style sheet = CSS juga bisa dibuat satu baris di
• dalam element html.
• Contoh :
• <h1 style=“color:#000000;” >
 FORMAT PENULISAN ELEMENT

• contoh : (selector) dan atribut css

– Body { background:#FFFFF;}
– #wrapper { margin : 0 auto;}
• Dalam setiap penulisan Element diikuti dengan
tanda kurung kurawal.
• Dalam penulisan setiap atribut, cara
penulisannya adalah nama atribut diikuti oleh
tanda titik dua ( : ) kemudian properti atributnya
dan diakhiri dengan semikolon ( ; )
• Penulisan css tag html
• Dalam penulisan CSS tag HTML, adalah cukup
dengan memberikan element pada setiap
element HTML yang akan diberi atribut pada
CSS.
• Contoh :
Body { background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
 Penulisan css ELEMENT ID
• Dalam penulisan CSS element div, adalah dengan menambahkan
karakter # (cross) pada setiap pembuatan element.
• Pada pemanggilan di HTML dengan menggunakan id,
<div id=“header”>content</div>
Contoh :
#header {
height:300px;
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
 Penulisan css ELEMENT class
• Dalam penulisan CSS element div, adalah dengan
menambahkan karakter . (titik) pada setiap pembuatan
element.
• Pada pemanggilan di HTML dengan menggunakan id,
<div class=“header”>content</div>
Contoh :
.header{
height:300px;
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
 GROUP SELECTOR
• Terkadang di dalam penulisan element
• biasanya mempunyai atribut yang sama pada
setiap element.
• CSS memperbolehkan penulisan atribut secara
bersama-sama pada sebuah grup element.
• Contoh :
– h1, h2, h3, h4 { border:solid red
– 1px; }
 ELEMENT CLASS PADA TABEL
• Dalam pembuatan sebuah tabel, kontruksi dari bentuk
tabel yang terdiri dari kolom-kolom bisa kita modifikasi
dengan menggunakan CSS.

<table class=“aturtabel”>
<tr>
<td>Satu</td> <td>Dua</td>
</tr>
</table>
Dalam CSS:
. aturtabel{ border-collaps:collaps; }
. aturtabel td{ border:red solid 1px; }
 INHERITANCE PADA ELEMENT
(SELECTOR) CSS
• Dalam selector CSS mendukung juga Fungsi inheritance
(turunan), dimana setiap atribut
• element dari sebuah element turunan tidak akan
mempengaruhi sebuah element yang lain.
• Contoh :
• #header h1{color:#000000;}
• h1{color:#123456;}
• Pada baris pertama terdapat element h1yang
merupakan turunan dari id#header .
• Sedangkan h1 pada baris kedua memiliki attribut sendiri
sehingga ketika dijalankan akan menghasilkan 2 element
yang berbeda.
 Atribut padding dan margin
Padding adalah properti yang digunakan untuk membuat jarak antar objek dan isi
objek
Contoh :
padding : 1px 2px 3px 4px;
* 1px (top), 2px(right), 3px(button), 4px(left)
padding : 2px 2px 2px 2px: ( padding : 2px; )
Border adalah properti yang digunakan untuk memberikan garis pada sebuah konten.
Contoh :
border: 1px solid red; (membuat garis setebal 1px dengan garis penuh dan berwarna
merah)
Margin adalah properti yang digunakan untuk membuat jarak (margin) objek dari layar

Contoh :
margin : 1px 2px 3px 4px;
* 1px (top), 2px(right), 3px(button), 4px(left)
margin : 2px 2px 2px 2px;
margin : 0 auto; (membuat objek di tengah)
 MODEL KOTAK (BOX model)
• Di dalam pengaturan tata letak sebuah halaman
web site agar terlihat menarik seringkali dikotak-
kotak/di blok dan diletakkan di beberapa bagian
halaman website.
• Pengkotak-kotakan tersebut tidak lepas dari
beberapa blok (blok kotak) yang berisi tentang
bagian-bagian yang akan ditampilkan di
halaman web browser, kotak-kotak tersebut
secara virtual digambarkan ke dalam tata letak
halaman web site.
• Misalnya : kotak untuk header, kotak footer,
kotak isi halaman, kotak kanan atau kotak kiri.
MODEL kotak (BOX MODEL)
 Example

• div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• background-color: lightgrey;
• width: 300px;
• padding: 25px;
• border: 25px solid navy;
• margin: 25px;
• }
• </style>
• </head>
• <body>
• <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
• </body>
• </html>