Belajar CSS Syntax, Selector, Position, Comment, Box Model

byJodi Setiawan

CSS

Belajar CSS Syntax, Selector, Position, Comment, Box Model, Strukture

Pada materi dasar dan lanjutan ini saya akan memberikan materi dan contoh Penempatan CSS Syntax, Selector, Position, Comment, Box Model, Strukture. 

1. Belajar CSS Syntax

  • Aturan CSS terdiri dari pemilih dan blok deklarasi.
  • Pemilih menunjuk ke elemen HTML yang ingin Anda gaya.
  • Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
  • Setiap deklarasi mencakup nama properti CSS dan nilai, dipisahkan oleh titik dua.
  • Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi dikelilingi oleh kawat gigi keriting.

Contoh :

Semua Element <p> akan sejajar dengan pusat, dengan warna teks biru 

p {
  color: blue;
  text-align: left;
} 

Keterangan :

  • p Adalah pemilih dalam CSS (menunjuk ke elemen HTML yang ingin Anda gaya: <p>).
  • color adalah properti, dan merupakan nilai properti biru
  • text-align adalah properti, dan merupakan nilai properti teks rata kiri.

2. Belajar Selector CSS

Pemilih CSS digunakan untuk "menemukan" (atau memilih) elemen HTML yang ingin Anda gaya.

Selector CSS dibagi menjadi lima kategori:

  • Pemilih sederhana (pilih elemen berdasarkan nama, id, kelas)
contoh:
#para1 {
  text-align: center;
  color: red
}

Keterangan :

Pemilih id menggunakan atribut id elemen HTML untuk memilih elemen tertentu. Id elemen unik dalam halaman, sehingga pemilih id digunakan untuk memilih satu elemen unik! Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.

Pemilih pengelompokan memilih semua elemen HTML dengan definisi gaya yang sama. Lihatlah kode CSS berikut (elemen h1, h2, dan p memiliki definisi gaya yang sama):

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

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

3. Belajar CSS Position

Properti menentukan jenis metode penentuan posisi yang digunakan untuk suatu elemen (statis, relatif, tetap, absolut atau lengket). 

Elemen kemudian diposisikan menggunakan properti atas, bawah, kiri, dan kanan. Namun, properti ini tidak akan berfungsi kecuali properti ditetapkan terlebih dahulu. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.position

Posisi: Statis;

Elemen HTML diposisikan statis secara default.

Elemen yang diposisikan statis tidak dipengaruhi oleh sifat atas, bawah, kiri, dan kanan.

Elemen dengan tidak diposisikan dengan cara khusus; selalu diposisikan sesuai dengan aliran normal halaman:position: static;

elemen <div> memiliki posisi: statis;

Berikut adalah CSS yang digunakan:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Posisi: Relatif;

Elemen dengan diposisikan relatif terhadap posisi normalnya.position: relative;

Mengatur sifat atas, kanan, bawah, dan kiri dari elemen yang relatif diposisikan akan menyebabkannya disesuaikan dari posisi normalnya. Konten lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.

elemen <div> ini memiliki posisi; relatif

Berikut adalah CSS yang digunakan:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Posisi: Tetap;

Elemen dengan diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman digulirkan. Properti atas, kanan, bawah, dan kiri digunakan untuk memposisikan elemen.position: fixed;

Elemen tetap tidak meninggalkan celah di halaman di mana biasanya berada.

Perhatikan elemen tetap di sudut kanan bawah halaman. 

Berikut adalah CSS yang digunakan:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Posisi: Absolut;

Elemen dengan diposisikan relatif terhadap nenek moyang terdekat diposisikan (bukan diposisikan relatif terhadap viewport, seperti tetap).position: absolute;

Namun; Jika elemen yang diposisikan absolut tidak memiliki nenek moyang yang diposisikan, ia menggunakan badan dokumen, dan bergerak bersama dengan pengguliran halaman.

