Belajar CSS dan Style dasar dalam HTML

Assalamualaikum wr.wb sobat programmer. Saya disini akan memberikan sebuah materi lagi kepada kalian mengenai Basic Css dan style HTML. mari kita simak bareng bareng penjelasan yang ada ya teman teman

Sebelum masuk ke kode programnyaa kita haruss tau terlebih dahulu apa itu Css si??

CSS singkatan dari Cascading Style Sheeet, yaitu dokumen yang berisi definisi style untuk sebuah dokumen HTML atau untuk mengatur tampilan dari dokumen HTML, meliputi layout dokumen, pewarnaan dan tampilan font dan teks dan lain sebagainya. Penulisan CSS baiknya ditulis terpisah dari konten HTML hal ini dilakukan untuk meningkatkan daya akses konten pada web dan mengurangi kerumitan dalam penulisan kode dan struktur dari dokumen HTML.

Dengan adanya CSS, konten dan desain web akan mudah dibedakan, sehingga memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web 

Nah setelah kita mengenal dengan pengertian CSS nya maka kita lanjut kan saja.

1. Struktur penulisan Css

Selector {property:value}
Selector {property:value; property:value}

Dari kode program diatas akan saya jelaskan maksudnya. Untuk selector yaitu bagian Css yang berfungsi untuk memilih elemen yang akan dikenai style. Property adalah jenis style yang akan diterapkan pada elemen, dan value adalah nilai dari property yang digunakan. Property dan value hanya bisa ditulis diantara kurung kurawal.

Untuk contoh lebih jelasnya sebagai berikut.

<style>
h1 {
 font-family:Algerian;
 font-size:40px;
 color:red;
}
</style>
<h1>IT Programmer Tegal</h1>

Dari kode diatas akan saya jelaskan strukturnya..
Nahh mana yang dinamakan selector , property dan value.. h1 tersebut merupakan selector css, untuk font-family, font-size, dan color disebut property. untuk Algerian, 40px, dan red adalah nilai dari property itu dalam artinya sebagai value.
Apakah sudah paham? Jika sudah kita lanjut ke teknik penerapan CSS.

2. Teknik penerapan CSS
Untuk menulis bagian CSS didalam HTML ada 3 cara tersendiri yaitu dengan inline stylesheet, internal stylesheet dan external style sheet
a. Inline style sheet
Pada inline style kita menulis kode Css didalam tag html tepatnyaaa didalam atribut style.

<h1 style="font-size:20px; color:red;">
IT Programmer Tegal
</h1>

b. Internal style sheet
Teknik menuliskan kode css ini adalah dengan mengumpulkan kode css menjadi satu elemen.

<style>
h1 {
 font-family:Algerian;
 font-size:40px;
 color:red;
}
</style>
<h1>IT Programmer Tegal</h1>

c. External style sheet
Teknik ini yaitu dengan menguliskan kode css terpisah dengan file html. Nah untuk css saya kasih contoh filenya dengan style.css dan untuk html yaitu index.html, berikut ini contoh penulisannyaa.

Style didefinisikan didalam file html.

style.css
/* style css */

h1 {
 font-family:Algerian;
 font-size:40px;
 color:red;
}

Kemudian style.css tersebut ditautkan dalam file html nya menggunakan tag link.

<!-- index.html -->
<!-- pake komentar buat tanda aja -->
<link href="style.css" rel='stylesheet" type="text/css" />
<h1> IT Programmer Tegal </h1>

Nah dari kode diatas maka kode program yang ada didalam style.css akan beralih ke html.

3. Css Properties
Property digunakan untuk memilih jenis style apa yang akan diterapkan pada tag, class, atau id yang telah dipilih pada selector, dan pada satu selector bisa berisi beberapa property. 
Ada beberapa jenis property sebagai berikut :
• background
• border
• box model
• layouting
• font & text
• dan lain-lain.
 Untuk selengkapnya anda bisa lihat di w3school.
https://www.w3schools.com/cssref/

4. Selector
Ada dua macam tag selector didalam css. tag pertama yaitu single selector dan yang kedua multiple selector. Untuk mengetahui perbedaanya maka akan saya tuliskan sebuah programnya.

- Single Selector
h1 {color:purple}
p {font-size:30px}

- Multiple Selector
h1 , h2, p {
font-family:"Arial", sans-serif;
color:red;
}

Ada juga selector dengan id maupun dengan class.

Selector class digunakan untuk menentukan style juga sama seperti id. Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau dot “.” pada CSS dan class=“nama-class” pada HTML. Sedangkan selector id hanya boleh dipanggil satu kali, selain itu untuk Selector ini ditulis dengan awalan pagar “#” pada CSS dan id=“nama-id” pada HTML.

Berikut contoh implementasi selector id dan class :

<style>

#highlight{background-color:yellow

.red {color:red}

</style>

<h1>Belajar class dan id</h1>

<p class="red"> Ini contoh selector class </p>

<p id="hightlight"> Ini Contoh selector id </p>

Nah untuk selector class itu khusus buat .red dan tanda pagar (#) pada highlight ditempatkan pada selector id.

Sekian pembahasan materi dari saya, semoga bermanfaat buat kalian semua. Tetap support dan visit blog kami agar kami lebih semangat dalam mengembangkan materi. 

Wassalamualaikum wr.wb