1.

Css introduction

CSS merupakan bahasa pemrograman yang dipakai untuk mendesain

halaman depan atau tampilan website (front end). CSS menangani

tampilan dan ‘rasa’ dari halaman website.

CSS digunakan untuk menentukan gaya halaman web Anda, termasuk

desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan

ukuran layar. body {

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
2. Css syntax

CSS memiliki syntax yang sederhana dan menggunakan sejumlah kata

kunci berbahasa Inggris untuk menentukan nama-nama berbagai

properti. CSS memiliki dua aturan utama, yaitu Selector dan

Declaration. Untuk lebih jelasnya, lihat cara penulisan serta komponen

yang terdapat pada CSS berikut :

Declaration.

Selector biasanya merupakan elemen HTML atau tag dimana berbagai

properti diberi suatu nilai.

Setiap Declaration terdiri dari Property dan Value.

Untuk penulisan Declaration harus menggunakan tanda kurung kurawal

{...}

Property adalah atribut style yang ingin dirubah, misalnya color,

background, margin, dll.

Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.

Contoh

Contoh Dijelaskan

p adalah pemilih di CSS (ini menunjuk ke elemen HTML yang ingin Anda

tentukan gaya: <p>).

warna adalah properti, dan merah adalah nilai properti

text-align adalah sebuah properti, dan tengah adalah nilai property

CSS selector adalah salah satu rule set dari Css yang fungsinya tidak

berbeda jauh dengan namanya (Selector) yakni memilih suatu elemen

yang ingin anda beri gaya atau style css.

a) Universal selector

Universal selector berarti memilih semua elemen yang ada pada

suatu halaman HTML. Setiap halaman HTML dibangun di atas

konten yang ditempatkan di dalam tag HTML. Setiap set tag

mewakili elemen pada halaman.

Tiga baris kode di dalam kurung kurawal (Color, Font-Size, dan line-

height) akan berlaku untuk semua elemen pada halaman HTML.

Seperti yang terlihat pada contoh, Universal selector dideklarasikan

dengan tanda bintang “*”. Kamu juga bisa mengkombinasikan

Universal Selector dengan jenis selector yang lain.

b) Id selector

Id selector menggunakan attribut id pada HTML untuk memilih

elemen tertentu.
 Id dari elemen bersifat unik dalam suatu laman, jadi Id selector

digunakan untuk memilih satu elemen unik.

Untuk memilih elemen dengan id tertentu, tulis karakter hash (#),

diikuti dengan id elemen.Perlu diingat bahwa menentukan nama

id tidak boleh diawali dengan angka

c) Class selector

Class selector digunakan untuk memilih elemen HTML dengan

class atribut tertentu. Untuk memilih elemen dengan class

tertentu, tulis karakter titik (.), diikuti dengan nama class.

Contoh : pada contoh kali semua elemen HTML dengan

class=”center” akan berwarna merah dan rata tengah.

Anda juga bisa menargetkan elemen tertentu saja yang menggunakan

css. Contoh hanya class saja yang akan berwarna merah dan rata
 tengah

d) Grouping selector

Grouping Selector yakni memilih semua elemen HTML dengan

style css yang sama. Untuk Group Selector, pisahkan setiap

selector dengan tanda koma.Lihatlah kode CSS berikut (elemen

h1, h2, dan p memiliki style css yang sama)

4. Css how to add

Pertama ada inline style sheet. Sederhananya, CSS model ini adalah

CSS dengan perintah pemrograman yang letaknya ada pada

objek.Misalnya kamu ingin mengubah sebuah tulisan pada laman

pada elemen tulisan tersebut. Kamu cukup menambahkan tag <style>

saja untuk menerapkan CSS ini.

External css

Selain inline style sheet ada external style sheet. CSS ini letaknya

berbeda dengan laman yang akan diubah. Cara ini lebih praktis

daripada inline style sheet karena bisa menghemat ruang dan bisa

digunakan berulang-ulang untuk laman web yang berbeda.Kamu bisa

mengenali CSS tipe ini lewat tag <link rel>. Tag ini akan

menghubungkan halaman coding pada external style sheet CSS yang

terpisah.

Internal css

5. Lalu, bagaimana penempatan CSS menggunakan cara internal? Internal

CSS sekilas mirip dengan inline CSS, yaitu tipe penulisan tanpa file

CSS terpisah.Namun di dalam penggunaan CSS secara internal, baris

kode HTML dituliskan di bagian atas (header) file HTML. Cara ini akan

sangat cocok dipakai untuk menciptakan halaman web dengan

tampilan yang berbeda. Dengan kata lain, CSS ini bisa dipakai untuk

menciptakan tampilan yang unik.

6. Css cooment

Komentar pada CSS bisa dimanfaatkan sebagai pengingat atau

penjelasan fungsi dari potongan kode (dokumentasi). Selain itu

komentar juga bisa dimanfaatkan untuk mematikan potongan kode

yang tidak ingin digunakan terlebih dahulu atau kode error.

7. Css color
CSS color digunakan untuk memberikan color atau warna pada elemen

HTML. Dengan color Anda bisa memberikan nilai warna pada properti

background-color, border-color, color dan yang lainnya. Pada color

sendiri Anda bisa memberikan nilai atau menentukan warna mana yang

akan digunakan dengan macam-macam type warna. Seperti: RGB, HEX,

HSL dan yang lainnya.

Nilai color CSS yang paling sering gunakan:

nilai HEX – seperti #ff0000

nilai RGB – seperti rgb (255,0,0)

nama color – seperti blue