CSS (Cascading Style Sheet) adalah bahasa pemrograman untuk menata tata letak halaman web dengan memodifikasi elemen HTML. Ada tiga cara penulisan CSS: embedded, external, dan inline, dan CSS mendukung konsep inheritance dan grup selector untuk memudahkan pengelolaan atribut elemen. Model kotak (box model) digunakan untuk mengatur tata letak objek di halaman web agar terlihat rapi dan menarik.

1. CSS (Cascading Style Sheet)

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

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

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

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

6.  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;
}

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

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

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

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

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

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

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

14. MODEL kotak (BOX MODEL)

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

16.  <!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>