CSS Dasar

 CSS DASAR

    CSS adalah singkatan dari Cascading Style Sheets yang merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan dan format website.
    CSS memiliki beberapa fungsi, di antaranya: Membuat tampilan website lebih menarik, Memisahkan konten dari tampilan visual website, Membuat tampilan website rapi dan optimal di berbagai ukuran layar, Memudahkan pengelolaan kode, Mempercepat loading halaman web.

Inline CSS

Inline CSS adalah metode menambahkan CSS langsung ke dalam elemen HTML
Contoh:

Internal CSS

Berbeda dengan inline CSS yang diterapkan di elemen individu, internal CSS ditempatkan di dalam tag < style > yang berada di bagian < head > dari dokumen HTML
Contoh:


Eksternal CSS

External CSS adalah metode di mana kamu menyimpan semua CSS rule dalam sebuah file terpisah dengan ekstensi .css dan menghubungkannya dengan halaman HTML menggunakan elemen < link > yang berapada di <head>
contoh:




Komment di CSS

Komentar digunakan untuk menjelaskan kode, dan dapat membantu saat Anda mengedit kode sumber di lain waktu dan komentar diabaikan oleh browser.
Komentar CSS ditempatkan di dalam elemen <style>, dan dimulai dengan /* dan diakhiri dengan */
Contoh:

ID di CSS

ID di CSS adalah selektor yang digunakan untuk mengidentifikasi elemen tunggal dalam HTML. ID berfungsi sebagai penanda unik dari sebuah elemen dan hanya boleh ada satu dalam suatu halaman HTML. 
Untuk menandai elemen dengan ID selector, Anda dapat menggunakan tanda pagar (#) sebelum nama ID. Sebagai contoh, jika Anda memiliki elemen dengan ID "judul", maka penulisannya adalah #judul
Contoh:


Class di CSS

Class di CSS adalah selektor yang digunakan untuk memberikan style pada beberapa elemen sekaligus. Class merupakan kebalikan dari ID, yang hanya digunakan untuk mengidentifikasi single element di HTML. Class selector diawali dengan tanda titik (.)
Contoh:


Multiple Class di CSS

Multiple class di CSS adalah cara untuk menerapkan efek pada lebih dari satu kelas sekaligus. Untuk melakukannya, Anda bisa menggunakan nama-nama kelas yang diinginkan di dalam tag, seperti halnya ketika menggunakan satu kelas.
Contoh:


Universal Selector di CSS

Universal selector di CSS adalah tanda bintang (*) yang digunakan untuk menargetkan semua elemen dalam dokumen HTML.
Contoh: 


Group Selector Di CSS

Group selector pada CSS adalah cara untuk memilih beberapa elemen HTML sekaligus dan memberikan style yang sama kepada elemen-elemen tersebut. Untuk menggunakan group selector, pisahkan setiap selector dengan tanda koma.
Contoh: 


Color Di CSS

Ada beberapa cara menggunakan color di css:
1. nama warna telah ditetapkan sebelumnya dalam spesifikasi warna HTML dan CSS. misalnya: blue, red, coral, brown, dll
2. Nilai warna RGB ditentukan dengan fungsi rgb() , yang memiliki sintaksis rgb(red, green, blue)
3. Warna heksadesimal ditentukan dengan: #RRGGBB, di mana bilangan bulat heksadesimal RR (merah), GG (hijau), dan BB (biru) menentukan komponen warna. Semua nilai harus berada di antara 00 dan FF.
4. Nilai warna HSL ditentukan dengan fungsi hsl() , yang memiliki sintaksis hsl(hue, saturation, lightness)

Contoh:



Github saya RafliMaftuh

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar HTML Dasar Part 5 - Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML Pengetian Link Link dalam HTML adalah bagian dari web development yang berfungsi untuk menghubungkan satu halaman dengan halaman lain atau ke website lain. Link HTML juga dikenal sebagai hyperlink, link HTML dapat berupa teks, gambar, atau elemen HTML lainnya. Tag a Untuk membuat link HTML, Anda bisa membungkus teks atau konten lain di dalam elemen <a> dan menggunakan atribut href yang berisi lokasi tujuan link tersebut, Tag a juga memiliki attribute target yang digunakan sebagai target jendela Web Browser, kita bisa gunakan nilai target=”_self”, artinya halaman akan ditampilkan di halaman yang sama, ini adalah bawaan default, kemudian target=”_blank”, artinya halaman akan ditampilkan di jendela baru di Browser, Tag a juga memiliki attribute title, untuk menuliskan judul yang keluar ketika mouse berada di atas Link tersebut Absolute URL Saat kita menulis halaman tujuan dari href di Link, kita bisa menggunakan absolute U...
Baca selengkapnya

Belajar Flex Box di HTML

Gambar
 Belajar Flex Box di HTML Pengertian Flexbox      Flexbox adalah sebuah konsep layout atau mode pengaturan dalam CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web, Flexbox memungkinkan pengaturan layout, posisi, dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis, nama Flexbox diambil dari kata flexibel yang berarti mudah diatur, disesuaikan, dan ditukar-tukar. Latihan 1. Flex Wrap     Buat file latihanflexbox.html dan style.css     Hasil untuk flex-wrap : wrap     tampilan akan turun kebawah jika jendela diperkecil      Hasil untuk  flex-wrap : nowrap           Dengan nowrap, semua item flex akan mencoba untuk menyesuaikan diri dalam satu baris atau kolom. Jika ruang tidak cukup, item-item akan mengecil dan menyesuaikan diri.      Hasil untuk  flex-wrap : wrap-reverse      ...
Baca selengkapnya