Nota: Elemen yang diposisikan absolut dihapus dari aliran normal, dan dapat tumpang tindih elemen.

contoh :


CSS yang digunakan:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

4. Belajar Materi CSS Comment

Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit kode sumber di kemudian hari. Komentar diabaikan oleh browser atau tidak ditampilkan di browser, tetapi mereka dapat membantu mendokumentasikan kode sumber Anda.

Komentar CSS ditempatkan di dalam elemen, dan dimulai dengan dan diakhiri dengan:<style>/**/

Komentar dapat mencakup beberapa baris:
Contoh :
/* This is
a multi-line
comment */

p {
  color: red;
}

Komentar HTML dan CSS

Dari tutorial HTML, Anda belajar bahwa Anda dapat menambahkan komentar ke sumber HTML Anda dengan menggunakan sintaks.<!--...-->

Dalam contoh berikut, kita menggunakan kombinasi komentar HTML dan CSS:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

5. Belajar Materi CSS Box Model

Saat meletakkan dokumen, mesin rendering browser mewakili setiap elemen sebagai kotak persegi panjang sesuai dengan model kotak dasar CSS standar. CSS menentukan ukuran, posisi, dan properti (warna, latar belakang, ukuran batas, dll)) dari kotak-kotak ini.

Setiap kotak terdiri dari empat bagian (atau area), ditentukan oleh tepi masing-masing: tepi konten, tepi padding, tepi perbatasan, dan tepi margin.

Contoh gambarnya seperti ini:


Penjelasan dari berbagai bagian:

  • Konten - Konten kotak, tempat teks dan gambar muncul
  • Padding - Membersihkan area di sekitar konten. Padding transparan
  • Border - Perbatasan yang mengelilingi padding dan konten
  • Margin - Membersihkan area di luar perbatasan. Marginnya transparan

Demikian Materi yang bisa saya tulis di blog ini, referensi materi ini di dapat dari https://www.w3schools.com/ Terimakasih

Kategori Materi Pembelajaran CSS

A. Indeks Materi Belajar CSS Dasar dan Lanjutan :

Materi dasar dan lanjutan CSS ini meliputi 

  1. Belajar Pengenalan CSS Dasar
  2. Belajar CSS : Syntax, Selector, Position, Comment, Box Model,
  3. Belajar CSS : Colors, Beckground, Border, Margins, Padding
  4. Belajar CSS : Outline, Text, Fonts, Icons, Links, List, Tables, Display
  5. Belajar CSS : Z-indeks, Overflow, Float, Inline-Block, Align, Combination
  6. Belajar CSS : Class, Elements, Opacity, Navigation bar, DropDown, Forms, Counters
  7. Belajar CSS : Image, Attr Selector, Layout, Units, Specificity, Funtion

B. Indeks Materi Belajar CSS Atribut dan Referensi :

Pada bagian lanjutan ini adalah materi pemahaman berbagai macam property css untuk membuat style dan desain dari sebuah website.

  1. Belajar CSS Atributes: Colors, shadows, Text Effect, Trantition, Web Fonts, Animation
  2. Belajar CSS Atributes: Rounded corners, Image Borders, Gradiants, User Interface
  3. Belajar CSS Atributes: Variables, Pagination, Multiple Colors, Media Queries, MQ Example, FlexBox
  4. Belajar CSS Responsive RWD: Intro, Viewport, Grid View, Media Queries, Frameworks, Templates
  5. Belajar CSS Atributes: Grid CSS, CSS SASS, CSS Exmples, 
  6. Belajar CSS Referensi: Selectors, Funtions, Aural, Inits, Colors Value, Default Value, Browser Support

Mohon Maaf Masih banyak Link yang mati, itu dikarenakan masih dalam proses penulisan dan rancangan materi di draf saya, do'akan saya semoga selalu diberi kesehatan untuk meneruskan materi yang akan ditulis di blog ini.

Tags:
Previous Post Next Post