Dokumen ini menjelaskan tentang CSS (Cascading Style Sheets) sebagai kode untuk mendesain tampilan halaman HTML, dengan fokus pada pemisahan konten dan presentasi. Juga dibahas peran tag <span> dan <div> yang berfungsi dalam membuat struktur web tanpa makna tertentu, serta cara menerapkan CSS melalui berbagai metode. Terdapat pula referensi untuk belajar lebih lanjut tentang CSS.

1. 1
CSS - Cascading Style Sheets
1 Pengertian CSS
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup”
, dimana bahasa markup ini salah satunya adalah HTML.
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain
atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text,
warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML
ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan
untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

2. 2
CSS Memisahkan tampilan dan konten

3. 3
2 Pengertian tag Span dan tag Div
Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain kedua tag ini, tag-
tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa fungsi dari kedua tag ini?
Tag <span> dan tag <div> yang tidak bermakna ini malah menjadi salah satu tag yang paling sering
digunakan untuk membuat struktur web, terutama tag <div>. Tag <div> yang tidak memiliki style
bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS.
Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan
yang lainnya.
Contoh paling umum untuk penggunaan tag <div> adalah sebagai container atau pembatas satu
struktur HTML dengan struktur lainnya. Berikut adalah contoh struktur HTML menggunakan tag
<div>:

4. 4
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
Contoh perbedaan kedua tag ini dapat dilihat dalam kode HTML berikut, savelah
sebagai spandiv.html

5. 5
3 Cara Menggunakan CSS
Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline
Style, Internal Style Sheets, dan External Style Sheets.

6. 6

7. 7

8. 8
4 Aturan dan Cara Penulisan Kode CSS

9. 9

10. 10
5 Latihan

11. 11

12. 12

13. 13

14. 14

15. 15
6 Referensi :
https://www.duniailkom.com/tutorial-belajar-css-dan-index-artikel-css/
https://bertzzie.com/knowledge/desain-web-dasar/HTMLdanCSSDasar.html
https://www.senikoding.com/2017/01/belajar-css-dasar-lanjutan-mudah-dipahami.html
http://tokokoding.blogspot.co.id/2013/05/dasar-dasar-css.html
http://tokokoding.blogspot.co.id/2013/05/dasar-dasar-css.html
http://www.codebareng.net/2017/05/belajar-membuat-layout-dengan-html-dan.html