Modul Praktikum CSS – Cara Cerdas Belajar CSS

Mengatur Teks
1. Mengatur Perataan Teks
Properti yang dipakai adalah text-align, nilainya bisa berupa left, center, right, atau justify
Nilai untuk properti text-align
Nilai Properti
Keterangan
center
Teks diletakkan di tengah
right
Teks diatur rata kanan
left
Teks diatur rata kiri
justify
Teks diatur rata kiri dan kanan
2. Mengatur Jarak Antar Baris
Menggunakan properti line-height
3. Mengatur Jarak Antarhuruf atau Antarkata
Menggunakan properti letter-spacing untuk mengatur jarak antar kata, dan properti word-spacing
untuk mengatur jarak antar huruf
Contoh : jarak.css
.karakter

{
letter-spacing : 0.4 em ;
}
.kata
{
word-spacing : 1.5 em ;
}

jarak.html


Jarak Horisontal



Lihatlah, hari sangat indah. Langit cerah dan matahari sumringah
Lihatlah, hari sangat indah. Langit cerah dan matahari sumringah
Lihatlah, hari sangat indah. Langit cerah dan matahari sumringah

4. Mengatur Indentasi
Membuat awal sebuah paragraf yang menjorok ke kanan dapat diatur dengan properti teks-indent
Contoh : indent.css
p{
teks-indent : 50 px ;
}

indent.html


Indentasi




Jazz merupakan aliran musik yang berasal dari Amerika serikat. Awalnya dikenal hanya di komunitas Afrika Amerika sejak
awal abad 20. Sebutan Jazz baru diluncurkan di Chicago sekitar tahun 1915. Saat ini jazz telah dikenal di mana saja

Apabila teks-align diberi nilai negatif dan memadukannya dengan padding-left, maka bisa
dimanfaatkan untuk membuat hanging-indent
Contoh : hanging.css
p{
teks-indent : -30 px ;
padding-left : 30 px ;
}

hanging.html


Hanging




Jazz merupakan aliran musik yang berasal dari Amerika serikat. Awalnya dikenal hanya di komunitas Afrika Amerika sejak
awal abad 20. Sebutan Jazz baru diluncurkan di Chicago sekitar tahun 1915. Saat ini jazz telah dikenal di mana saja

5. Mengubah Semua Huruf Menjadi Kapital atau Kapital Hanya pada Awal Kata
Properti teks-transform bermanfaat untuk melakukan konversi teks ke huruf kapital, huruf kecil,
atau hanya mengapitalkan awal kata. Nilai yang bisa diisikan ke properti ini adalah sebagai berikut :
 capitalize
: setiap awal kata diubah ke huruf kapital
 lowercase
: setiap teks diubah ke huruf kecil
 uppercase
: setiap teks diubah ke huruf kapital
 none
: teks ditampilkan tanpa dikonversi
contoh : transform.css
.capital {text-transform : capitalize ; }
.lower {text-transform : lowercase ; }
.upper { text-transform : uppercase ; }

transform.html


Transform



Tes…tes…123. Sukaria jalan-jalan ke mana saja
Tes…tes…123. Sukaria jalan-jalan ke mana saja
Tes…tes…123. Sukaria jalan-jalan ke mana saja
Tes…tes…123. Sukaria jalan-jalan ke mana saja



6. Elemen span untuk Memformat Teks
Tag digunakan untuk memformat bagian teks tertentu yang berada dalam suatu elemen html
Contoh : span.css
.superscript {
vertical-align : super ;
}

.subscript {
vertical-align : -40 % ;
}

span.html


Transform



Persamaan ax2 + bx + c = 0 dan
H2O bisa disajikan




7. Membuat Efek Stabilo
Elemen span bisa digunakan untuk membuat efek stabilo
Contoh : stabilo.css

.stabilo {
Background-color : yellow ;
}

stabilo.html


Transform



Stabilo sebenarnya nama produk, tetapi telah menjadi istilah yang menyatakan pewarnaan pada bagian-bagian penting
dalam tulisan. Efeknya seperti ini. Namun, pewarnaan pada zaman sekarang tidak hanya
berupa kuning melulu.



Latihan Soal
Buat Tampilan berikut pada browser :

Dampak Hujan Asam
Dampak Hujan Asam bagi Kesehatan Manusia

Pada

dasarnya

gas

sulfur

dioksida

(SO2)

dan

nitrogen

oksida

(NOx)

bersifat

membahayakan bagi kesehatan manusia. Kedua gas tersebut akan bereaksi di udara membentuk
sulfat dan nitrat yang berupa partikel halus yang dapat masuk terhirup ke saluran pernapasan
manusia, bahkan partikel halus sulfat dan nitrat tersebut dapat masuk ke dalam ruangan indoor.
Menurut berbagai studi yang dilakukan, kedua partikulat halus tersebut dapat menyebabkan
seseorang sakit yang berhubungan dengan kelainan jantung dan paru-paru, seperti asthma dan
bronchitis.
Dampak Hujan Asam bagi Tumbuhan
Hujan asam juga membawa dampak buruk bagi berbagai macam tumbuhan. Air yang
bersifat asam yang jatuh ke tanah dapat melarutkan berbagai macam nutrient dan juga mineral
yang sangat diperlukan oleh tumbuhan. Nutrien dan mineral tersebut akan terbawa jauh sebelum
tumbuhan sempat mengambilnya. Ditambah lagi, air yang sifatnya asam, akibat dari hujan asam,
akan menyebabkan meningkatnya kandungan elemen toksik, seperti Aluminium, di tanah. Akibat
dari dampak tersebut adalah daun-daun akan berubah warna menjadi coklat hingga akhirnya
tumbuhan mati.
Dampak yang lebih parah akan dirasakan oleh tumbuh-tumbuhan yang terdapat di area

pegunungan yang tinggi. Tumbuhan tersebut akan lebih sering terpapar oleh awan atau kabut yang
sifatnya asam, karena terbentuk akibat hujan asam yang terjadi. Paparan tersebut akan membuat
tumbuhan kehilangan nutriennya, sehingga tumbuhan akan lebih rentan terserang berbagai
ancaman lainnya, seperti cuaca.