Scribd
Unggah
38 tayangan32 halaman

WDW06 - Pengenalan CSS

Workshop Desain Web membahas pengenalan CSS (Cascading Style Sheet) untuk memformat tampilan website. Materi pelajaran meliputi pengertian CSS, sintaks CSS, selector CSS, cara menambahkan CSS, warna CSS, latar belakang CSS, dan border CSS. Peserta diajak melakukan beberapa percobaan koding untuk mempraktikkan penggunaan CSS.

Diunggah oleh

Mei Rosa
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 PDF, TXT atau baca online di Scribd
38 tayangan32 halaman

WDW06 - Pengenalan CSS

Workshop Desain Web membahas pengenalan CSS (Cascading Style Sheet) untuk memformat tampilan website. Materi pelajaran meliputi pengertian CSS, sintaks CSS, selector CSS, cara menambahkan CSS, warna CSS, latar belakang CSS, dan border CSS. Peserta diajak melakukan beberapa percobaan koding untuk mempraktikkan penggunaan CSS.

Diunggah oleh

Mei Rosa
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 32

Workshop Desain Web

06. Pengenalan Cascading Style Sheet (CSS)

M. Udin Harun Al Rasyid, S.Kom, Ph.D


http://udinharun.lecturer.pens.ac.id
[email protected]
Arif Basofi, S.Kom, MT.

1
2
Rencana Pembelajaran Semester
Pekan Pembahasan
1-2 HTML Dasar
3 HTML 5
4 Cascading Style Sheet (CSS)
5 Cascading Style Sheet (CSS) advanced
6-7 Bootstrap
8 UTS: Presentasi Proposal Final Project Kuliah
9 Bootstrap
10-11 Javascript
12 jQuery
13 Website Layout & Template
14 Colors & Typography
15-16 UAS: Demo Final Project Kuliah

3
Capaian Pembelajaran

◼ Mahasiswa memahami sintak CSS


◼ Mahasiswa mampu membuat file CSS untuk
memformat tampilan website.

4
Pokok Bahasan
◼ What is CSS
◼ CSS Syntax
◼ CSS Selector
◼ How To Add CSS
◼ CSS Colors
◼ CSS Background
◼ CSS Borders

5
Introduction
Pengertian CSS:
• CSS kepanjangan dari Cascading Style Sheets
• Fungsi CSS: memformat tampilan web agar lebih menarik untuk dilihat oleh
user.
• CSS menyingkat waktu pekerjaan yang banyak karena dapat mengontrol
berbagai layout tampilan dgn mudah (hanya sekali ada bagian/file CSS-nya)
dari berbagai halaman web.
• CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium)
pada tahun 1996 dgn alasan dulu dokumen HTML tidak dilengkapi dgn tag-
tag yang dapat memformat halaman keseluruhan.
• Misal. Tag <font>, menjadi masalah bagi developer krn website terdiri atas bbrp
halaman pastinya memiliki variasi font, warna background juga style, shg untuk
menulis ulang kode mebutuhkan proses yg sangat panjang dan sulit.
• Dengan adanya CSS sangat membantu pekerjaan developer dalam
menentukan style halaman web, desain, layout dan variasi tampilan pada
berbagai device dan ukuran layar.
• Secara umum, file CSS tersimpan diluar dokumen HTML maupun lainnya
(php), yang disebut external style sheet dgn format *.css

6
Contoh Website dengan Variasi Tampilan CSS

7
Contoh Website dengan Variasi Tampilan CSS

8
Contoh Website dengan Variasi Tampilan CSS

9
Contoh Website dengan Variasi Tampilan CSS

10
Contoh Website dengan Variasi Tampilan CSS

11
CSS Syntax
◼ CSS terdiri atas 2 bagian yaitu

selector dan declaration

◼ Selektor mengarahkan pada elemen HTML yang ingin dibuat style-nya


◼ Blok deklarasi berisi satu/lebih deklarasi yang dipisahkan dgn titik koma (;)
◼ Setiap deklarasi menyertakan nama propertis CSS dan nilai, yang
dipisahkan oleh titik dua (:), dan blok deklarasi dikelilingi oleh tanda
kurung kurawal {….}

