Mangcoding

icon chat
Mangcoding - Saturday, 4 March 2017 - 7years ago

Pengenalan CSS bagian 1

single image
Photo By Jackson Sophat on Unsplash

CSS singkatan dari Cascading Style Sheets. CSS mendeskripsikan bagaimana elemen HTML ditampilkan pada halaman web atau media lainnya. CSS dapat mempermudah pekerjaan kita dalam mengontrol beberapa layar/blok secara keseluruhan dalam waktu bersamaan.

Kalo kita misalkan HTML itu adalah layout/struktur elemen dari suatu rumah, maka CSS ini adalah warna chat, jenis genteng, texture keramik, dan bahkan posisi lemari.

Link Mangcoding

Mengenal CSS

Dalam suatu kasus, misalnya tetangga sebelah sedang membangun sebuah rumah dengan 3 buah kamar. Kamar tersebut adalah milik Budi, Wati, dan Nina. dalam kasus ini kita memiliki blok/elemen yang bernama kamar. kamar-kamar itu punya id yg berbeda-beda yaitu nama pemilik kamar tersebut.

Dengan adanya penamaan tersebut, kita bisa memberitahu tukang bangunan bahwa kamar Nina dan budi pengen dicat warna biru sedangkan kamar wati pengen dicat warna cream.

Berangkat dari contoh kasus diatas, hal tersebut berlaku untuk pengaturan HTML dan CSS. Untuk memberikan style pada suatu blok/layer kita harus mendefinisikan elemennya terlebih dahulu dengan menggunakan selector.

CSS dapat kita sisipkan ke dalam sebuah tag/elemen HTML dengan 3 cara :

  1. Inline CSS : sintaks CSS disipkan langsung pada tag/elemen yang kita buat dengan menggunakan attribute style
  2. Internal CSS :  sintaks CSS disisipkan pada halaman yang sama dengan menggunakan Tag <style> </style>
  3. External CSS : sintaks css disimpan pada file terpisah berekstensi .css misalnya style.css dan dihubungkan dengan menggunakan tag <link>

Untuk mempermudah memahami CSS diatas, mari kita bahas satu persatu.

Link Mangcoding

Inline CSS

Seperti yang sudah kita sebutkan diatas, CSS dengan tipe ini langsung kita sisipkan pada tag HTML yang kita buat dengan menggunakan attribut style. (jika anda masih bingung apa itu tag dan apa itu attribut silakan masuk ke materi dasar HTML terlebih dahulu).

Contoh : saya mau membuat judul halaman dengan text warna biru dan bergaris bawah tipis. atau memberikan background pada suatu elemen. maka dengan menggunakan inline CSS anda cukup membuat seperti dibawah ini (lihat hasilnya pada tab result)

<h3 style="color:#33567A; border-bottom:solid 1px; text-align:center">
Pelajaran CSS inline
</h3>


<p style="text-align:justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis earum explicabo, repudiandae sed laborum commodi accusantium hic, autem alias, beatae porro excepturi nulla minus vitae voluptatem in debitis iste!
</p>

Contoh lainnya :

<div style="background:#D6E0FE; padding:10px;">
<h3>Contoh File dengan menggunakan background</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis, maxime modi quae temporibus provident pariatur magni minima optio? Magni voluptatem dolore sapiente deserunt. Recusandae blanditiis, molestiae perspiciatis molestias dolore!</p>
</div>

Penjelasan singkat :

Color digunakan untuk membuat warna pada text yang berada pada elemen yang kita seleksi, diisi dengan kode warna.

Untuk mendapatkan kode warna yang mudah, anda bisa menginstall aplikasi Gpick (Open source) untuk pengguna Linux, atau Color scheme (berbayar) untuk pengguna windows, atau bisa juga dengan menggunakan software pengolah design seperti Gimp atau Adobe Photoshop. Kode warna bisa disii dengan:

  • kode valid warna (dalam bahasa inggris) contohnya red, green, blue
  • kode RGB rgb(255, 0, 0) atau rgba (255,255,255, 0.5) ditambah transparancy
  • kode hexa warna 6 digit, contohnya #000000 (Hitam), #CCCCCC (Abu-abu) atau #FFFFFF (Putih), dsb.

