Tag: Internal CSS

Photo by Jeffrey Leung on Unsplash

Sebelum kita membahas CSS selector, pada materi sebelumnya kita sudah mengetahui bahwa aturan penulisan sintaks CSS adalah sebagai berikut

(source : https://www.w3schools.com/css/css_syntax.asp)

Dari gambar diatas, Selector berfungsi untuk memilih atau menyeleksi elemen mana yang akan kita atur, sedangkan declaration adalah sintaks CSS yang kita sisipkan yang terdiri dari nama properti dan value dari properti tersebut. Jika kita ingin menyisipkan beberapa deklarasi CSS, maka pisahkan dengan titik koma(;).

Jika kita masih belum paham fungsi selector, coba pahami analogi dibawah ini.
Ketika kita menyuruh tukang bangunan untuk mengecet dinding rumah kita, maka kita harus menjelaskan dinding sebelah mana yang mau dicat, karena dinding rumah itu bisa di dapur, di kamar, di bagian tengah, dll. begitu pula dengan elemen HTML. sebelum membuat CSS, kita dianjurkan untuk menyusun elemen HTML nya terlebih dahulu. lalu setelah itu satu persatu kita atur elemen mana yang akan kita rubah tampilannya, geser posisinya, sisipkan backgorund, dll dengan menggunakan CSS selector

CSS Selector digunakan untuk memilih atau menyeleksi elemen html yang akan kita atur CSS nya berdasarkan pada :

  • nama element (by Tag) contohnya h1, p, div, header, section, dll.
  • id dari suatu elemen (by ID) contohnya <section id=”home”>, <section id=”profil”>, dll.
  • class dari suatu elemen (by Class) contohnya <article class=”nobg”>, <article class=”no-padding”>, dll.
  • attribute dari suatu elemen selain id dan class (by Attribute name) contohnya <input type=”text” ../>, <input name=”phone” />
  • berdasarkan event tertentu misalnya pada saat tombol di hover (:hover) pada saat checbox di checked (:checked)
  • dan masih banyak lagi yang lainnya selama css masih dikembangkan dan disesuaikan dengan perkembangan teknologi

Untuk memahami semua selector diatas, mari kita praktekkan satu persatu.

Link MangcodingTag/Elemen Selector

Selector ini menyeleksi suatu elemen berdasarkan nama tag yang kita pakai untuk menulis elemen tersebut. contohnya kita mengiginkan bahwa untuk setiap judul yang kita tulis ingin bergaris bawah, dan tulisannya huruf kapital. sedangkan untuk paragraf yang kita buat agak menjorok ke dalam.

Kadang-kadang, meskipun kita menggunakan elemen yang sama kita ingin memberikan pengaturan yang berbeda. Kita tidak mungkin untuk mengatur berdasarkan tag tersebut, dikarenakan tag tersebut digunakan ditempat yang lain dengan bentuk yeng berbeda. oleh karena itu, ada cara lain dalam menyeleksi suatu elemen yaitu dengan menggunakan ID atau Class pada elemen tersebut.

Link MangcodingID Selector

  • ID selector menggunakan attribut id pada elemen HTML untuk menyeleksi elemen tersebut.
  • ID pada tiap elemen harus unik, jadi ID Selector digunakan untuk menyeleksi elemen yang unik.
  • Untuk menyeleksi id pada suatu elemen gunakan karakter hash(#) lalu diikuti dengan nama id yang kita tulis pada elemen tersebut.

Link MangcodingClass Selector

  • Class selector menggunakan attribut class pada elemen HTML untuk menyeleksi elemen tersebut.
  • Untuk menyeleksi class pada suatu elemen gunakan karakter dot(.) lalu diikuti dengan nama class yang kita tulis pada elemen tersebut.

Untuk memahami selector dengan ID dan Class perhatikan contoh dibawah ini

Link MangcodingPerbedaan antara ID dan Class

  • ID seharusnya Unique
    • Dalam 1 elemen hanya boleh memiliki 1 ID
    • Dalam 1 document tidak boleh ada ID yang sama
    • Meskipun kita memakai id yang sama dan tetap ditoleransi oleh browser, namun jika kita menggunakan javascript, maka yang terbaca hanya satu elemen atau bahkan tidak sama sekali.
  • Class tidak Unique
    • Dalam 1 elemen boleh memiliki multi class
    • Class yang sama bisa digunakan di semua elemen meskipun dalam document yang sama

Selain menggunakan ke 3 selector diatas, kita pun bisa melakukan pengaturan berdasarkan nama attribut atau berdasarkan event tertentu. contohnya saya ingin merubah semua inputan bertipe text dan textarea. atau saya ingin merubah background button menu ketika di hover. Perhatikan contoh dibawah ini :

Demikian Penjelasan mengenai CSS Selector dan contoh implementasinya. mudah-mudahan bermanfaat bagi kita semua. jika ada pertanyaan terkait materi ini, atau ada yang tidak paham dengan sintaks-sintaks baru yang saya tulis diatas, silakan kirim komentar pada kolom dibawah artikel ini.

Keep Learning
Semangat ^_^

Tag: Internal CSS

Photo by Ferenc Almasi on Unsplash

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Link MangcodingInternal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>.

Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

<html>
    <head>
        <meta charset="UTF-8">
        <title>tes HTML</title>
        <style>
            header {
                background: url('https://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727.jpeg') 
                           no-repeat center center;
                padding: 50px;
            }
            h2 {
                color: #007EC7;
                text-align: center;
            }
            .subtitle {
                background: rgba(255, 255, 255, 0.7);
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>Welcome to my Site</h2>
            <p class="subtitle">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aut,
 nesciunt eaque ullam. Quasi, laudantium optio enim. Sequi, eaque quod. Voluptatum vero 
rerum, assumenda itaque totam consequatur dicta dolore.</p>
    </body>
</html>

 

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web.

CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

Link MangcodingExternal CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>.

Penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

  1. Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
  2. pada tagbuatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.
<head>
  <meta charset="UTF-8">
  <title>External HTML</title>
  <link rel="stylesheet" href="style.css"/>
</head>

 

Seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector? Berapa banyak tipe selector? Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^ Semangat

Itulah artikel Pengenalan CSS bagian 2 (Internal dan External CSS) 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.

Tag: Internal CSS

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.

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 MangcodingInline 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)

Contoh lainnya:

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

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

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.