CSS digunakan untuk mengatur tata letak halaman web. CSS memungkinkan modifikasi setiap elemen HTML dengan menambahkan gaya dan properti seperti ukuran font, warna, dan posisi. Terdapat tiga cara penulisan CSS yaitu embedded, external, dan inline stylesheet. Selector CSS dibedakan menjadi tag, id, dan class. Model kotak menjelaskan bagaimana padding, border, dan margin mempengaruhi ukuran elemen.

1. Pemrograman Internet Dasar
BEI HARIRA IRAWAN, S.KOM, MM, M.KOM

2. Pemrograman Dasar
CSS (Cascading Style Sheet)

3. 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

4. Selectors
• Penulisan element (selector) CSS dalam HTML ada 3 kelompok :
1.CSS Tag HTML
2.CSS Element id
3.CSS Element class

5. 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;” >

6. 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 ( ; )

7. •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;
}

8. 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;
}

9. 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;
}

10. 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; }

11. 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; }

12. 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.

13. 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)

14. 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.

15. MODEL kotak (BOX MODEL)

16. Example
• div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

17. • <!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>