Border digunakan untuk memberikan garis pada suatu elemen, diisi dengan jenis border (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden, mix silakan dicoba satu persatu), kemudian diikuti oleh lebar border (1px, 2px, dll) lalu diikuti oleh kode warna.

Selain itu, border pun bisa kita spesifikasikan secara khusus. misalnya border-left, border-right, border-bottom, atau border-top. untuk penjelasan lebih detail mengenai border anda bisa klik link ini,

text-align digunakan untuk memberikan pertaan pada text yang kita buat, diisi dengan left, right, center atau justify.

Background digunakan untuk memberikan latar belakang pada elemen yang kita buat. background bisa langsung diisi dengan menggunakan kode warna seperti pokok bahasan diatas, atau bisa juga dengan menggunakan url gambar.

Khusus untuk backgorund gambar, kita bisa menambahkan repeater secara horizontal atau vertikal dengan pilihan repeat, no-repeat, repeat-x,repeat-y, initial, dan inhherit.

Teknik ini “dulu” sering kita gunakan untuk memberikan efek realism pada design yang kita buat sebelum masuk era flat design. teknik ini digunakan apabila elemen yang kita buat lebih besar dari gambar background yang tersedia, sehingga kita diberikan pilihan untuk melakukan pengulangan secara vertikal/horizontal atau tidak sama sekali.

Selain repeater, bg gambar juga bisa diatur posisinya misalnya saya pengen secara vertikal di tengah dan secara horizontal diatas. untuk memahami lebih lanjut mengenai background kita bisa temui disini

<header style="background:url('http://blog.mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727-1024x478.jpeg') no-repeat center center; padding:50px">
  <h3 style="color:#007EC7;">Welcome to my Site</h3>
  <p style="background:rgba(255, 255, 255, 0.7); padding:5px">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>


<header style="background:url('http://blog.mangcoding.com/wp-content/uploads/2017/01/1368fa8-300x300.jpg') no-repeat left top; padding:50px">
  <h3 style="color:#007EC7; text-align:right">Welcome to my Site</h3>
  <p style="background:rgba(255, 255, 255, 0.7); padding:5px">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>


<header style="background:url('https://duckduckgo.com/assets/logo_homepage_mobile.normal.v107.svg') repeat; padding:50px">
  <h3 style="color:#007EC7; text-align:left">Welcome to my Site</h3>
  <p style="background:rgba(255, 255, 255, 0.7); padding:5px">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>

Padding digunakan untuk memberikan jarak didalam suatu elemen konten. padding berbanding terbalik dengan margin, singkatnya padding kedalam sedangkan margin keluar. perhatikan gambar dibawah ini

Mangcoding Gambar Pengenalan CSS bagian 1

Link Mangcoding

Kesimpulan

Penjelasan mengenai sintaks-sintaks CSS lain akan kita temui pada bahasan-bahasan selanjutnya, atau bisa kita dapatkan penjelasan lengkapnya di https://www.w3.org/TR/CSS21/indexlist.html

Demikian penjelasan singkat untuk pengenalan CSS, mudah-mudahan bermanfaat. Sebetulnya, penggunaan CSS dengan menggunakan teknik inline tidak dianjurkan untuk sering digunakan, dikarenakan membuat struktur HTML jadi terlihat kurang rapi dan kita harus menyisipkan kode CSS satu persatu pada elemen yang akan kita buat.

Oleh karena itu, di pembahasan selanjutnya, kita akan belajar bagaimana CSS  di susun lebih rapi dengan menggunakan selector yang akan di impelementasikan pada internal dan external CSS.

Itulah artikel Pengenalan CSS bagian 1 yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Keep Learning ^_^ dan Semangat.

Link Copied to Clipboard