12
Percobaan 01:
◼ Contoh:
❑ Menampilkan semua elemen <p> rata tengah, dengan warna teks biru

❑ p adalah selector di CSS (yang membuat setiap elemen tag <p> memiliki
style tersendiri.
❑ Property : color dan text-align
❑ Nilai property: blue dan center
❑ Maka, semua teks dalam paragraph (tag <p>) akan berwarna biru dan
rata tengah

13
Percobaan 02:

14
CSS Selector

◼ CSS Selector digunakan untuk menentukan elemen2 HTML yang


diterapkan style-nya
◼ CSS selector terbagi menjadi 5 (lima) kategori, yaitu:
1) Simple Selector: memilih elemen berdasarkan nama, id, dan class
2) Combinator Selector: memilih elemen berdasarkan hubungan tertentu
3) Pseudo-class Selector: memilih elemen berdasarkan kondisi khusus
4) Pseudo-elements Selector: memilih dan memberikan style pada bagian dari
elemen
5) Attribute Selector: memilih elemen berdasarkan atribut atau nilai atribut

15
Percobaan 03:

16
Percobaan 04:

17
Percobaan 05:

18
Penempatan CSS
◼ CSS dapat ditambahkan ke dokumen HTML dengan
3 cara:
1) Inline (sebaris) : menggunakan atribut style di dalam
elemen HTML
2) Internal : menggunakan elemen <style> di bagian
<head>
3) Eksternal : menggunakan elemen <link> untuk ditautkan
ke file CSS eksternal

19
Penempatan CSS (Percobaan 06)
1. Inline CSS:
❑ digunakan untuk menerapkan style unik
pada satu elemen HTML.
❑ Menggunakan atribut style dalam
elemen HTML.
❑ Contoh berikut mengeset warna teks
elemen <h1> menjadi biru, dan warna
teks elemen <p> menjadi merah:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

</body>
</html>

20
Penempatan CSS (Percobaan 07)
2. Internal CSS:
❑ digunakan untuk menentukan style untuk satu halaman HTML.
❑ Di definisikan di bagian <head> halaman HTML, di dalam elemen <style>.
❑ Contoh: mengeset warna semua teks dalam elemen <h1> menjadi biru, dan
warna semua teks dalam elemen <p> menjadi merah. Dan warna latar
halaman diset warna "powderblue":
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

21
Penempatan CSS (Percobaan 08)
3. Eksternal CSS:
❑ digunakan untuk menentukan style untuk beberapa halaman HTML.
❑ Caranya dengan menambahkan link ke dalamnya di bagian <head>
di setiap halaman HTML:
<!DOCTYPE html>
<html> Tampilan file “styles.css”:
<head>
<link rel="stylesheet" href="styles.css"> body {
</head> background-color: powderblue;
<body>
}
h1 {
<h1>This is a heading</h1>
<p>This is a paragraph.</p> color: blue;
}
</body> p {
</html> color: red;
}
CSS Colors

23
Percobaan 09:

http://udinharun.lecturer.pens.ac.id 24
CSS Background

◼ The CSS background properties are used to define the background


effects for elements.
◼ CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

25
Percobaan 10:

26
CSS Borders

27
Percobaan 11:

http://udinharun.lecturer.pens.ac.id 28
29
Tugas Workshop

◼ Kalian Kerjakan 11 percobaan source code


diatas.
❑ Buatkan Laporan DOC yang terdiri dari:
◼ Cover
◼ Course Code, hasil tampilan, dan penjelasan tentang
tag-tag HTML setiap percobaan.

http://udinharun.lecturer.pens.ac.id 30
Next

Cascading Style Sheet (CSS) Advanced

http://udinharun.lecturer.pens.ac.id 31
Referensi

◼ https://www.w3schools.com/css/default.asp

http://udinharun.lecturer.pens.ac.id 32

Anda mungkin juga menyukai