Halo semua sahabat setia Kumpulan Tutorial Website , saya ingin membagikan kepada anda sebuah tutorial CSS yang sangat penting anda kuasai dalam pembuatan website yang dinamis dan bagus untuk dilihat. Seperti yang kita tahu, dalam mendesign website, kita amatlah membutuhkan Code CSS , tanpa CSS , Website yang kita buat seolah-olah tidak berwarna atau tidak berseni sama sekali. Makara sanggup kita simpulkan bahwa tutorial CSS kali ini sangatlah mempunyai kegunaan bagi kita semua terutama bagi para pemula . Oke eksklusif saja .
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :
Selector itu untuk mengatakan bab mana yang hendak diatur / diformat.
Property untuk menunjukkan, bab (properti) dari selector yang hendak diatur.
Value yakni nilai dari pengaturannya.
Contoh Syntax:
Dari pola di atas sanggup kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Anda sanggup menulis satu arahan CSS untuk banyak sekali macam selector dengan cara memakai koma. Misalkan anda mau mengatur semoga tag h1, h2 dan h3 semua memakai warna merah, maka arahan CSS nya menjadi:
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
Pada pola di atas, tag h1, h2 dan h3 di atur semoga memakai warna merah, dengan type font arial, dan ukuran font 150%.
Sangat disarankan untuk menulis arahan CSS memakai beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan semoga terlihat rapi.
Sekarang anda sudah mengerti hukum dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan arahan CSS ke halaman website.
Kenapa kita perluh mencar ilmu membuat comment dalam CSS ? alasannya alasannya yakni kadang kala, ada baiknya anda menuliskan komentar ke dalam arahan CSS anda untuk memberi catatan pengingat.
Anda sanggup memakai syntax pembuka /* dan epilog */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
Ada 4 cara memasang arahan CSS ke dalam arahan HTML / halaman web, yaitu:
Penasaran ? ,, Mari kita bahas satu per satu :
1. Inline CSS
Kode CSS dituliskan eksklusif ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam arahan CSS.
Cara ini sebaiknya hanya dipakai bila anda mau memformat suatu elemen satu kali saja.
Contoh:
Pada pola di atas, elemen paragraf <P> di format semoga tulisannya memakai warna biru. Elemen paragraf lain, tidak akan memakai warna biru, alasannya yakni format ini hanya berlaku pada elemen paragraf yang ditentukan arahan CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: kemudian di ikuti dengan syntax property: value.
2. Embedded CSS
Anda sanggup juga menempelkan arahan CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:
Dalam pola di atas semua elemen <P> dalam halaman web tersebut akan diformat memakai font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda kemudian perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu mempunyai satu set arahan CSS yang dipakai untuk semua halaman web anda. Makara ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
4. Import CSS
Anda sanggup juga meng-import CSS ke dalam suatu halaman website memakai tag import.
Contoh:
atau
@import url(“style.css”);
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu arahan CSS untuk satu elemen, maka yang akan dipakai yakni arahan yang lebih spesifik.
Misalkan dalam satu halaman web, memakai eksternal style sheet untuk memformat elemen H1 sebagai berikut:
Sementara di halaman web yang sama, di antara tag <head> ada arahan CSS sbb:
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus menyerupai ini, maka yang akan aktif yakni arahan yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam pola di atas, arahan yang akan diimplementasikan yakni sebagai berikut :
CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bab atas posting ini , yang di tulis yakni selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat arahan CSS untuk tag <h1>. Sekarang bagaimana bila anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus menyerupai ini, anda sanggup memakai Class selector dan ID selector.
Class selector yakni penggabungan beberapa properties yang dipakai lebih dari satu kali.
Cara penulisan Class Selector:
Untuk menempelkan class ke dalam tag HTML:
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin memakai class selector di luar arahan HTML anda memakai tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan arahan CSS:
Pemakaian arahan CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasilnya bila di jalankan pada browser yakni :
ID Selector menyerupai dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bab yang hanya muncul satu kali dalam satu halaman web, contohnya untuk memformat bab sajian / sidebar.
Cara penulisan ID Selector:
Untuk menempelkan ID selector ke dalam tag HTML:
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin memakai class selector di luar arahan HTML anda memakai tag <div id=nama-ID> dan di akhiri dengan tag </div>.
CSS sanggup memformat font dengan banyak sekali macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.
Kalau anda biasa memakai ms word atau aplikasi lainnya dimana anda sanggup merubah jenis / tipe font, niscaya anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan memakai hanya nama-nama font default
Contoh penulisan:
Hasilnya bila dijalankan di browser :
Properti font variant dipakai untuk menampilkan font dalam abjad kapital kecil. Makara semua abjad non kapital akan bermetamorfosis abjad kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font sanggup memakai properti ini.
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
Hasilnya bila dijalankan pada browser :
Sekian dulu ya tutorial CSS dari saya ,, dah pegal tangan ini ngetiknya , hehehe . Jangan lupa share atau komentarnya ya . Salam sukses bagi para programer.
Aplikasi web merupakan salah satu media yang tepat untuk memberikan informasi kepada warga atau masyarakat…
Aplikasi Sistem Informasi Akedemik Sekolah menggunkan PHP MySQl atau berbasis web ini merupakan sebuah sebuah…
Pada kesempatan ini saya kembali membagikan buat anda pencinta aplikasi berbasis web yaitu source kode…
Buat sobat semua yang lagi membutuhkan sedikit pencerahan tentang membuat website sistem pendaftaran online, pada…
Aplikasi Penjualan Sepeda Motor berbasis web ini adalah merupakan aplikasi untuk memberikan kemudahan dalam proses…
Pada kesempatan ini kami kembali mensharing koleksi Aplikasi Perpustakaan Menggunakan Bahasa Pemrograman PHP dan Basisdata…