Menerapkan Perintah Css-1

MENERAPKAN PERINTAH CSS
Bagus A Karim
CSS
CSS (Cascading Style Sheets) adalah sebuah bahasa yang digunakan untuk mengontrol
tampilan dan gaya (styling) elemen-elemen pada halaman web
Dengan CSS, dapat dengan mudah mengubah tampilan seluruh situs web hanya dengan
mengubah beberapa baris kode CSS
Dengan CSS, dapat dengan mudah mengubah tampilan seluruh situs web hanya dengan
mengubah beberapa baris kode CSS
keuntungan utama CSS adalah kemampuannya untuk menerapkan gaya secara kaskade
(cascading). Artinya, jika ada beberapa aturan CSS yang diterapkan pada elemen yang sama,
CSS akan menerapkan aturan yang paling spesifik atau yang memiliki prioritas tertinggi.
Penulisan CSS
1. Penulisan inline CSS dilakukan langsung di dalam atribut style elemen HTML
yang ingin diberikan gaya
Penulisan CSS
2. Penulisan internal CSS dilakukan di dalam tag <style> di dalam elemen <head>
pada dokumen HTML
Penulisan CSS
3. Penulisan external CSS melibatkan membuat file terpisah dengan ekstensi .css
yang berisi aturan gaya CSS. Kemudian, file CSS tersebut dihubungkan ke halaman
HTML menggunakan elemen <link>
file style.css file HTML

