Scribd
Unggah
53 tayangan20 halaman

Pemrograman WEB: By: Saepul Aripiyanto

CSS digunakan untuk mendefinisikan gaya tampilan teks pada halaman web, seperti jenis huruf, ukuran, dan warna. Terdapat beberapa cara untuk menambahkan CSS ke kode HTML, yaitu secara inline, internal, eksternal, dan impor. Class dan ID selector memungkinkan penentuan gaya untuk kelompok atau elemen tunggal.

Diunggah oleh

Wan Ridwan Chagon
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
53 tayangan20 halaman

Pemrograman WEB: By: Saepul Aripiyanto

CSS digunakan untuk mendefinisikan gaya tampilan teks pada halaman web, seperti jenis huruf, ukuran, dan warna. Terdapat beberapa cara untuk menambahkan CSS ke kode HTML, yaitu secara inline, internal, eksternal, dan impor. Class dan ID selector memungkinkan penentuan gaya untuk kelompok atau elemen tunggal.

Diunggah oleh

Wan Ridwan Chagon
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Pemrograman WEB

By: Saepul Aripiyanto


PENGENALAN CSS

CSS = Cascading Style Sheet


Fungsi : mendefenisikan style untuk suatu teks dengan
jenis huruf, ukuran , warna tertentu.
MEMBUAT CSS
 sebuah website bisa terdiri dari puluhan bahkan ratusan
halaman. Jika kita akan merubah halaman tersebut maka
kita harus merubah satu persatu perhalaman.
 Jika menggunakan css perubahan tersebut tidak masalah
karena css bisa menyimpan format dan menggunakan ka
panpun dan dimanapun
 Ada 4 cara memasang kode CSS ke dalam kode HTML/h
alaman web yaitu:
1. Inline Style Sheet (Memasukan kode css langsung pada t
ag HTML)
2. Internal Style Sheet (Embed atau memasang kode CSS k
e dalam bagian <head>)
3. Melink ke external CSS
4. Import CSS File
MEMBUAT CSS
CARA PERTAMA :
(Inline Style Sheet)
 mengetikkan langsung dalam tag html seba
gai atribut . Cara ini sebaiknya dilakukan jika ha
nya menformat 1 kali saja
 penulisan CSS dengan cara ini dimulai dengan
kata style:lalu diikuti dengan syntax property :
Value
CARA KEDUA :
(Internal Style Sheet)
 Menggunakan tag style di antara
tag <head> dan </head>
 Penulisan CSS dengan cara ini diawali dengan
tag <style> dan diakhiri dengan </style>
CARA KEDUA :
(Internal Style Sheet)
Style definitions : adalah defenisi style yang ingin dibuat.
Format penulisannya adalah :

Selector { property1 : value1 ;


property2 : value2;….
propertyN : valueN ; }

Selector adalah tag yang digunakan web browser.


Property : value adalah efek dari style yang diinginkan un
tuk selector.
CARA KEDUA :
(Internal Style Sheet)
• Contoh :
• <style type=“text/css” >
• hr { color : red ; height : 5px ; width : 50%; }
• </style>

• Keterangan :
• Tag adalah style
• Atribut adalah type=“text/css”
• Selector adalah hr
• Property adalah color, height, width
• Value adalah red, 5px, 50%
CARA KEDUA :
(Internal Style Sheet)
CARA KETIGA :
(External Style Sheet)
 Kode CSS external ditulis dalam satu file terpisah yang
disimpan dengan ekstensi/type file *.css
 Kemudian untuk memanggil file css yang dibuat tadi dengan
menggunakan tag link yang diletakkan pada <head> dan
</head>
 yang pertama dilakukan adalah membuat file dengan
notepad ++ atau teks editor lainya kemudian simpan dengan
ektensi file *.css pada folder terpisah dengan HTMLnya.
 Kemudian panggil file ektensi css tersebut dengan tag:
<head>

<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>

</head>
CARA KETIGA :
(External Style Sheet)
1. Buat file dengan ektensi *.CSS

2. Setelah file CSS dibuat kemudian panggil file tersebut pada tag HTML
CARA KEEMPAT :
(Import CSS)
 Kita bisa meng-import CSS ke dalam suatu file CSS yang lain menggunaka
n tag import.
1. Tulislah file dengan nama file style2.css

2. Kemudian tulis file degan nama style.css yang terdapat tag


import fle2.css

3. Kemudian tinnggal membuat tag HTML dengan


menyertakan file css dengan metode external Style Sheet
CLASS & ID SELECTOR
 Class
 Penggunakan class untuk membuat berbagai macam variasi
bagi satu tag HTML
 Sebagai contoh kita ingin membuat tag h1 warna merah
sedangkan untuk h1 kedua berwarna hijau dan h1 ketiga
berwarna birumaka dengan tag class kita bisa lakukan itu
semua
 Class Selector
 Class Selector digunakan untuk menentukan sekelompok elemen dan
class selector digunakan untuk banyak Elemen.
 Cara Penulisan Class Selector:

 Kemudian untuk menempelkan ke Tag HTML maka untuk penulisannya

 Perhatikan tanda . (titik) disetiap awal nama ID. Jika ingin menggunakan
class selector diluar kode HTML harus menggunakan tag
<div class=nama-ID> dan diakhiri dengan tag </div>
 Class Selector
 Buat file css nya dengan nama myweb.css
 Class Selector
 Kemudian panggil css tersebut pada tag html
Tampilan Output contoh Class Selector
ID Selector
 ID selector digunakan untuk menformat sebuah elemen yang untuk
dan muncul satu kali dalam satu halaman web.
Misalnya untuk menformat bagian Menu

 ID unik hanya bisa digunakan untuk pada satu elemen, sedangkan


sebuah class dapat digunakan pada beberapa elemen.

 Cara penulisan id selector:

 Dan untuk menempelkannya di tag HTML menggunakan:

 Perhatikan tanda # disetiap awal nama ID. Jika ingin menggunakan clas
s selector diluar kode HTML harus menggunakan tag <div id=nama-ID
> dan diakhiri dengan tag </div>
Thank You

Anda mungkin juga menyukai