Modul 5: More About Styling
- More about Selector: Selector Basic - Bagian 1
- Selector Basic - Bagian 2
- Combinators - Bagian 1
- Combinators - Bagian 2
- Pseudo Selector
- Formatting Text (Text and Font Styling)
- Font Styling - Bagian 1
- Font Styling - Bagian 2
- Text Styling - Bagian 1
- Text Styling - Bagian 2
- Menerapkan Font Styling pada Halaman Profil
- Menggunakan Font dari Google Font
- Menetapkan Ukuran, Ketebalan, dan Perataan Teks pada Halaman Profil
- Color
- Menetapkan Nilai Warna
- Text dan Background Color
- Box Model
- Box Element
- Box Dimensions
- Border
- Padding
- Margin
- Centering Content
- Display Roles
- Box Shadow
- Rounded Corner
- Menerapkan Box Model pada Halaman Profil
- Menetapkan ukuran pada gambar
- Menerapkan Card Style pada Elemen Article
- Menerapkan Jumbotron dan Navigasi pada Header
- Menyesuaikan Padding dan Margin pada Body dan Elemen Main
- Positioning
- Perbedaan Static Flow dan Non-Static Flow
- Normal Flow
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Floating
- Permasalahan Penerapan Float
- Clear Property
- Teknik Overflow
- Menerapkan Positioning dan Float pada Halaman Profil
- Menetapkan Float pada Content dan Aside
- Menambahkan meta tag viewport
- Media Query
- Membuat Sticky Navigation
Pada modul sebelumnya kita sudah mengenal apa itu CSS. Lalu, bagaimana ia bekerja, cara penulisan sintaksnya, hingga mengetahui konsep yang ada seperti inheritance, grouping selector, dan rule order.
Pada modul ini kita akan berkenalan lebih dalam lagi dengan CSS, kita akan mengenal berbagai macam tipe selector, formatting text, bermain dengan warna, mengenal apa itu box model, positioning, hingga penyusunan layout pada website menggunakan teknik floating.
Untuk menerapkan materi yang kita pelajar, pada modul ini juga terdapat beberapa latihan dalam menerapkan styling pada halaman profil, tentunya pada akhir modul ini kita dapat membuat halaman profil tampak seperti ini:
Ada banyak jenis selector untuk menargetkan aturan ke elemen tertentu dalam dokumen HTML. Pada modul sebelumnya, kita sudah mengetahui salah satu cara dasar dalam menggunakan selector. Sekarang, mari kita bahas lebih detail mengenai macam macam selector yang ada.
Selector Basic
Pada modul sebelumnya kita sudah mengetahui apa itu selector, dan menggunakannya. Yang kita gunakan tersebut merupakan selector basic. Sebenarnya terdapat beberapa macam dari selector basic, yakni:
- Type Selector
- Class Selector
- ID Selector
- Attribute Selector
Universal Selector
Mari kita bahas satu persatu tipe selector basic yang ada.
Type Selector
Type Selector menggunakan nama elemen sebagai target untuk diterapkannya rule. Dengan kata lain, ketika menggunakan selector ini tentu rule akan diterapkan pada seluruh elemen target yang ada pada dokumen HTML. Contohnya sebagai berikut:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* Semua elemen span */
span {
color: red;
}
</style>
</head>
<body>
<span>Ini merupakan sebuah teks yang berada pada elemen span. Seharusnya elemen ini ditampilkan dengan warna teks merah.</span>
<p>Ini merupakan sebuah teks yang berada pada elemen paragraf, teks ini tidak seharusnya tidak akan terpengaruh oleh rule.</p>
<span>Ini merupakan sebuah teks yang berada pada elemen span lainnya. Seharusnya elemen ini ditampilkan dengan warna teks merah juga.</span>
</body>
</html>Jika berkas tersebut dibuka pada browser, maka teks yang berada pada setiap elemen <span> akan berwarna merah.
Class Selector
Class selector menetapkan target elemen berdasarkan nilai dari atribut class yang diterapkan pada elemennya. Untuk penulisan selector, awali dengan tanda titik (.) kemudian lanjutkan dengan nama class-nya. Contoh:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
.red {
color: red;
}
.skyblue-bg {
background-color: skyblue;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>
</head>
<body>
<p class="red">Paragraf dengan teks berwarna merah</p>
<p class="skyblue-bg">Paragraf dengan background berwarna biru langit</p>
<p class="fancy">Paragraf dengan gaya fancy</p>
<p>Paragraf yang menampilkan teks dengan warna standar tanpa menerapkan styling</p>
</body>
</html>Jika berkas tersebut dibuka pada browser, maka akan nampak seperti ini:
Class bersifat shareable, sehingga dapat diterapkan pada banyak elemen dengan tipe elemen yang berbeda-beda. Misalkan sebuah class red dapat diterapkan pada elemen paragraf dan juga heading untuk menampilkan teks berwarna merah.
<h1 class="red">Heading dengan teks berwarna merah</h1> <p class="red">Paragraf dengan teks berwarna merah</p>
Tidak hanya itu, sebuah elemen juga mungkin memiliki banyak nilai class, sehingga kita dapat menerapkan lebih dari satu rule atau gabungan rule pada elemen target. Untuk menggunakannya, pada atribut class kita cukup tuliskan nama kelasnya dan pisahkan tiap nilai kelasnya dengan spasi.
<h1 class="red skyblue-bg">Heading dengan teks berwarna merah dan background biru langit</h1> <p class="red fancy">Paragraf dengan teks berwarna merah dan bergaya fancy</p>
Kita juga bisa menargetkan elemen secara spesifik yang memiliki sebuah class. Bagaimana jika kita ingin menerapkan gaya yang berbeda ketika menggunakan kelas bergaya keren alias fancy pada sebuah paragraf? untuk melakukannya, pada selector kita tuliskan nama elemen target diikuti dengan titik (.) kemudian nama kelasnya. Perhatikan contoh berikut:
<!doctype html>
<html lang="en">kita
<head>
<title>Judul Dokumen</title>
<style>
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
p.fancy {
text-shadow: 4px 4px 3px #00c8eb;
}
</style>
</head>
<body>
<h1 class="fancy">Heading dengan teks bergaya fancy</h1>
<p class="fancy">Paragraf dengan teks bergaya fancy</p>
</body>
</html>Jika berkas tersebut dibuka pada browser, maka gaya fancy yang diterapkan pada elemen heading dan elemen paragraf akan berbeda.
ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada elemennya. Sama seperti class, atribut id dapat diterapkan pada seluruh elemen HTML, dan kebanyakan atribut ini digunakan untuk memberikan sebuah arti pada generic element seperti <div> dan <span>. Namun atribut id ini tidak bersifat shareable, yang artinya nilai id ini harus unik dan digunakan pada satu elemen saja.
Untuk menetapkan selector dengan menggunakan id, kita gunakan tanda octothorpe (#) atau lebih familiar disebut dengan hash. Berikut contohnya:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
#special {
background-color: skyblue;
}
</style>
</head>
<body>
<div id="special">
<p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
</div>
<div>
<p>Ini merupakan konten di dalam sebuah div biasa.</p>
</div>
</body>
</html>Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:
Yang harus kita perhatikan kembali adalah id ini bersifat unik. Jika kita ingin menerapkan sebuah rule pada banyak elemen, sebaiknya gunakan atribut class, bukan dengan id.
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
#special {
background-color: skyblue;
}
</style>
</head>
<body>
<div id="special">
<p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
</div>
<div id="special"> <!-- ini merupakan contoh yang salah dalam penerapan id -->
<p>Ini merupakan konten di dalam sebuah div biasa.</p>
</div>
</body>
</html>Attribute Selector
Attribute selector merupakan cara menetapkan target elemen berdasarkan sebuah atribut yang digunakan atau bahkan bisa lebih spesifik dengan nilainya. Contohnya sebagai berikut:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* <a> element yang menerapkan href attribut */
a[href] {
color: blue;
}
/* <a> element yang menerapkan nilai pada href dengan awalan "#" */
a[href^="#"] {
background-color: gold;
}
/* <a> element yang menerapkan nilai pada href yang mengandung teks "example" */
a[href*="example"] {
background-color: silver;
}
/* <a> element yang menerapkan nilai pada href yang mengandung teks "insensitive" tidak mementingkan huruf kapital*/
a[href*="insensitive" i] {
color: cyan;
}
/* <a> element yang menerapkan nilai pada href dengan akhiran ".org" */
a[href$=".org"] {
color: red;
}
</style>
</head>
<body>
<ul>
<ul>
<li><a href="#internal">Internal link</a></li>
<li><a href="http://example.com">Example link</a></li>
<li><a href="#InSensitive">Insensitive internal link</a></li>
<li><a href="http://example.org">Example org link</a></li>
</ul>
</ul>
</body>
</html>Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:
Dari kode di atas terlihat banyak sekali kondisi yang dapat diterapkan pada atribut selector. Supaya lebih mudah untuk dipahami, mari kita rangkum dalam sebuah tabel berikut.
Syntax | Description |
[attr] | Menargetkan elemen yang menerapkan atribut attr. |
[attr=value] | Menargetkan elemen yang menerapkan atribut attr dengan nilai value. |
[attr~=value] | Menargetkan elemen yang menerapkan atribut attr dengan salah satu nilainya adalah value. |
[attr^=value] | Menargetkan elemen yang menerapkan atribut attr yang nilainya diawali dengan nilai value. |
[attr$=value] | Menargetkan elemen yang menerapkan atribut attr yang nilainya diakhiri dengan value. |
[attr*=value] | Menargetkan elemen yang menerapkan atribut attr yang nilainya mengadung value. |
Kita sudah mengetahui beberapa basic selector yang ada pada CSS. Tidak hanya sampai disitu, CSS Selector dapat berisi lebih dari satu basic selector. Di antara basic selector, kita dapat menyertakan sebuah kombinator.
Ada empat kombinator yang dapat kita gunakan yaitu: Adjacent Sibling Selector, General Sibling Selector, Child Selector, dan Descendant Selector.
Adjacent Sibling Selector (+)
Adjacent Sibling Selector menggabungkan dua buah basic selector dengan menggunakan tanda + di antara keduanya. Contohnya seperti ini:
img + p {
color: green;
}Adjacent Sibling Selector terdiri dari dua buah target elemen, namun hanya elemen kedua yang menerapkan rule selama elemen tersebut dituliskan langsung setelah elemen pertama pada berkas HTML. Selain itu kedua elemen tersebut harus berada di dalam induk elemen yang sama. Pada contoh di atas rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen gambar. Berikut contoh penerapannya:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* Rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen img */
img + p {
color: green;
}
</style>
</head>
<body>
<p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen paragraf ini.</p>
<img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">
<p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka paragraf ini seharusnya menerapkan rule dengan menampilkan teks berwarna hijau.</p>
<p>Ini merupakan paragraf ketiga. Letaknya memang setelah elemen gambar, namun tidak diletakkan persis setelahnya, sehingga rule tidak akan diterapkan pada elemen ini.</p>
</body>
</html>Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
General Sibling Selector (~)
Mirip seperti Adjacent Sibling Selector namun rules akan diterapkan pada seluruh elemen kedua yang berada setelah elemen pertama. Dengan catatan, induknya sama, walaupun posisi dari elemen kedua tidak berada tepat setelahnya. General Sibling Selector menggunakan tanda ~ untuk menetapkan elemenya. Contohnya seperti berikut:
img ~ p {
color: green;
}Rule di atas akan diterapkan pada elemen paragraf yang berada setelah elemen img selama masih di dalam induk yang sama.
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* Rule akan diterapkan pada elemen header yang berada tepat setelah elemen img */
img ~ p {
color: green;
}
</style>
</head>
<body>
<p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen paragraf ini.</p>
<img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">
<p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka paragraf ini menerapkan rule dengan menampilkan teks berwarna hijau.</p>
<div>
<p>Ini merupakan paragraf ketiga, letaknya setelah elemen gambar, namun paragraf ini dibungkus di dalam div sehingga paragraf ini tidak akan menerapkan rule styling karena tidak memiliki induk yang sama.</p>
</div>
<p>Ini merupakan paragraf empat. Letaknya memang setelah elemen gambar dan memiliki induk yang sama seperti elemen gambar, sehingga elemen ini akan menerapkan rule dengan menampilkan teks berwarna hijau.</p>
</body>
</html>Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
Child Selector menggabungkan dua buah basic selector dengan menggunakan tanda greater than (>) di antara basic selector-nya. Contohnya sebagai berikut:
div > p {
background-color: yellow;
}Pada contoh di atas, rule akan diterapkan pada seluruh elemen paragraf yang berada di dalam elemen div secara langsung. Dalam arti lain, elemen paragraf merupakan child dari elemen div bukan sebuah hanya turunannya. Untuk lebih jelas, perhatikan contoh penerapannya berikut:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* Rule akan diterapkan pada elemen paragraf yang merupakan child dari elemen div */
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraf pertama. di dalam div.</p>
<p>Paragraf kedua. di dalam div.</p>
<section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen secara langsung.</p></section>
<p>Paragraf keempat. di dalam div.</p>
</div>
<p>Paragraf kelima. di luar div.</p>
<p>Paragraf keenam. di luar div.</p>
</body>
</html>Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
Descendant Selector (space)
Descendant Selector mirip seperti child selector namun hierarkinya lebih luas, karena rule akan diterapkan pada seluruh elemen yang menjadi turunannya walaupun secara tidak langsung. Basic selector pertama yang dituliskan pada selector ini menjadi induknya dan basic selector yang kedua merupakan akan menerapkan rule. Selector ini menggunakan spasi dalam menggabungkan dua basic selector. Contohnya sebagai berikut:
div p {
background-color: yellow;
}Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang merupakan turunan dari elemen div. Berikut contoh penerapannya:
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* Rule akan diterapkan pada elemen paragraf yang merupakan turunan dari elemen div */
div p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraf pertama. di dalam div.</p>
<p>Paragraf kedua. di dalam div.</p>
<section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen secara langsung.</p></section>
<p>Paragraf keempat. di dalam div.</p>
</div>
<p>Paragraf kelima. di luar div.</p>
<p>Paragraf keenam. di luar div.</p>
</body>
</html>Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
Selain beberapa selector yang sudah kita pelajari, CSS masih memiliki dua selector lagi yang dapat kita manfaatkan untuk membantu untuk menyeleksi elemen untuk menerapkan sebuah rule, yakni Pseudo-class dan Pseudo-element.
Sebelum menjelaskan lebih detail tentang kedua selector tersebut, perlu kita ketahui pseudo selector berbeda dari selector yang sudah dibahas sebelumnya, selector ini menargetkan elemen pada bagian yang “tidak terlihat” seperti sifat pada elemen, sehingga untuk menetapkannya, kita tidak bisa menggunakan selector biasa. Salah satu contoh yang paling sering kita terapkan adalah :hover, Pseudo Selector tersebut kita gunakan untuk menetapkan rule ketika cursor diarahkan ke target elemen.
a:hover {
color: blue;
}Contoh kode di atas merupakan salah satu pseudo-class selector dimana elemen anchor akan menerapkan warna biru ketika kursor diarahkan pada elemen tersebut.
Mari kita bahas lebih detail mengenai pseudo-class selector dan pseudo-element selector.
Pseudo-class Selector
Pseudo-class merupakan sebuah class “semu” yang sebenarnya ada pada tiap elemen HTML. Pada contoh sebelumnya kita sudah mengetahui salah satu pseudo-class selector, dengan menggunakan selector ini kita dapat memilih elemen berdasarkan class yang tidak nampak pada dokumen. Kita bisa menetapkan rule hanya ketika sebuah tautan telah dikunjungi (:visited) atau ketika sebuah elemen diarahkan dengan kursor (:hover).
Untuk menggunakan pseudo-class kita gunakan tanda titik dua (:) pada basic selector kemudian diikuti dengan pseudo-class nya. Berikut contoh penerapan beberapa pseudo-class pada sebuah elemen anchor:
/* rule akan diterapkan pada sebuah tautan yang belum pernah dikunjungi */
a:link {
color: red;
}
/* rule akan diterapkan pada sebuah tautan yang sudah pernah dikunjungi */
a:visited {
color: green;
}
/* rule akan diterapkan pada sebuah tautan ketika diarahkan dengan kursor */
a:hover {
color: pink;
}
/* rule akan diterapkan pada sebuah tautan ketika ditekan */
a:active {
color:orange;
}Maka hasilnya akan seperti ini:
Tidak hanya yang dicontohkan di atas, ada banyak sekali class semu yang menjadi standar pseudo-classes dalam CSS. Kita pun bisa melihat indeks standar yang ada pada pseudo-class pada tautan resmi Mozilla berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Pseudo-elemen Selector
Sama seperti pseudo-class, pseudo-elemen merupakan sebuah elemen “semu” yang sebenarnya ada tetapi tidak tampak secara tertulis pada berkas HTML. Selector ini biasa digunakan ketika kita ingin menambahkan sebuah konten tepat sebelum dan setelah sebuah elemen paragraf. Alhasil kita tidak perlu menuliskan struktur elemen tersebut pada berkas HTML. Cukup manfaatkan pseudo-elemen ::before dan ::after kemudian tuliskan konten tersebut cukup pada CSS. Contohnya kita ingin menambahkan tanda kutip sebelum dan sesudah elemen blockquote. Seperti ini cara menuliskannya:
blockquote::before,
blockquote::after {
content: '"';
font-size: 24px;
font-style: italic;
font-weight: bold;
}Dengan menuliskan rule tersebut, elemen <blockquote> memiliki tanda kutip pada awal dan akhir elemennya.
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eius error explicabo ipsum molestiae necessitatibus nesciunt possimus reprehenderit sed voluptates. Aliquam aspernatur autem est nobis officia praesentium quas recusandae rem.</blockquote>
Tampilan yang dihasilkan:
Untuk menggunakan pseudo-elemen kita gunakan dua buah tanda titik dua (::) kemudian diikuti dengan pseudo-elemen nya. Sebenarnya kita bisa menggunakan satu buah tanda tanda titik dua (:) namun kita perlu membedakannya dengan pseudo-class. Karena itulah baiknya ketika menggunakan pseudo-elemen, gunakanlah dua buah titik dua (::).
Pseudo-element tidak hanya ::before dan ::after. Dengan pseudo-elemen kita juga dapat menentukan rule pada awal karakter konten elemen.
<!doctype html>
<html lang="en">
<head>
<title>Judul Dokumen</title>
<style>
/* Rule styling akan diterapkan pada karakter pertama disebuah paragraf */
p::first-letter {
font-size: 32px;
font-weight: bold;
color: saddlebrown;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt, dicta laudantium quae quam sequi
soluta vitae! A, architecto beatae, consequuntur et eveniet fuga laudantium molestias praesentium temporibus, unde
velit.</p>
</body>
</html>Tampilan yang dihasilkan:
Untuk mengetahui lebih lengkap mengenai apa saja pseudo-element yang dapat kita manfaatkan, kita bisa melihat dokumentasi resmi yang diberikan Mozilla pada tautan berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Setelah kita tahu bagaimana menerapkan CSS pada berkas HTML, mengetahui struktur penulisan CSS, dan menggunakan selector sesuai dengan kebutuhan, apa berikutnya? Kita akan fokus mempelajari secara detail bagaimana menerapkan styling pada sebuah teks.
Perlu kita ketahui, CSS memisahkan styling untuk font dan teks. Kita harus tahu kapan seharusnya menetapkan styling pada font atau menetapkannya pada teks. Mengapa kedua hal tersebut dipisah? Padahal teks dan font merupakan satu kesatuan, di mana setiap teks pasti menggunakan font untuk menampilkannya, bukan? Sebabnya, CSS sendiri mempunyai properti untuk kedua hal tersebut secara masing-masing
Jika kita ingin menetapkan styling pada tampilan teks itu sendiri, gunakanlah properti font. Contohnya properti font dapat mengatur tipe font, ukuran, ketebalan, dan lainnya. Sedangkan properti teks digunakan untuk mendukung hal lainnya dalam menampilkan teks seperti, menetapkan text alignment, dekorasi, spacing, dan masih banyak lagi. Karena dua hal ini dipisah, mari kita bahas satu persatu.
Ketika kita membuat sebuah dokumen teks, termasuk dokumen cetak, langkah awal kita biasanya adalah menentukan jenis font yang akan digunakan. Pada pengembangan website pun demikian. Dalam CSS, font ditentukan dengan menggunakan beberapa paket properti font. Kita bisa atur tipe font, ukuran, ketebalan, dan gaya. Berikut ini merupakan properti font yang akan kita pelajari antara lain:
- font-family : Menetapkan jenis font yang akan diterapkan pada target.
- font-size : Menentukan ukuran pada teks.
- font-weight : Menentukan ketebalan pada teks.
- font-style : Menetapkan styling yang diterapkan pada teks.
- font-variant : Menentukan teks untuk menggunakan gaya small caps (huruf kapital kecil).
font : Shorthand dari properti font yang ada.
Mari kita bahas properti tersebut satu persatu secara mendetail.
font-family
Pada modul pengenalan CSS kita sudah mencoba menggunakan font properties ini untuk mengubah standar font yang ditampilkan pada browser dengan menggunakan font-family pada elemen body.
body {
font-family: sans-serif;
}Sehingga menghasilkan tampilan:
Pada rule tersebut kita mengubah standar font yang digunakan browser dengan font ‘sans-serif’. Sebenarnya untuk nilai dari properti ini dapat lebih dari satu (dikenal sebagai font stack). Tujuannya adalah sebagai fallback jika terjadi kegagalan dalam menggunakan font yang kita gunakan.
Untuk menuliskan lebih dari satu nilai font, berikut aturan yang harus kita perhatikan:
- Seluruh nilai font yang bukan merupakan generic font families, yang mana harus dituliskan secara kapital. Contohnya “Arial” bukan dituliskan “arial”.
- Gunakan tanda koma (,) untuk memisahkan antara nilai font yang digunakan.
Selalu tanda kutip (“) untuk membungkus nilai font yang memiliki spasi pada namanya (Contohnya “Open Sans”).
Mungkin kita bertanya-tanya mengapa perlu memberikan lebih dari satu nilai pada font-family? Hal tersebut penting karena tidak semua browser mendukung semua jenis font. Memberikan lebih dari satu nilai font dapat menawarkan alternatif tampilan font pada browser. Terutama jika font utama yang diterapkan tidak didukung oleh browser yang digunakan.
Bagaimana urutan prioritasnya? Mulai dari jenis font yang pertama dituliskan. Jika font pertama didukung oleh browser maka browser akan menggunakannya, jika tidak lantas browser akan memeriksa nilai font yang kedua dan menggunakannya (jika didukung), demikian dan seterusnya.
Pastikan untuk menggunakan generic font families pada akhir nilai properti font-family, karena nilai ini dipastikan didukung oleh seluruh browser saat ini. Lantas apa saja nilai dari generic font families ini? Berikut nilai-nilai generic font families yang dapat kita gunakan untuk fallback mechanism:
- serif : jenis font yang memiliki runcing pada garis akhir karakternya. Times New Roman merupakan salah satu jenis serif font.
- sans-serif : jenis font yang tidak meruncing pada garis akhir karakternya. Contohnya “Open Sans”, “Fira Sans” dan lainnya.
- monospace : jenis font yang memiliki nilai lebar tiap karakternya sama. Consolas merupakan salah satu jenisnya.
- cursive: jenis font yang tampak seperti handwriting atau hasil tulisan tangan.
- fantasy : jenis font yang merepresentasikan karakteristik yang menyenangkan.
- system-ui : jika menerapkan nilai ini maka font yang diterapkan akan sama seperti font yang digunakan pada sistem operasi kita.
- math : jenis font yang digunakan untuk penulisan rumus-rumus matematika.
- emoji : jenis font yang digunakan untuk menampilkan emoji.
- fangsong : jenis font yang menampilkan gaya penulisan Chinese.
font-size
Mengubah nilai font pada sebuah dokumen adalah hal yang sangat wajar terjadi, begitu pula pada website. Untuk menetapkan ukuran font kita kita perlu menerapkan properti font-size. Kita bisa menetapkan nilai dari properti ini dengan menuliskan langsung nilai dan satuannya. Contohnya seperti ini:
h1 {
font-size: 1.5em;
}Pastikan bahwa saat menuliskan nilai dan satuannya, tidak ada jarak (spasi).
/* Rule tidak akan diterapkan pada target karena kesalahan penulisan nilai properti */
h1 {
font-size: 1.5 em;
}Satuan dalam menetapkan ukuran font terdapat dua jenis. Yang pertama relative, yakni satuan yang nilainya tergantung pada sesuatu hal, contohnya ukuran dari viewport, induk elemen ataupun ukuran teks standar. Dan yang kedua adalah absolute, yakni satuan yang nilainya telah ditentukan atau digunakan dalam dunia nyata.
Berikut merupakan nilai satuan yang dapat kita manfaatkan dalam menetapkan ukuran font beserta fungsinya:
Relative unit
Satuan | Relative to | Fungsi |
em | Font size | Satuan relatif terhadap ukuran font yang sedang digunakan pada elemen (contohnya, 2em berarti 2 kali lebih besar dari ukuran font seharusnya). |
ex | Font height | Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang sekali digunakan |
rem | Font size | Mirip seperti em, tetapi rem merupakan satuan relatif terhadap ukuran font dari root element. |
ch | Font width | Satuan relatif terhadap lebar dari karakter “0” nol. |
vw | Viewport width | Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak didukung pada browser IE8 ke bawah. |
vh | Viewport height | Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak didukung pada browser IE8 ke bawah. |
Absolute unit
Satuan | Fungsi |
px | Menetapkan nilai font berdasarkan ukuran pixel |
pt | Menetapkan nilai font berdasarkan points (1/72 inch di CSS2.1) |
pc | Menetapkan nilai font berdasarkan picas (1 pica = 12 point) |
mm | Menetapkan nilai font berdasarkan millimeters |
cm | Menetapkan nilai font berdasarkan centimeters |
in | Menetapkan nilai font berdasarkan inches |
Selain dengan menetapkan nilai dan satuannya secara langsung, untuk mengatur ukuran font kita juga bisa gunakan nilai persentase.
body {
font-size: 16px;
}
h1 {
font-size: 150%; /* 150% dari 16 = 24px */
}Pada contoh ini ukuran font dari elemen <h1> seharusnya memiliki ukuran 16px karena mewarisi dari induk elemennya (body). Tetapi di bawahnya terdapat rule yang menargetkan secara spesifik untuk elemen <h1> untuk menerapkan ukuran font sebesar 150% dari ukuran induknya. Maka elemen <h1> akan nampak 50% lebih besar dari elemen lain yang ada di dalam <body>.
Dan yang terakhir kita juga bisa menentukan ukuran font dengan menuliskan kata kunci secara spesifik yang tersedia pada CSS. Kata kunci tersebut adalah: xx-small, x-small, small, medium, large, x-large, dan xx-large.
Kata kunci tersebut tidak ada kaitannya dengan pengukuran tertentu (bukan ukuran yang absolute) tetapi nilainya diubah secara konsisten satu sama lain.
Pada gambar di atas kita bisa lihat bahwa standarnya browser menampilkan teks dengan nilai medium. Properti font-size dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.
Setelah mengenal font families dan font size, selanjutnya ada juga font-weight yang digunakan untuk mengatur ketebalan dari font yang ditampilkan. Nilai dari properti ini dapat ditentukan dengan menggunakan numeric values (100 sampai 900) atau dengan menggunakan descriptive terms (normal, bold, bolder, dan lighter).
Properti font-weight dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.
font-style
Properti selanjutnya adalah font-style. Properti ini digunakan untuk menentukan postur dari teks yang ditampilkan, apakah bentuknya vertikal (normal) atau miring (italic dan oblique).
Italic dan oblique keduanya menampilkan teks yang miring. Perbedaanya adalah italic menerapkan tipe miring (italic font version) dari suatu font sedangkan oblique adalah font normal yang hanya dibuat miring.
Properti font-style dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.
font-variant
Kita yang terbiasa dengan aplikasi document editor seperti Microsoft Word tentu tahu atau sudah mencoba fitur small caps. Fitur ini dapat membuat teks menjadi kapital tetapi dituliskan secara kecil dan merapat, seperti ini:
Untuk membuat tulisan seperti gambar di atas, kita bisa memanfaatkan properti font-variant dengan nilai small-caps pada propertinya.
Properti font-variant dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.
Shorthand
Menspesifikasikan masing-masing nilai properti font akan menghasilkan banyak sekali kode repetitif. Dengan begitu CSS memberikan suatu “jalan pintas” untuk menuliskan properti-properti tersebut ke dalam satu properti yaitu font.
Dengan menggunakan properti font kita dapat menuliskan beberapa properti hanya dalam satu properti pada satu rule.
Nilai dari properti font merupakan nilai dari seluruh properti dari font yang sudah kita bahas. Tiap nilai dipisahkan menggunakan spasi. Pada properti ini urutan nilai merupakan hal yang penting, sehingga jangan sampai salah urutan dalam menuliskannya. Kesalahan penulisan atau urutan menyebabkan seluruh struktur rule menjadi tidak valid.
Walaupun begitu kita bisa tidak menuliskan seluruh nilai properti yang ada, tetapi nilai dari properti font-size dan font-family wajib ada ketika menggunakan properti ini. Berikut contohnya penulisan minimal ketika kita menggunakan properti font:
p {
font: 1em sans-serif;
}Pembahasan sebelumnya kita terfokus pada formating bentuk karakter yang ditampilkan dengan menggunakan beberapa properti font yang ada. Sekarang kita akan mempelajari bagaimana seorang developer bisa memberikan formatting pada keseluruhan teks yang ada pada baris paragraf, seperti menetapkan inden, jarak antar baris, kata dan huruf, dan sebagainya. Maka dari itu, mari kita bahas satu persatu.
Line Height
Properti line-height digunakan untuk mengatur jarak minimal dari garis dasar ke garis dasar dalam menampilkannya teks pada halaman. Jika kita terbiasa dengan software dokumen editor seperti Microsoft Word, properti ini mirip dengan fungsi line height.
Pada penjelasan di atas disebutkan “minimal”, karena jika terdapat sebuah karakter yang tinggi atau besar dalam sebuah baris, maka tinggi dari baris pun akan menyesuaikan agar jarak tetap mengakomodirnya.
Berikut merupakan contoh tiga cara berbeda dalam menerapkan tinggi baris dua kali lebih tinggi dari ukuran font:
p {
line-height: 2;
}
p {
line-height: 200%;
}
p {
line-height: 2em;
}Cara pertama merupakan cara yang paling mudah digunakan, karena kita dapat menentukan nilai hanya dengan satu angka, di mana angka tersebut nantinya dikalikan dengan nilai font-size sebelum diterapkan pada nilai properti line-height. Contohnya, ukuran font standar pada paragraf adalah 16 pixel. ,Kita definisikan properti line-height dengan nilai 2, maka nilai properti line-height seharusnya adalah 16 pixel * 2 = 32 pixel (dua kali lebih besar dari ukuran font).
Properti line-height dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya.
Text Indent
Dalam membuat sebuah dokumen tidak jarang kita membutuhkan jarak/lekuk di awal paragraf. Hal tersebut dapat dilakukan pada website dengan menerapkan properti text-indent. Kita dapat menentukan nilai properti ini melalui perhitungan panjang dalam px, em, dan in atau bisa menggunakan nilai persentase (%). Nilai persentase dihitung berdasarkan lebar dari induk elemen. Berikut merupakan contoh penggunaannya:
p#first {
text-indent: 2em;
}
p#second {
text-indent: 25%;
}
p#third {
text-indent: -35px;
}Jika elemen menerapkan rule tersebut, akan tampak seperti ini:
Pada contoh ke tiga kita bisa melihat bahwa pada nilai properti ini dapat diberikan nilai negatif. Jika kita menggunakannya, maka baris pertama pada paragraf akan keluar dari batas elemen yang menampungnya (biasa disebut hanging indent).
Perlu diingat kembali, properti ini hanya berpengaruh pada awal baris paragraf. Jika kita ingin menetapkannya untuk seluruh baris kita dapat gunakan margin atau padding, keduanya akan dibahas pada materi box model.
Text Alignment
Kita bisa mengatur text alignment pada website seperti kita melakukannya pada aplikasi Microsoft Word dengan menggunakan properti text-align. Untuk standarnya, properti ini bernilai left atau biasa kita sebut rata kiri. Tetapi jika kita menerapkan atribut language dengan nilai bahasa yang arah bacanya berlawanan, maka standarnya akan menggunakan right atau rata kanan.
Berikut ini nilai yang dapat digunakan pada properti text-align:
Nilai Properti | Fungsi |
text-align: left | Membuat perataan teks pada ujung kiri |
text-align: right | Membuat perataan teks pada ujung kanan |
text-align: center | Membuat perataan teks secara menengah |
text-align: justify | Membuat perataan teks yang setara pada ujung kiri dan kanannya |
Bagaimana? Pasti kita sudah familiar dengan nilai-nilai tersebut? Berikut contoh penggunaan dari properti text-align:
p#first {
text-align: left;
}
p#second {
text-align: right;
}
p#third {
text-align: center;
}
p#fourth {
text-align: justify;
}Jika elemen menerapkan rule tersebut, akan tampak seperti ini:
Properti ini paling populer digunakan ketika kita ingin membuat garis bawah atau underline pada teks. Tapi tak hanya itu, ada beberapa nilai lain yang dapat kita gunakan untuk properti ini. Detailnya sebagai berikut:
Nilai properti | Fungsi |
text-decoration: underline | Memberikan garis bawah (underline) pada teks |
text-decoration: overline | Memberikan garis atas (overline) pada teks |
text-decoration: line-through | Memberikan efek tulisan dicoret (strikethrough) |
text-decoration: none | Menghilangkan dekorasi teks yang ada pada elemen |
Dengan menggunakan text-decoration, kita dapat menghilangkan efek underline pada link yang ditampilkan dengan memberikan nilai text-decoration: none pada elemen <a>.
Text Transform
Pasti kita pernah mencoba fitur pada document editor yang dapat mengubah kapitalisasi pada teks, bukan? Fitur ini sangat membantu di kala kita ingin mengubah kapitalisasi tanpa harus menuliskan kembali teksnya. Pada CSS juga terdapat fitur serupa, yaitu dengan menggunakan properti text-transform. Ketika kita menerapkan properti text-transform pada elemen teks, maka kapitalisasi akan berubah ketika halaman di-render tanpa harus mengubahnya pada dokumen HTML.
Properti ini dapat berisikan nilai sebagai berikut:
Nilai Properti | Fungsi |
text-transform: none | Teks yang ditampilkan sama seperti yang dituliskan |
text-transform: capitalize | Membuat huruf pertama besar pada tiap katanya |
text-transform: lowercase | Membuat seluruh teks menggunakan huruf kecil |
Text-transform: uppercase | Membuat seluruh teks menggunakan huruf besar |
Seperti ini contoh tampilan ketika menerapkan properti dan nilai di atas
Word and Letter Spacing
Properti selanjutnya yang bisa kita gunakan untuk formating teks adalah letter-spacing dan word-spacing. Seperti namanya, properti ini digunakan untuk mengatur spasi atau jarak pada teks. Properti letter-spacing digunakan untuk mengatur jarak antar huruf, sedangkan word-spacing digunakan untuk mengatur jarak antar kata. Berikut contohnya:
p#letter {
letter-spacing: 4px;
}
p#word {
word-spacing: 1.5em;
}Berikut contoh tampilan jika menerapkan rule di atas:
Kedua elemen ini dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya.
Text Shadow
Memberikan bayangan pada teks telah menjadi hal yang umum digunakan meskipun tidak memiliki dukungan di semua browser. Pada CSS untuk membuat bayangan pada teks (atau biasa disebut drop shadow) kita dapat gunakan properti text-shadow.
Nilai dari properti ini cukup rumit karena membutuhkan tiga buat nilai dan satu buah nilai warna sehingga membutuhkan empat nilai dalam satu properti untuk menentukan bayangannya.
- Nilai pertama : menunjukkan seberapa jauh ke kiri atau kanan (horizontal) bayangan harus ditampakkan.
- Nilai kedua : menunjukkan jarak ke atas atau ke bawah (vertical) bayangan harus ditampakkan.
- Nilai Ketiga (opsional) : menentukan tingkat keburaman yang harus diterapkan pada bayangan.
Nilai Keempat : menentukan warna yang digunakan pada bayangan.
Berikut ini contoh penggunaan dari properti drop shadow:
p#one {
text-shadow: 1px 1px 0px #000000;
background-color: #eeeeee;
color: #666666;
}
p#two {
text-shadow: 1px 1px 3px #666666;
background-color: #dddddd;
color: #666666;
}
p#three {
text-shadow: 2px 2px 7px #111111;
background-color: #cccccc;
color: #ffffff;
}
p#four {
text-shadow: -1px -1px #666666;
background-color: #cccccc;
color: #bbbbbb;
}Berikut contoh tampilan jika menerapkan rule di atas:
Sejauh ini kita sudah mengenal banyak sekali properti yang dapat mengatur formatting text, kita juga sudah mengetahui bahwa CSS memisahkan properti styling untuk font dan text. Nah, sekarang saatnya kita terapkan beberapa properti yang sudah kita pelajari pada halaman profil yang sudah kita buat.
Pada latihan kali ini juga, kita akan belajar bagaimana menerapkan font yang bersumber dari Google Font, sehingga kita bisa menampilkan tipe font selain hanya generic font families.
Kita sudah mengetahui bagaimana cara mengubah font pada website dan juga mengetahui tipe font standar yang tersedia pada browser. Berbicara tentang tipe font, ketika kita menjelajah beberapa website yang ada di internet tidak jarang kita menemukan website yang menggunakan font yang unik atau font yang tidak dimiliki pada komputer kita. Lantas bagaimana cara font tersebut dapat ditampilkan?
Untuk hal ini, CSS memiliki fitur yang digunakan untuk memasukan font external ke dalam CSS, yakni menggunakan @font-face. Berikut contoh penulisan @font-face pada CSS:
@font-face {
font-family: "Dicoding Font";
src: url('FILE-FONT.TTF');
}Kode tersebut berfungsi untuk mendefinisikan custom font, dengan nama “Dicoding Font”. Ketika mendefinisikan custom font, kita juga membutuhkan berkas font, bisa dilihat berkas font pada contoh adalah ‘FILE-FONT.TTF”.
Setelah mendefinisikan font-face, maka font-family dengan nama “Dicoding Font” siap diterapkan pada elemen HTML.
p {
font-family: "Dicoding Font";
}Pada kelas ini kita tidak akan membahas secara detail mengenai @font-face. Jika ingin mempelajarinya, Anda bisa mengunjungi dokumentasi Mozilla pada tautan berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face. Mengapa kita tak mempelajari hal ini secara detail? Karena sekarang terdapat cara yang lebih mudah dan sering digunakan oleh web developer, yakni menggunakan font dari Google Font.
Google Font, layanan Google untuk memudahkan kita mendesain font pada website. Google Font banyak menyediakan tipe font gratis yang dapat kita manfaatkan. Saat materi ini ditulis, Google Font memiliki lebih dari 960 jenis font.
Perlu jadi catatan bahwa Google Font hanya dapat digunakan ketika komputer dalam keadaan online. Jika kita sedang mengembangkan website dalam keadaan offline, sebaiknya gunakan pendekatan @font-face.
Untuk menggunakan font yang disediakan Google Font, langkah awal yaitu mengunjungi website google font pada tautan berikut: https://fonts.google.com/
Saat ini kita akan mencari font dengan nama “Quicksand.” Lakukan pencarian font tersebut pada search bar yang tersedia pada website tersebut.
Jika sudah menemukan font yang dicari, kemudian pilih dan kita akan diarahkan ke halaman berikut.
Tekan tombol “+ Select this style” untuk memilih font dengan ukuran yang diinginkan. Di sini kita contohkan dengan memilih font ukuran Regular 400. Ketika menekan tombol tersebut, Google Font akan menyimpannya sebagai selected families (pilih tombol pada pojok kanan atas untuk melihat selected families).
Kita juga bisa memilih ketebalan fontnya. Yuk, pilih juga versi tebalnya (Bold 700) dan masukan kembali ke dalam collection.
Setelah selesai memilih font yang dicari, maka tampilan dari selected families akan tampak seperti ini:
Selanjutnya klik pada tab embed dan pilih tulisan @import. Salin kode @import beserta URL-nya.
| Teks yang disalin |
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap'); |
Kemudian buka kembali berkas style.css pada project kita dan sisipkan kode tersebut pada baris paling awal. Sehingga keseluruhan kode pada berkas style.css seperti ini:
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');
body {
font-family: sans-serif;
}
h2, h3 {
color: #00a2c6
}
footer {
padding: 20px;
color: white;
background-color: #00a2c6
}Untuk menerapkan font-nya, kita ubah nilai properti font-family pada body dengan menambahkan nilai ‘Quicksand’ sebelum generic font sans-serif.
body {
font-family: 'Quicksand', sans-serif;
}Dengan begitu tampilan font pada halaman website akan menggunakan Quicksand.
Bagaimana? Mudah kan? Sebenarnya google font menggunakan teknik yang sama, yakni menggunakan @font-face. Jika kita coba buka URL yang ada pada script @import tadi pada browser, hasilnya adalah sebuah kode CSS di mana terdapat banyak @font-face dituliskan disana.
Dengan fungsi @import pada CSS, seolah-olah kode tersebut dituliskan pada berkas style.css yang kita buat.
Setelah menentukan tipe font baru dalam menampilkan teks, selanjutnya kita percantik lagi teksnya dengan mengatur ukuran, ketebalan, dan alignment pada teks. Jika Anda sudah menutup berkas style.css pada text editor, silakan buka kembali dan ikuti langkah - langkah berikut.
Langkah pertama kita atur ukuran font menjadi 18px pada teks yang berada di elemen <a> yang merupakan turunan dari elemen <nav>.
nav a {
font-size: 18px;
}Kemudian kita atur juga ketebalan teksnya menjadi 400 dan hilangkan garis bawah pada elemen tersebut, sehingga block rule-nya menjadi seperti ini:
nav a {
font-size: 18px;
font-weight: 400;
text-decoration: none;
}Sehingga jika kita preview pada browser, maka ukuran teks pada navigasi akan tampak lebih besar dan tidak memiliki garis bawah.
Kita bisa memberikan efek tebal pada teks ketika salah satu item navigasi diarahkan menggunakan kursor. Tambahkan rule baru dengan memanfaatkan pseudo-class :hover pada elemen <a>.
nav a:hover {
font-weight: bold;
}Sehingga tampilan menjadi seperti ini:
Selanjutnya kita akan membuat teks pada header aside menjadi rata tengah dengan menggunakan properti text-align. Sebelum itu, untuk memudahkan menetapkan selector, berikan attribute class pada elemen <article> yang berada di dalam elemen <aside> dengan nilai profile.
<aside>
<article class="profile">
<header>
.....
</header>
<section>
.....
</section>
</article>
</aside>Setelah itu kita dapat menentukan selector dengan mudah untuk mengatur <header> pada elemen <article> tersebut:
.profile header {
text-align: center;
}Maka teks pada header aside akan menjadi rata tengah.
Terakhir, kita buat juga teks pada footer menjadi rata tengah dan tebal dengan menambahkan properti text-align: center; dan font-weight: bold; pada footer selector:
footer {
padding: 20px;
color: white;
background-color: #00a2c6;
text-align: center;
font-weight: bold;
}Sehingga tampilan footer akan tampak seperti ini:
Warna memberikan kesan hidup pada sebuah website, Jika kita kembali pada tahun 1993 saat website hanya menampilkan background abu dengan teks hitam, tentu membosankan sekali, bukan?
Yahoo Search Engine pada tahun 1994, Sumber: https://www.webdesignmuseum.org/
Pada saat itu memang belum tersedia sebuah browser yang dapat mengontrol warna. Sampai akhirnya Netscape Navigator hadir dan memungkinkan hal tersebut, walaupun belum sempurna layaknya saat ini. Syukurlah pada saat ini kita bisa menggunakan properti - properti yang ada pada CSS untuk mengatur warna pada teks dan background. Terlebih, seluruh browser saat ini sudah mendukung styling menggunakan CSS sehingga kita tidak perlu lagi memikirkan kompatibilitasnya.
Pembahasan kali ini kita akan fokus pada warna pada CSS. Anda akan dikenalkan pada properti yang digunakan untuk mengatur warna teks dan background. Tapi sebelum itu, mari kita pelajari dahulu bagaimana cara menetapkan sebuah warna pada CSS.
Setiap warna pada layar komputer kita terdiri dari campuran warna merah, hijau, dan biru. Layar komputer dibuat dari ribuan kotak kecil yang biasa disebut pixel. Ketika layar monitor tidak menyala maka pixel pun tidak akan menyala. Ketika layar monitor menyala, tiap pixel dapat menghasilkan warna yang berbeda sehingga dapat menampilkan gambar.
Di dalam pixel terdapat tiga buah lampu kecil berwarna merah, hijau, dan biru. Ribuan warna dapat dihasilkan dari kombinasi tiga warna tersebut.
Ketika ingin menetapkan warna, kita tidak perlu menghafal kombinasi dari ketiga warna tersebut. Banyak pemilih warna yang dapat membantu kita dalam menetapkan warna yang diinginkan. Contohnya seperti color picker yang ada pada Photoshop, GIMP atau Gravit Designer.
Kita bisa melihat nilai RGB yang melalui color picker. Lantas bagaimana jika kita tidak memiliki aplikasi design seperti yang telah disebutkan tadi? Tenang, sekarang color picker banyak tersedia online, bahkan ketika kita menuliskan “color picker” pada Google Search, tools tersebut tersedia pada hasil pencariannya.
Untuk menetapkan nilai warna pada CSS kita dapat menggunakan Numeric Value dan Predefined Color Name. Apa sih maksud kedua hal tersebut? Mari kita bahas satu persatu yah.
Numeric Value
Cara yang paling banyak digunakan dalam menetapkan warna adalah dengan menggunakan numeric value. Apa pasal? Dengan menggunakannya kita dapat menentukan warna yang kita inginkan dengan tepat. Terlebih dengan bantuan color picker maka kita tak perlu repot memahami dan mencari nilai kode warna secara manual.
Berikut contoh penulisan nilai warna pada CSS dengan numeric value:
/* Warna hijau menggunakan format RGB */ color: rgb(78,231,23); /* Warna hijau Menggunakan format HEX */ color: #4ee717; /* Warna hijau menggunakan format HSL (hanya di CSS3)*/ color: hsl(104, 82%, 50%);
Kode tersebut merupakan nilai warna hijau yang dituliskan dalam beberapa format. Dari kode tersebut kita tahu tidak hanya format RGB yang dapat digunakan dalam menetapkan warna. Selain RGB ada juga format Hex dan HSL (Hue, Saturation, Light).
Predefined Color Name
Menentukan warna bisa juga dilakukan selain dengan menggunakan format angka. Kita bisa menggunakan sebuah kata seperti blue, yellow, red dan lainnya
color: black; color: white; color: blue;
Dengan menggunakan kata tentu kita dapat lebih mudah dan cepat dalam menentukan warna, tetapi mungkin hanya warna dasar yang sudah kita hafal. Faktanya, varian warna ada banyak jumlahnya! Saat ini hampir seluruh browser saat ini mendukung 140 nama warna, wow! Kita dapat melihat apa saja warna yang tersedia pada tautan berikut: https://www.w3schools.com/colors/colors_names.asp.
Opacity
CSS3 mengenalkan properti opacity yang dapat menspesifikasikan nilai transparan pada elemen HTML. Nilai dari properti opacity merupakan angka desimal antara 0.0 hingga 1.0, jika kita menetapkan nilainya 0.5 itu berarti 50% transparan.
div#opacity {
background-color: red;
opacity: 0.5;
}Jika elemen div menerapkan rule tersebut, maka akan tampak seperti ini:
Selain pada elemen, menetapkan opacity juga dapat kita lakukan pada warna. Untuk melakukannya, gunakan format rgba dan hsla, dimana format ini merupakan format rgb ditambahkan nilai alpha.
p {
color: rgba(78,231,23, 0.5);
color: hsla(104, 82%, 50%, 0.5);
}
Pada modul pengenalan CSS kita sudah mencoba bagaimana mudahnya mengganti warna pada teks yang ditampilkan. Sejujurnya tidak ada lagi yang perlu kita bahas disini. Kita dapat dengan mudahnya mengganti warna teks dengan properti color.
Nilai dari properti color dapat berupa predefined color name atau sebuah numeric value dengan menggunakan RGB, RGBA, HEX, HSL, ataupun HSLA. Berikut sebagai contoh, seluruh elemen <p> akan diberi warna abu-abu (gray) dengan menggunakan beberapa cara yang ada:
p { color: gray; }
p { color: #666666; }
p { color: #666; }
p { color: rgb(102,102,102); }Properti color dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya. Jadi kita bisa mengubah warna teks pada seluruh dokumen HTML dengan menerapkan properti color pada elemen <body>, seperti ini:
body {
color: steelblue;
}Sehingga tampak seperti ini:
Background Color
CSS memperlakukan setiap elemen HTML seperti berada pada sebuah kotak (kita akan tahu lebih tentang ini pada pembahasan box model). Properti background-color dapat mengatur warna untuk background dari kotak tersebut.
Sama seperti text color, kita dapat menspesifikasikan warna yang dipilih dengan numeric values atau dengan predefined color name. Properti background-color akan bernilai transparan jika tidak kita tetapkan.
Kebanyakan browser menetapkan nilai putih sebagai standar untuk nilai background-color, tetapi nilai standar tersebut dapat pengguna ubah melalui pengaturan browser-nya. Maka untuk memastikan website kita memiliki tampilan background putih, kita dapat terapkan nilai background-color: white; pada elemen <body>.
Biasanya kita juga menerapkan padding saat menetapkan background-color guna memberi jarak antara konten dan pinggiran kotak elemen.
<!doctype html>
<html lang="en">
<head>
<style>
body {
font-family: sans-serif;
}
div#content {
background-color: rgb(200, 200, 200);
padding: 20px 15px;
}
#content > h2 {
background-color: #4c5450;
padding: 15px;
color: white;
}
#content > h3 {
background-color: #60d0a8;
padding: 15px;
color: white;
}
#content > p {
background-color: hsl(56, 62%, 85%);
padding: 20px;
}
</style>
</head>
<body>
<div id="content">
<h2>Lorem Ipsum</h2>
<h3>Dolor sit amet lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit, veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p>
</div>
</body>
</html>Jika berkas di atas dijalankan pada browser, maka hasilnya akan tampak seperti ini:
Pada pembahasan background-color disinggung bahwa setiap elemen ditampilkan seperti sebuah boxes atau kotak. Box model merupakan salah satu konsep dari CSS. Setiap elemen yang dibuat pada HTML akan menciptakan sebuah kotak untuk menampung kontennya. Layaknya bentuk kotak pada umumnya, pasti terdapat nilai seperti lebar, tinggi, padding (tebal lapisan), border (batas), dan juga jarak. Pada CSS nilai - nilai tersebut dapat kita atur.
Kita mungkin sudah sedikit paham bagaimana konsep box model ini bekerja dengan mengikuti latihan sebelumnya. Di sini kita akan membahas lebih lanjut mengenai properti apa saja yang dapat memanipulasi boxes tersebut. Tapi sebelum itu, kita pahami lebih tentang konsep box pada elemen HTML agar kita dapat gambaran lebih tentang hal tersebut.
Website dicoding.com dengan menerapkan rule * {border: 1px solid red}
Seperti yang kita lihat pada gambar di atas, setiap elemen pada HTML baik itu block-level atau inline elemen, akan menghasilkan sebuah kotak elemen. Perhatikan ilustrasi berikut agar lebih jelasnya:
- Content : Merupakan sebuah inti dari kotak elemen yang merupakan konten dari elemen itu sendiri
- Padding : Area yang menjadi jarak antara border elemen dengan konten yang ditampilkan. Ketika kita menerapkan background-color maka warna tersebut diterapkan pada area padding. Penerapan ukuran padding pada elemen merupakan opsional.
- Border : Merupakan garis yang mencakup konten beserta padding. Penerapan border pada elemen merupakan opsional.
- Margin : Berbeda dengan padding, margin merupakan area jarak diluar dari border. Pada ilustrasi diatas, margin ditunjukkan dengan warna merah muda namun pada aslinya margin selalu transparan dan penerapan margin pada elemen merupakan opsional.
Edge of element : merupakan batas dari suatu elemen. Di dalamnya terdapat margin, border, padding dan konten. Pada ilustrasi di atas, batas elemen ditunjukkan dengan garis putus tetapi pada aslinya batas elemen selalu tidak terlihat.
19. Box DimensionsSecara standar sebuah box yang dihasilkan tiap elemen selalu cukup untuk menampung konten. Tetapi kita dapat mengatur nilai dimensi dari box tersebut dengan properti width dan height.
Cara yang paling banyak digunakan dalam menentukan dimensi kotak adalah dengan menggunakan pixel, persentase, atau ems. Secara tradisional, pixel merupakan cara yang paling populer karena kita dapat merancang dan mengontrol ukuran secara akurat.
Berbeda ketika kita menggunakan persentase, ukuran kotak akan relative atau menyesuaikan dari ukuran lain, seperti ukuran jendela browser atau ukuran induk yang menaunginya. Sedangkan ketika menggunakan ems, nilai dimensi kotak akan menyesuaikan berdasarkan ukuran teks yang ditampilkan pada konten elemen tersebut.
Pada saat ini banyak developer mulai merancang menggunakan persentase dan ems untuk menetapkan ukuran box agar dapat menyesuaikan dengan berbagai macam ukuran layar.
<!doctype html> <html lang="en"> <head> <style> .box { height: 300px; width: 300px; background-color: #11C5C6; } p { height: 75%; width: 75%; background-color: #FBDD1C; } </style> </head> <body> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit, veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p> </div> </body> </html>Berkas di atas jika kita buka melalui browser akan tampak seperti ini:
Pada contoh di atas kita dapat melihat elemen <div> memiliki dimensi elemen dengan lebar 300px dan tinggi 300px. Di dalamnya terdapat elemen <p> yang memiliki ukuran elemen 75% dari lebar dan tinggi elemen induknya. Dengan begitu berarti elemen <p> memiliki ukuran 225px untuk panjang dan lebarnya.
Limiting Dimension
Beberapa website yang ada sekarang menampilkan layout yang dapat melebar dan menyempit mengikuti ukuran layar pengguna. Pada prinsip tampilan tersebut mungkin kita memerlukan sebuah limitasi ukuran yang harus ditampilkan agar konten selalu dapat ditampilkan secara proporsional. Untuk melakukannya kita manfaatkan properti min-width dan max-width.
- min-width : merupakan properti yang digunakan untuk menetapkan nilai lebar minimal yang harus dimiliki elemen.
- max-width : merupakan properti yang digunakan untuk menetapkkan nilai lebar maksimal yang harus dimiliki elemen.
Keduanya merupakan properti yang sangat membantu untuk memastikan konten halaman dapat terbaca oleh pengguna (terutama ketika pengguna menggunakan ponsel). Misalnya, kita dapat menggunakan properti max-width untuk memastikan bahwa baris teks yang muncul tidak terlalu lebar.
<!doctype html> <html lang="en"> <head> <style> .content { max-width: 800px; height: 400px; margin: 0 auto; background-color: deeppink; } p { font-size: 1.5em; font-weight: bold; } </style> </head> <body> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eius explicabo fuga iusto magni minus odit praesentium, quasi quisquam quos repellat suscipit tempora tenetur? Assumenda cum laborum officiis quos ratione.</p> </div> </body> </html>Berkas di atas jika kita buka pada browser akan tampak seperti ini:
Dengan cara yang sama, mungkin kita juga perlu membatasi ukuran panjang. Kita bisa gunakan min-height dan max-height.
Overflowing Content
Dimensi box yang dihasilkan elemen selalu cukup untuk menampung konten tetapi hal ini tidak berlaku jika kita tetapkan secara manual panjang dan lebarnya. Tak jarang terjadi overflow ketika kita menerapkan ukuran pada elemen tetapi konten di dalamnya begitu banyak. Contohnya seperti berikut:
<!doctype html> <html lang="en"> <head> <style> div { height: 200px; width: 200px; background-color: lightgreen; } </style> </head> <body> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet corporis cupiditate dignissimos error expedita explicabo facere facilis, ipsam itaque libero modi officiis optio perspiciatis provident quam sequi voluptatem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut corporis facere harum inventore iure, quisquam recusandae reprehenderit veritatis voluptatum. Ducimus exercitationem illo nam sapiente suscipit, tenetur ullam ut voluptas!</p> </div> </body> </html>Berkas di atas jika kita buka pada browser akan tampak seperti ini:
Untuk menangani kasus seperti ini kita bisa gunakan properti overflow. Properti ini dapat bernilai:
- visible : Merupakan nilai default pada properti ini. Konten yang tidak tertampung (overflow) akan tetap ditampilkan seperti pada standarnya.
- hidden : Jika terjadi overflow, maka konten yang tidak tertampung akan disembunyikan.
- scroll : Memunculkan scroll bar pada pinggir elemen, sehingga konten yang tidak tertampung akan ditampilkan dengan scroll bar. Jika menggunakan nilai ini, scroll bar akan tetap muncul walaupun konten tidak terjadi overflow.
- auto : Sama seperti scroll, bedanya jika tidak terjadi overflow, maka nilai visible yang akan diterapkan.
Box-sizing
Sebelum CSS3 ukuran lebar dan panjang elemen mengacu pada konten elemen (content-box). Itu berarti ukuran elemen seluruhnya merupakan nilai panjang dan lebar yang kita spesifikasikan ditambah dengan nilai padding dan border yang diterapkan pada elemen. Hal tersebut membuat sebagian developer menjadi sulit menetapkan ukuran dimensi.
Pada CSS3 kita dapat memilih tipe pengukuran lain dalam menentukan dimensi elemen. Dengan menggunakan properti box-sizing kita dapat menentukannya berdasarkan border box, di mana ukuran elemen sudah termasuk content, padding dan border. Dengan metode ini, hasil elemen yang ditampilkan (termasuk padding dan border) akan memiliki dimensi yang sama persis seperti yang kita tentukan.
<!doctype html> <html lang="en"> <head> <style> div { height: 200px; width: 200px; background-color: lightgreen; border: 10px solid cornflowerblue; padding: 20px; } .content { box-sizing: content-box; } .box { box-sizing: border-box; } </style> </head> <body> <div class="content"> </div> <p>Elemen menerapkan <code>box-sizing: content-box;</code> Ukuran box secara keseluruhan akan menjadi 260px lebar, 260px tinggi; 260 = 200 + 20 + 20 + 10 + 10</p> <br> <div class="box"> </div> <p>Elemen menerapkan <code>box-sizing: border-box;</code> Ukuran box akan tetap 200px lebar, 200px tinggi meskipun menerapkan padding dan border</p> </body> </html>Berkas di atas jika kita buka pada browser akan tampak seperti ini:
20. BorderBorder merupakan sebuah garis yang mengelilingi area konten dan padding (opsional). Kita bisa mengatur tipe, ketebalan, serta warna garis yang ditampilkan sesuai dengan yang kita inginkan. Kita juga bisa mengatur dalam menampilkan sebagian atau keseluruhan garis pada elemen. Mari kita eksplorasi apa saja properties yang dapat mengatur border.
Border Width
Properti border-width digunakan untuk mengatur ketebalan dari border. Nilai dari properti ini dapat berupa pixel atau menggunakan predefined names value seperti thin, medium, dan thick. Kita tidak bisa menggunakan nilai persentase (%) pada properti ini.
Kita dapat mengatur ukuran garis secara individual dengan menggunakan empat properti terpisah seperti ini:
.box { border-top-width: 2px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 2px; }Tetapi kita juga dapat menetapkan nilai keempatnya sekaligus dalam satu properti seperti ini
.box { border-width: 2px 1px 1px 2px; /*top right bottom left*/ }Properti border-width dapat ditentukan dengan menggunakan satu, dua, tiga, atau empat nilai. Berikut penjelasannya:
- Ketika satu nilai ditentukan, maka nilai berlaku untuk empat sisi.
- Ketika dua nilai ditentukan, nilai pertama berlaku untuk sisi atas dan bawah, nilai kedua untuk sisi kiri dan kanan.
- Ketika tiga nilai ditentukan, nilai pertama berlaku untuk sisi atas, nilai yang kedua untuk sisi kiri dan kanan, nilai ketiga untuk sisi bawah.
- Ketika empat nilai ditentukan, nilai pertama berlaku untuk sisi atas, nilai yang kedua untuk sisi kanan, nilai yang ketiga untuk sisi bawah, dan nilai yang keempat untuk sisi kiri. Urutan tersebut berdasarkan arah jarum jam (clockwise).
Border Style
Kita bisa menetapkan tipe border dengan menggunakan properti border-style. Berikut nilai - nilai yang dapat digunakan pada properti ini:
Nilai Properti
Penjelasan
Gambar
solid
Tipe garis padat (tidak terputus - putus)
dotted
Garis yang dibentuk dari serangkaian titik-titik (jika ketebalan garis 2px, maka titik-titik akan berukuran 2px dan memiliki jarak 2px antar titiknya).
dashed
Garis yang dibentuk dari serangkaian garis pendek.
double
Garis yang dibentuk dari dua buah garis padat.
groove
Tipe garis yang berbentuk seperti frame
hidden
Digunakan untuk menyembunyikan garis pada elemen.
Kita juga bisa menetapkan tipe garis secara individual pada sisi elemen dengan menggunakan empat properti terpisah. Contohnya seperti ini:
.box { border-top-style: solid; border-right-style: dotted; border-bottom-style: groove; border-left-style: double; border-width: 4px; border-color: red; width: 200px; height: 50px; }Jika kita menerapkan rule seperti di atas, maka hasilnya akan tampak seperti ini:
Border Color
Properti terakhir adalah border-color. Properti ini digunakan untuk menentukan warna pada garis dengan menggunakan nilai RGB, Hex, atau nama warna pada CSS.
/* menggunakan rgb format */ border-color: rgb(80, 138, 212); /* menggunakan format hex */ border-color: #4ee717; /* menggunakan nama warna */ border-color: red;
Sama seperti properti border yang lain, kita dapat menentukan warna pada individual sisi pada elemen dengan menggunakan properti yang terpisah.
border-top-color: #919191; border-right-color: #111111; border-bottom-color: #4ee717; border-left-color: #00c8eb;
Tetapi kita juga dapat menetapkan nilai keempatnya sekaligus dalam satu properti seperti ini:
border-color: #919191 #111111 #4ee717 #00c8eb;
Hasilnya seperti ini:
Shorthand
Untuk menerapkan border pada elemen kita harus mendefinisikan seluruh properti border yang ada. Dimulai dari menetapkan ketebalan (border-width), tipe (border-type), dan warna (border-color). Jika kita lupa menetapkan salah satu properti tersebut, maka garis tidak akan nampak pada elemen.
Dengan begitu tentu untuk menetapkan border pada elemen, kita perlu menuliskan properti yang banyak bukan? Ya memang, tetapi CSS menyediakan jalan pintas (shorthand) untuk membuat border dengan satu properti saja. Properti border memiliki tiga buah nilai yang digunakan untuk menentukan ketebalan, tipe dan warna pada border. Berikut contoh penerapannya:
.box { border: 4px dashed #00a2c6; width: 200px; }Hasilnya seperti ini:
Perlu kita perhatikan bahwa penulisan urutan harus benar. Nilai pertama digunakan untuk ketebalan, yang kedua untuk tipe, dan yang ketiga untuk warna garis.
No comments:
Post a Comment