This document contains a presentation by Yusra Fernando about CSS (Cascading Style Sheets). It includes her profile, objectives of learning CSS, definitions and syntax of CSS, examples of CSS selectors and exercises. Students are asked to complete the exercises by adding additional CSS code and selectors to files, and also submit 15 original CSS scripts by email.

1. 1

2. HTML - CSS
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
by:
2

3. PROFIL
Nama : Yusra Fernando, S.Kom., M.Kom.
Status : Menikah
Anak: Muhammad Ibrahim Hanif Fernando
Pendidikan : S1, Teknik Informatika/(Ti) (Teknokrat 2004)
S2, Ilmu Komputer/(Cs) (IPB 2012)
Email : yusra.fernando@teknokrat.ac.id
Pengalaman
Pekerjaan :  Asisten Dosen STMIK TEKNOKRAT 2006-2008
 Dosen STMIK TEKNOKRAT 2009 - 2017
 Dosen UNIVERSITAS TEKNOKRAT INDONESIA 2017 – Sekarang
 Tim Kerja Bidang Kemahasiswaan (2015-2017)
 Wakil Dekan III FTIK (2017)
 Tim Kerja Wakil Rektor III Bidang Kemahasiswaan (2017- 2019)
 Wakil Dekan III FEB (2019)
No. Telepon : 0852 7920 9118 (sms, line, WA)
yusra.fernando@teknokrat.ac.id
+6252 7920 9118
+6252 7920 9118
Yusra Fernando, M.Kom
CONTACT ME
3

4. CSS (CASECADING STYLE SHEET)
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
by:
4

5. Objectives Learning
 Student know the Css Definition
 Student know Css Sintax and Selector CSS
 Student know the Web Technology, HTML, Web Static & Web
Dynamic
UNIVERSITAS
TEKNOKRAT INDONESIA
5

6. What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple
web pages all at once
• External stylesheets are stored in CSS files
UNIVERSITAS
TEKNOKRAT INDONESIA
6

7. CSS Syntax and Selectors
UNIVERSITAS
TEKNOKRAT INDONESIA
7

8. Exercise
1. CSS SelectorCSS
2. CSS ColorButton
3. CSS FORMS
4. CSS Navigation Bar
5. CSS MENU Dropdown
UNIVERSITAS
TEKNOKRAT INDONESIA
8

9. Selector <TAG>
Save File by Name : tagSelectorCss.html
1. Selector <tag>
9

10. Source Code
Save File by Name : clssSelectorCss.html
2. Selector .class
Selector .class
10

11. 2. How To Style Alert Buttons
UNIVERSITAS
TEKNOKRAT INDONESIA
11

12. Source Code
Save File by Name : colorButton.html
UNIVERSITAS
TEKNOKRAT INDONESIA
12

13. 3. CSS FORMS
UNIVERSITAS
TEKNOKRAT INDONESIA
13

14. Source Code
Save File by Name : Form1.html
UNIVERSITAS
TEKNOKRAT INDONESIA
14

15. 4. CSS Navigation Bar
UNIVERSITAS
TEKNOKRAT INDONESIA
15

16. Source Code
Save File by Name : navigation.html
UNIVERSITAS
TEKNOKRAT INDONESIA
16

17. 5. CSS Menu Dropdown
UNIVERSITAS
TEKNOKRAT INDONESIA
17

18. Source Code
Save File by Name : dropdownMenu.html
UNIVERSITAS
TEKNOKRAT INDONESIA
18

19. Kerjakan Latihan CSS Berikut:
1. CSS
1. Tag (Tambahkan 2 Tag Selector )
2. Class (Tambahkan 2 Class Selector )
2. CSS - Style Alert Buttons (Tambahkan 2 Button)
3. CSS - FORM (Tambahkan 2 Input Text)
4. CSS – Navigation Bar (Tambahkan 2 Link Menu Navigasi)
5. CSS – Menu Drop Down (Tambahkan 2 Menu DropDown)
19

20. TUGAS CSS :
 Kunjungi Situs W3School
 Buat 15 script CSS Masing – masing mahasiswa harus
berbeda (ketikkan script yg terbaik)
20

21. Pengumpulan Tugas :
 Dikumpul kirim via Email ke : yusra.fernando@teknokrat.ac.id
 Sampai dengan Sabtu, 28 Oktober 2020
 Pukul 22.00 Wib
21

22. TERIMAKASIH ...
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
2019
22