Dasar CSS: Dalam sebuah file HTML terdapat beberapa pengodingan untuk menyempurnakan tampilan dari sebuah halaman web, salah satu diantaranya adalah CSS.
CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah untuk memanipulasi kode html, sehingga dengan atribut atribut CSS tampilan halaman sebuah web akan terlihat lebih indah dan rapi.
Penulisan tag dan atribut CSS dalam kerangka HTML tidak semuanya sama, tergantung dari programernya menggunakan cara yang mana, maka dalam memudahkan sobat tehnosia dalam mengedit templet dari sebuah website ada baiknya terlebih dahulu mengenali beberapa cara penempatan syntax CSS dalam sebuah HTML.
Ada 3 cara penulisan CSS dalam HTML yang lazim digunakan oleh para programer, yaitu :
A. Eksternal CSS
Seperti namanya, penempatan kode CSS pada metode ini berada pada file yang berbeda, artinya penulisan tag dan atribut CSS tidak berada dalam satu kerangka HTML itu sendiri, melainkan ditulis pada file style sheet tersendiri dengan ekstensi .css .
Sebagai contoh, kita buat sebuah file CSS dengan nama "tehno-style.css"
#judul{
color: orange;
font-family: sans-serif;
text-align: center;
}
p{
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: justify;
}
#kotak{
width: 100px;
color: #fff;
background: blue;
text-align: center;
padding: 2px;
Untuk menjalankan semua perintah dalam file diatas, scrib harus dipanggil kedalam kode html, ada dua cara yang bisa dilakukan untuk menautkan file .css ini dengan file .html, yaitu :
1. Menggunakan tag "" pada file html untuk memanggil file CSS.
Berikut kode yang harus sobat tempatkan pada file html
2. Menggunkan kode @impor pada file html untuk memanggil file CSS.
@import "tehno-style.css";
Note : Kedua file diatas [pilih salah satu yang sobat mau] diletakkan diantara tag dan biasanya tepat dibawah title.
Jika dilihat dalam tampilan file html posisi penempatannya akan terlihat seperti dibawah ini :
Contoh Penulisan dalam File HTML
@import "tehno-style.css";
Belajar CSS di BlogTehnosia
Paragraf 1 berisi Artikel
Paragraf 2 berisi Artikel
Contoh Kotak
B. Internal CSS
Dikenal juga dengan sebutan Embeded CSS, internal css bisa dikatakan kebalikan dari eksternal css, karena tag dan atribut dari Internal CSS diletakkan langsung dalam file html dalam tag diantara tag dan
Contoh seperti pada file html dibawah ini :
Contoh Penulisan dalam File HTML
#judul{
color: orange;
font-family: sans-serif;
text-align: center;
}
p{
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: justify;
}
#kotak{
width: 100px;
color: #fff;
background: blue;
text-align: center;
padding: 2px;
Belajar CSS di BlogTehnosia
Paragraf 1 berisi Artikel
Paragraf 2 berisi Artikel
Contoh Kotak
C. Inline CSS
Sekilas sama dengan internal CSS berada dalam file yang sama dengan html, namun pada inline CSS ini penulisan tag beserta dengan atributnya, langsung ditempatkan pada setiap atribut elemen HTML. Sehingga model penulisannya bisa di lihat pada contoh berikut :
Contoh Penulisan dalam File HTML
Belajar CSS di BlogTehnosia
Paragraf 1 berisi Artikel
Paragraf 2 berisi Artikel
Contoh Kotak
Tampilan penerapan dari ke 3 cara penulisan kode CSS diatas adalah seperti tampak dibawah ini :
Bukan Blogger Master, hanya seorang Newbie yang senang seputar "Gadget" dan "Technology". Belajar ngeblog secara otodidak
Tertap Terhubung dengan Kami
Face Book-IG-Twitter
! Support Kami Di
!
Trakteer Kami