Cara penulisan CSS dalam website design
Cascading Style Sheets (CSS) adalah kumpulan batasan (Rule) untuk memformat dan mengendalikan tampilan isi suatu halaman website (webpage). Penempatan rule (code) style CSS diletakkan terpisah dari isi halaman kode HTML. Isi halaman yaitu berupa code HTML diletakkan dalam file HTML, sedangkan code style CSS dapat berupa file lain, yaitu file .css atau bisa juga sebagai salah satu bagian dari file HTML yang ditaruh dalam tag <head>. Cara penulisan code (coding) dapat dilihat di Mengenal Coding HTML-CSS-dan Javascript
Dengan kata lain ada 2 jenis style CSS, yaitu CSS yang bersifat internal dan CSS bersifat eksternal.
Style CSS eksternal dalam penulisan HTML website
Penulisan style CSS eksternal (disimpan dalam file .css) dijelaskan sebagai berikut :
- Dihubungkan dengan LINK, sehingga lebih mudah melakukan edit.
- Jika ingin melakukan perubahan format halaman web, cukup dilakukan perubahan pada file .css. Maka halaman web yang terhubung dengan file tersebut akan berubah.
- Kelebihan CSS eksternal, yaitu memungkinkan diterapkannya banyak fitur untuk halaman website dengan syntaks – atau penulisan rules – sederhana dan mudah dipahami. Akan lebih mudah dipahami, jika Anda familiar terbiasa dengan konsep penggunaan style pada program pengolah-kata seperti microsoft word.
- Penggunaan style CSS eksternal lebih menghemat waktu dan lebih mudah mengedit tampilan webs. File .css fungsinya seperti master untuk halaman website. Maksudnya jika ingin mengubah seluruh halaman website, maka cukup mengubah file .css saja, tanpa perlu mengedit satu per satu halaman web. Sebab sekali ditulis rule (batasan-batasannya) maka akan berlaku untuk seluruh website.
- Loading time website page lebih cepat karena size file tiap webpage menjadi lebih kecil.
- Style CSS eksternal memungkinkan dihasilkan efek yang lebih beragam, sehingga memungkinkan untuk lebih mempercantik tampilan web yang kemungkinan itu tidak dapat diperoleh dari HTML.
Kekurangannya :
Beberapa kode CSS berjalan baik pada suatu browser tetapi tidak untuk semua browser.
Beberapa kode CSS berjalan baik pada suatu browser tetapi tidak untuk semua browser.
Style CSS internal Penulisan HTML website
Penulisan batasan-batasan (Rules) pada style CSS internal diletakkan pada file HTML – tepatnya di bagian tag <head>
Kekurangannya :
Jika ingin dilakukan perubahan format pada halaman-halaman website, maka harus dilakukan banyak pengeditan pada semua file.
Jika ingin dilakukan perubahan format pada halaman-halaman website, maka harus dilakukan banyak pengeditan pada semua file.
DASAR-DASAR CSS
Bagian ini mengulas proses kerja style CSS. Instruksi CSS diberikan dalam bentuk rules (batasan-batasan). Lalu lembar style akan mengumpulkan rules tersebut.
Rules adalah pernyataan yang diciptakan oleh HTML dan disebut sebagai SELECTOR yang dinyatakan dalam bentuk PROPERTY dan VALUE.
CONTOH :
h1 { color: red;} ditulis dengan cara lain menggunakan kode warna h1 { color: #F00;}
Selector h1, property color dan value = red
Efeknya semua judul artikel (teks tag h1) berwarna merah.
Selector h1, property color dan value = red
Efeknya semua judul artikel (teks tag h1) berwarna merah.
DECLARATION
Deklarasi dalam bentuk paling sederhana seperti contoh diatas, yaitu satu selector terdiri dari beberapa pasangan property dan value. Web designer sering harus mengubah beberapa property style sekaligus dalam satu selector, dimana setiap property dipisahkan oleh ‘;’ (titik-koma). Dengan kata lain pengelompokan property dalam deklarasi menggunakan tanda ‘;’ sebagai pemisah.
CLASS
DIV
Declaration (deklarasi) ialah Property CSS dan kesatuan beberapa VALUE yang mendukungnya.
h1 {
color: red;
font-family: helvetica, sans-serif, verdana;
text-align: center;
font-size: 16px;
font-weight: bold;
}
color: red;
font-family: helvetica, sans-serif, verdana;
text-align: center;
font-size: 16px;
font-weight: bold;
}
Kita juga dapat melakukan pengelompokan selector seperti juga pada deklarasi dan untuk pemisahan antar-selector diguanakan tanda ‘,’ (koma).
h2, p, …, …, … {
color: white;
font-family: arial;
text-align: left;
font-size: 12px;
}
color: white;
font-family: arial;
text-align: left;
font-size: 12px;
}
CLASS
Penggunaan Class dimaksudkan untuk menggunakan kembali tag HTML yang tersedia (bisa berulangkali digunakan). Artinya, Anda bisa memiliki beberapa style paragraf copyright berbeda yang diletakkan di beberapa tempat. Ini merupakan salah satu kelebihan CSS dan langkah yang tepat untuk menghasilkan website design yang konsisten. Nama class selalu diawali tanda ‘.’ (titik). Sebagai contoh Class bernama catatan (digunakan untuk mengatur text copyright.
.catatan {
font-family: Helvetica, sans-serif;
font-size: 10PX;
>}
font-family: Helvetica, sans-serif;
font-size: 10PX;
>}
CATATAN :
Kekuatan sebenarnya style CSS adalah Custom Selector dan Class salah satu diantaranya.
Kekuatan sebenarnya style CSS adalah Custom Selector dan Class salah satu diantaranya.
DIV
Tag custom ini disebut juga ID Selector hanya digunakan untuk elemen tunggal, seperti tag <div> yang memuat isi footer atau sidebar. Sebuah ID Selector diterapkan pada tag yang benar-benar memiliki atribut id. Nama DIV selalu diawali dengan tanda ostotroph (#).
#footer {
color: white;
background: black
border: thin solid red;
color: white;
background: black
border: thin solid red;
Tag custom ini misal diterapkan pada :
CATATAN :
Anda dapat menggunakan kombinasi CLASS dan DIV dalam file HTML atau XHTML ketika membuat layout halaman website.
Anda dapat menggunakan kombinasi CLASS dan DIV dalam file HTML atau XHTML ketika membuat layout halaman website.
That's all we know
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