Selector
Selector Elemen
Selector Elemen digunakan untuk memilih elemen
berdasarkan nama tag elemen
PENJELASAN:
selector p akan memilih semua elemen
paragraf pada halaman web dan menerapkan
gaya teks berwarna biru dan ukuran font 16px.
Selector Kelas/Class
Selector Kelas digunakan untuk memilih elemen
berdasarkan atribut class. Ditandai dengan awalan
titik (.)
PENJELASAN:
selector .button akan memilih semua
elemen dengan class "button" dan
memberikan latar belakang biru (#3498db),
teks putih (#fff), dan padding 10px atas-
bawah dan 20px kiri-kanan.
Selector ID
Selector ID digunakan untuk memilih elemen
berdasarkan atribut id. Ditandai dengan awalan
pagar (#)
PENJELASAN:
selector #header akan memilih elemen
dengan ID "header" dan memberikan latar
belakang abu-abu muda (#f0f0f0) dan
tinggi 100px.
Selector Universal
Selector Universal (*) memilih semua elemen dalam
dokumen HTML
PENJELASAN:
selector * akan memilih semua elemen
pada halaman web dan menghapus margin
dan padding bawaan untuk menghindari
adanya ruang kosong tak diinginkan.
Selector Turunan
Selector Turunan memilih elemen yang berada di
dalam elemen lain. Ditandai dengan spasi.
PENJELASAN:
selector turunan yang memilih elemen <ul> dan <p> yang
berada di dalam elemen dengan class "container".
.container ul memilih elemen <ul> yang berada di
dalam elemen dengan class "container" dan
memberikan jenis bullet berbentuk kotak (square).
.container p memilih elemen <p> yang berada di
dalam elemen dengan class "container" dan
memberikan gaya teks italic dan warna teks abu-abu
(#666).
Selector Anak Langsung
Selector Anak Langsung (>) memilih elemen yang menjadi anak
langsung dari elemen lain. Misalnya, ul > li akan memilih semua elemen
<li> yang menjadi anak langsung dari elemen <ul>.
PENJELASAN:
selector ul li akan memilih semua elemen
<li> yang berada dalam elemen <ul> dan
memberikan jenis bullet berbentuk
lingkaran (circle).
Selector Pseudokelas
Selector pseudokelas (pseudo-class selector) digunakan untuk memilih
elemen dalam keadaan tertentu atau dalam kondisi tertentu.
Pseudokelas ditambahkan ke selektor dengan format :nama-pseudokelas.
PENJELASAN:
1. a:hover memilih elemen <a> ketika pointer berada di
atasnya (hover), dan memberikan gaya teks berwarna
merah (#ff0000) dan garis bawah (underline).
2. button:active memilih elemen <button> ketika tombol
ditekan (active), dan memberikan latar belakang abu-abu
muda (#f0f0f0) dan warna teks hitam (#333).
3. input:focus memilih elemen <input> ketika elemen
tersebut mendapat fokus (focus), seperti saat pengguna
mengkliknya, dan memberikan garis pinggir berwarna
biru (#00bfff) dan bayangan pada input.
Properties
Properties
COLOR Font-size
Properti color digunakan untuk Properti font-size digunakan untuk
mengatur warna teks mengatur ukuran font
Properties
MARGIN Padding
Properti margin digunakan untuk Properti padding digunakan untuk
mengatur jarak di sekitar elemen / mengatur ruang dalam elemen /
dari luar elemen dari dalam elemen
Properties
Background-color Border
digunakan untuk mengatur warna Properti border digunakan untuk
latar belakang elemen mengatur gaya, lebar, dan warna
batas elemen
Properties
Text-align Display
Digunakan untuk mengatur Digunakan untuk mengatur
penataan teks (rata kiri, tengah, tampilan elemen (blok, inline, atau
atau kanan) inline-block)
Properties
width dan height
Properti width dan height digunakan untuk

mengatur lebar dan tinggi elemen
Layout and Positioning
Box Model
Box Model
model yang digunakan untuk menggambarkan struktur

suatu elemen HTML dalam halaman web. Model ini terdiri
dari beberapa bagian utama yang membentuk kotak yang
mengelilingi konten elemen.
Box Model
Padding Margin
ruang di sekitar konten ruang di luar border
elemen. Padding yang memisahkan
memberikan jarak elemen dengan elemen
Konten (Content) antara konten dan batas lain di sekitarnya
bagian dalam elemen HTML yang berisi teks, elemen
gambar, atau elemen lainnya. Lebar dan tinggi

konten dapat diatur dengan properti width dan
height.
Border
garis yang mengelilingi padding dan
konten elemen. Properti border digunakan
untuk mengatur gaya, lebar, dan warna
border
Ilustrasi Box Model
Normal Flow
Tata letak dasar yang digunakan oleh elemen-elemen

HTML untuk ditampilkan pada halaman web. Elemen-
elemen dalam normal flow disusun berurutan dari atas ke
bawah, dan jika lebar elemen melebihi lebar container,
elemen akan turun ke baris berikutnya
Sifat dari normal flow
Berurutan (Sequential) Block dan Inline
Elemen-elemen HTML disusun secara Setiap elemen HTML dalam normal flow
berurutan dalam aliran normal dari atas dianggap sebagai elemen block atau
ke bawah. Elemen yang pertama inline, tergantung pada sifat elemen
ditempatkan di atas, diikuti oleh elemen tersebut. Elemen block, seperti <div>,
berikutnya yang berada di bawahnya. <p>, dan heading (<h1>, <h2>, dst.), akan
Urutan ini mengikuti struktur HTML dan menempati seluruh lebar kontainer dan
urutan penempatan elemen-elemen muncul dalam baris baru. Elemen inline,
dalam kode. seperti <span>, <a>, dan teks biasa,
muncul berdampingan dalam satu baris.
Block Box Model Lebar Kontainer
Elemen-elemen dalam normal flow Elemen-elemen dalam normal flow
dianggap sebagai "kotak" (box) yang secara default akan mengambil lebar
memiliki content, padding, border, dan kontainer (parent element) yang
margin. Ukuran dan tata letak elemen menjadi tempat mereka berada. Jika
tersebut diatur berdasarkan properti lebar elemen melebihi lebar kontainer,
box model elemen akan turun ke baris berikutnya
Tinggi Konten Responsive
Tinggi elemen dalam normal flow akan Normal flow secara intrinsik responsif,
menyesuaikan dengan kontennya artinya elemen-elemen akan
secara otomatis. Jika tinggi elemen menyesuaikan tampilan mereka dengan
tidak ditentukan, elemen akan ukuran layar atau kontainer. Elemen
mengambil tinggi minimum yang akan tetap mengikuti aliran normal
diperlukan untuk menampung mereka bahkan ketika tampilan
kontennya berubah, seperti saat halaman di-resize
atau dibuka di perangkat dengan
ukuran layar yang berbeda.
Positioning
Mekanisme yang digunakan untuk mengatur tata letak
elemen-elemen HTML secara lebih presisi dan fleksibel di
dalam halaman web. Dengan menggunakan properti
positioning, Anda dapat memindahkan elemen, membuat
elemen mengapung di atas elemen lain, atau menetapkan
elemen pada posisi tertentu di dalam kontainer atau di
atas halaman.
Positioning
position: static position: fixed
Elemen dengan nilai Elemen dengan nilai position:
position: static; akan fixed; juga dikeluarkan dari aliran
mengikuti aliran normal normal dan akan tetap berada di
position: relative posisi yang sama bahkan saat
dari elemen-elemen
Elemen dengan nilai position: relative; akan sebelumnya dalam
halaman di-scroll. Ini berguna
untuk elemen seperti menu
tetap berada dalam aliran normal, tetapi Anda dokumen.
navigasi atau elemen yang perlu
dapat menggunakan properti top, right, bottom, tetap terlihat di posisi yang
ditentukan di layar.
dan left untuk menggeser posisinya relatif
terhadap posisi normalnya.
position: absolute;
Elemen dengan nilai position: absolute;
dikeluarkan dari aliran normal dan
ditempatkan berdasarkan posisi elemen
induk yang memiliki nilai position selain
static.
Display
Digunakan untuk mengontrol cara tampilan elemen-
elemen HTML di halaman web. Properti ini memungkinkan
Anda mengubah tipe tampilan elemen dari tipe defaultnya,
sehingga dapat mempengaruhi tata letak dan interaksi
elemen dengan elemen lain di sekitarnya.
Nilai Properti Display
Berurutan (Sequential) Block dan Inline
Elemen-elemen HTML disusun secara Setiap elemen HTML dalam normal flow
berurutan dalam aliran normal dari atas dianggap sebagai elemen block atau
ke bawah. Elemen yang pertama inline, tergantung pada sifat elemen
ditempatkan di atas, diikuti oleh elemen tersebut. Elemen block, seperti <div>,
berikutnya yang berada di bawahnya. <p>, dan heading (<h1>, <h2>, dst.), akan
Urutan ini mengikuti struktur HTML dan menempati seluruh lebar kontainer dan
urutan penempatan elemen-elemen muncul dalam baris baru. Elemen inline,
dalam kode. seperti <span>, <a>, dan teks biasa,
muncul berdampingan dalam satu baris.

Menerapkan Perintah Css-1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Menerapkan Perintah Css-1

Diunggah oleh

Hak Cipta:

Format Tersedia

MENERAPKAN PERINTAH CSS

file style.css file HTML

Properti width dan height digunakan untuk

model yang digunakan untuk menggambarkan struktur

gambar, atau elemen lainnya. Lebar dan tinggi

Tata letak dasar yang digunakan oleh elemen-elemen

Anda mungkin juga menyukai