Pengenalan Dasar Dasar web dengan CSS.docx

Halaman 1
Dasar CSS
Setelah belajar HTML, bahasa berikutnya yang harus kita pelajari agar menjadi web
developer adalah CSS.
Pemahaman tentang CSS sangat penting, jika ingin fokus pada front-end web
development.
Tugas front-end developer biasanya akan membuat halaman web berdasarkan desain
dari desainer.
Alur kerja CSS dalam membuat web, digambarkan sebagai berikut.
Sumber dari : https://www.petanikode.com/css-untuk-pemula/
Web desainer membuat desain web dalam bentuk rancangan gambar kemudian
diterusakn oleh front end web developer dalam bentuk Bahasa markup HTML, CSS
dan JavaScript.
Apa itu CSS?
CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur tampilan web
sehingga terlihat lebih menarik dan indah.
Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, background,
animasi, dan lain-lain.
Contoh:

Halaman 2
Sumber : https://itkoding.com/belajar-css/
Tanpa CSS, website terlihat jelek dan tidak tertata. Sedangkan jika menggunakan CSS,
tampilannya jadi lebih bagus dan rapi.
Cara Menulis CSS di HTML
Cara penulisan CSS di HTML ada tiga:
1. Inline CSS –> ditulis di atribut elemen HTML;
2. Internal CSS –> ditulis di dalam tag <style>;
3. External CSS –> ditulis di file CSS terpisah dengan HTML.
1. Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen HTML.
Kode CSS ditulis langsung tanpa menggunakan kurung kurawal{ ... }. Kemudian
properti tetap dipisah dengan titik koma.
Contoh:
<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>
Contoh kode lengkap inline CSS

Halaman 3
 <h2>, <p> adalah elemen heading dan paragraf pada HTML.
 style adalah atribut yang digunakan untuk menambahkan CSS.
 color: red, maroon; adalah kode CSS yang membuat warna teks menjadi merah
dan maroon.
2. Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS juga
dikenal dengan sebutan Embeded CSS.
Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di dalam tag <body>.
Namun kebanyakan orang menulisnya di dalam <head>.
Contoh:

Halaman 4
3. Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal
CSS ditulis di dalam file khusus yang berekstensi .css.
Gambar eksternal css
Contoh:
File css diberi nama style.css berisi kode :
File style.css selanjutnya dihubungkan dengan file html.
Contoh file index.html sebagai file html nya sebelum dihubungkan dengan file css.
Selanjutnya file HTML (index.html) dihubungkan dengan file CSS (style.css).

Halaman 5
Untuk menyambungkan CSS tersebut ke HTML. Kita perlu menambahkan tag <link>
pada file HTML.
<link rel="stylesheet" type="text/css" href="style.css" />
Dituliskan dibawah <head>
CSS Syntax
Apa itu CSS Syntax?
CSS Syntax adalah aturan/tata cara dari penulisan CSS yang baku, terdiri dari selector
dan declaration yang terdiri dari tiga bagian:
1. Selektor;
2. Blok Deklarasi;
3. Properti dan nilanya.
Format penulisannya seperti ini

Halaman 6
1. Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita beri style.
Contohnya:
Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).
Selektor dapat berupa nama tag, class, id, dan atribut.
Contoh:
2. Blok Deklarasi
Blok deklarasi adalah tempat kita menuliskan atribut atau properti CSS yang akan
diberikan ke pada elemen yang telah diseleksi.
Contoh:
Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px.
Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.

Halaman 7
Satu blok deklarasi, bisa dipakai oleh lebih dari satu selektor.
Contohnya:
Ini artinya kita memberikan warna sama untuk semua tag <h1> sampai <h6>.
Bisa juga ditulis seperti ini:
Intinya, selektor dipisah dengan koma.
3. Properti dan Nilainya
Properti adalah sekumpulan aturan yang akan diberikan kepada elemen yang
dipilih.
Format penulisan properti seperti ini:
Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu
properti, boleh tidak menggunakan titik koma.
Properti harus ditulis di dalam blok deklarasi.
Contoh:
Penulisan Komentar di CSS
Komentar biasanya dipakai untuk memberikan informasi tambahan di kode CSS.
Cara menulis komentar di CSS dilakukan dengan tanda /* dan diakhiri dengan */.

