Membuat Indah Halaman HTML Dengan CSS

Setelah beberapa hari kita membahas seputar tentang html, kali ini ane mau share tentang CSS. CSS adalah Cascading Style Sheets, dan inilah yang membuat halaman website terlihat menjadi indah, lebih berwarna dan menarik. Opps, sebelum melanjutkan ke materi css, kalian harus sudah mengerti dasar dasar html, Untuk kalian yang ingin mempelajari html dasar, bisa lihat index materi dari curhtan curhatan ane sebelumnya yang membahas seputar HTML

Kenapa sih harus ngerti HTML lebih dahulu?? Yah karena memang HTML dan CSS adalah bagian tak terpisahkan dari website modern saat ini. HTML digunakan untuk membuat konten atau kerangka logis dari suatu halaman web, sedangkan CSS digunakan untuk mengatur tampilan dari website atau halaman tersebut, seperti warna dan font yang digunakan.

Ini dia salah contoh script CSS :

body {
font-size: 14px;
color: black;
background: aqua;
}

p {
font-family: calibri, helvetica, sans-serif;
}

h1 {
text-decoration: underline;
font-size: 23px;
color: red;
font-weight: bolder;
}

Nah sekarang biar lebih gampang mengerti maksud dari kode kode di atas, kita pelajari dulu bagian bagian css. Di dalam css itu Ada property, ada selector dan ada value, kalian harus pahami konsep ini terlebih dahulu. Karena ini juga termasuk bagian dari cara bagaimana menuliskan script atau Bahasa css.

Konsep Selector, Property, dan Value
Selector adalah nama dari bagian yang ingin di manipulasi, Property adalah jenis gaya atau style yang ingin digunakan pada selector dan Value adalah nila dari gaya atau stylenya. Ane jelasin gak usah terlalu panjang yah. Yang penting kita akan mengerti bagaimana konsep ini bekerja. Berikut ane lampirkan apa yang dimaksud dengan selector, property dan value

Okeh sekarang perhatikan baik baik gambar di atas.

h1 = Inilah yang dinamakan selector, karena bagian h1 dalam html yang akan dirubah
font-size = ini adalah property atay gayanya dari selector, fungsi property font-size sendiri adalah untuk menentukan ukuran font atau teks
15px = dan ini adalah value atau nilai dari property itu.

jika kita artikan, script pada gambar di atas berarti bahwa h1 akan memiliki ukuran font sebesar 15px atau bisa kita artikan bahwa h1 akan tampil dengan ukuran font sebesar 15px. bagaimana sampai sini sudah cukup paham?

Sekarang kita lanjut bagaimana cara melakukan penulisan kode CSS. Coba kalian lihat kembali gambar diatas, perhatikan ada tanda buka kurawal “ { “ ada titik dua “ : “ ada titik koma “ ; “ dan ada tutup kurawal “ } “

Sekarang ane jelaskan bagaimana cara menggunakannya.

Jelas yang pertama dalam penulisan css adalah menentukan nama selector
kedua adalah tanda buka kurawal “ { ", Buka kurawal bertanda bahwa dimulainya property terhadap selector, dan setelah tanda inilah kita bisa memasukkan property apa saja yang akan kita gunakan untuk selector
Tanda ketiga adalah titik dua “ : “ dan titik koma “ ; “ titik dua ditulis setelah property, dan titik dua ini bertanda sebagai untuk dimulainya untuk memasukkan nilai value untuk property dan titik koma adalah untuk menandakan akhir dari property, jika kalian ingin memasukkan lebih dari satu property dalam satu selector, maka property lainnya ditulis selah tanda titik koma “ ; ”
Dan yang paling akhir adalah tutup kurawal “ } “, ini adalah tanda akhir dari property

Sekarang ane contohkan bagaimana melakukan penulisan beberapa property dalam satu selector

h2 {
text-decoration: underline;
font-size: 23px;
color: red;
font-weight: bolder;
}

Perhatikan property yang ada didalam h2, ada beberapa property, dan property baru selalu ditulis setelah tanda titik koma “ ; ”

Sekarang yang jadi pertanyaan, dimana kita mengetikkan css? Kita akan bahas dibawah yah guys, sebelum lanjut, coba sekarang pahami dulu dengan jelas bagaimana cara penulisannnya css

Note :
Selector yang digunakan bisa berupa tag-tag dalam html seperti <p>, <h1>, <h2>,<a> dan seterusnya, namun penulisan selector untuk tag html tanpa menggunakan tanda tag html

Implementasi dan Cara Menggunakan CSS dalam HTMLBiar makin jelas bagaimana css ini bekerja, sekarang kita akan coba bagaimana cara mengimplementasikan CSS + HTML. Metode penulisan css yang akan kita gunakan dan kita bahas kali ini adalah metode internal style sheet, dimana css dan html masih berada dalam satu file atau satu halaman yang sama. untuk lebih jelas mengenai metode penulisan internal dan external akan kita bahas terpisah dan terinci di materi selanjutnya

Lanjut, di dalam metode internal ini, script css diletakkan di dalam tag <head>, masih ingatkan dimana ada tag <head> itu berada. Dan sebagai deklarator yang menyatakan bahwa script yang akan dituliskan adalah Bahasa CSS perlu penambahan tag html, yaitu tag <style>, tag <style> inilah yang dimaksud sebagai deklarator dan di dalam tag <style> inilah css diletakkan. Sebagai tambahan tag <style> termasuk tag yang memiliki pasangan yang artinya memiliki closing tag </style>. Okeh biar makin jelas, coba kita perhatikan script dibawah ini

<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="IndoNgoding" />
<title>Belajar Membuat Halaman HTML dengan CSS</title>
<style>
h1 {
font-size: 25px;
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Belajar HTML</h1>
</body>
</html>

Setelah lihat script di atas, makin cukup jelaskan dimana kita meletakkan script css dalam metode penulisan internal. Jadi di dalam tag <style> lah script css kita letakkan. Dan tag <style> sendiri berada di dalam tag <head>.

Nah sekarang coba lihat script dan praktekkan script yang dibawah ini :

<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="IndoNgoding" />
<title>Belajar Membuat Halaman HTML dengan CSS</title>
<style type="text/css">
body {
font-size: 12px;
color: navy;
background: aquamarine;
}
p {
font-family: calibri, helvetica, sans-serif;
}
h1 {
text-decoration: underline;
font-size: 23px;
color: green;
}
h2 {
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<h1>LIHATLAH H1 YANG MENGGUNAKAN CSS</h1>
<h2> Tag H2 ini sudah menggunakan css</h2>
<p>Tag p ini juga sudah menggunakan css, gimana sobat jadi lebih menarik?</p>
<p>Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris. Semper persius his te, Nam verear constituto an, eu latine bonorum euripidis vim. Quidam maiorum interesset pri id, usu vero saepegraeci ea. </p><br /><br />

<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>

</body>
</html>