Halaman 8
Contoh:
/* ini adalah komentar */
/*
ini juga komentar
yang ditulis lebih dari
satu baris
*/
Selain untuk memberikan informasi tambahan, kita juga bisa menggunakan komentar
untuk menaonaktifkan beberapa kode tertentu.
Contoh:
p {
/* color: red; */
font-family: "Times new roman";
}
Properti color: red tidak akan dipakai, karena dia berada di dalam komentar.
Memahami 6 Jenis Selektor di CSS
Setelah memahami struktur dasar CSS dan cara menulis CSS di HTML, berikutnya kita
akan pelajari lebih dalam tentang selektor.
Hal dasar yang harus kita ketahui setelah memahami cara menulis HTML di CSS adalah
selektor.
Selektor adalah katakunci dan simbol yang digunakan pada CSS untuk menyeleksi
atau memilih elemen HTML.
Ada 6 macam selektor di CSS:
1. Selektor Tag
2. Selektor Class
3. Selektor ID
4. Selektor Atribut
5. Selektor Universal
6. Selektor Pseudo
1. Selektor Tag
Selektor Tag disbut juga Type Selector. Selektor ini akan memilih elemen berdasarkan
nama tag.
Contoh:
p {
color: blue;
}

Halaman 9
Artinya: Pilih semua elemen <p> lalu atur warna teksnya menjadi biru.
Kalau misalnya kita punya struktur HTML seperti ini:
Semua elemen <p> berwarna biru, sedangkan elemen <div> tidak.
2. Selektor Class
Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang
diberikan. Selektor class dibuat dengan tanda titik di depannya.
Contoh:
.pink {
color: white;
background: pink;
padding: 5px;
}
Kita memiliki selektor class beranam .pink. Nah cara menggunakan selektor ini di
HTML adalah dengan menambahkan atribut class di dalamnya.
Contoh:
Selektor class dapat kita gunakan pada elemen yang kita inginkan.
3. Selektor ID
Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh
digunakan oleh satu elemen saja.
Selektor ID ditandai dengan tanda pagar (#) di depannya.
Contoh:

Halaman 10
Lalu pada kode HTML:
4. Selektor Atribut
Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor
ini hampir sama seperti selektor Tag.
Contoh selektor Atribut:
Artinya kita akan memilih semua elemen <input> yang memiliki atribut type='text'.
Contoh kode HTML:
5. Selektor Universal
Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen
pada jangkaua (scope) tertentu.
Contoh:
Artinya semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna
grey.
Selektor universal bisanya digunakan untuk me-reset CSS.
Kenapa harus di-reset?
Pada halaman HTML, ada beberapa CSS bawaan browser seperti padding dan margin
pada elemen tertentu.
Reset bertujuan untuk menghilangkan padding dan margin tersebut.
Contoh CSS reset:
* {
padding: 0;
margin: 0;
}
Maka semua elemen tidak akan memiliki padding dan margin.

Halaman 11
LATIHAN CSS
1. Penulisan CSS
Inline.
inline.html
Internal
internalcss.html

Halaman 12
Eksternal CSS
index.html
styles.css
2. TUGAS 1
Buatlah tampilan HTML seperti berikut dengan internal css
Nama file : tugas1.html

Halaman 13
PRAKTIK CSS Selektor
selectortag.html
selectorclass.html

Halaman 14
selectorid.html
TUGAS 2
Buatlah tampilan html seperti dibawah ini menggunakan CSS selector
Selector.html

Pengenalan Dasar Dasar web dengan CSS.docx

Recommended

Recommended

More Related Content

Similar to Pengenalan Dasar Dasar web dengan CSS.docx

Similar to Pengenalan Dasar Dasar web dengan CSS.docx (20)

More from Pemerintah Kab. batang SMK Kandeman

More from Pemerintah Kab. batang SMK Kandeman (8)

Recently uploaded

Recently uploaded (20)

Pengenalan Dasar Dasar web dengan CSS.docx