Sebelumnya kita harus sudah mengenal yang namanya HTML untuk bisa mengenal dan mengetahui CSS. Apa itu CSS ? CSS adalah singkatan dar...
Sebelumnya kita harus sudah mengenal yang namanya HTML untuk bisa mengenal dan mengetahui CSS. Apa itu CSS ? CSS adalah singkatan dari Cascading Style Sheets yang artinya Cascading (Aliran, Pancaran), Style (Gaya), Sheet (Lembar) dan jika disambung menjadi Lembaran Pemancar Gaya. Hehehehehe... Mirip - mirip gitu lah.
Lebih jelasnya, CSS adalah Laman/lembar/bagian yang mengatur bentuk gaya/model laman html/web yang nantinya akan tampil. Mulai dari bentuk dan model tulisan sampai dengan tampilan visual dan animasi. Tanpa Style Sheet ini, tampilan laman Web kita hanya berupa tulisan yang berurut ke bawah tanpa ada tata letak dan bentuk yang baik dan menarik.
Bentuk Umum dalam penulisan Kode CSS adalah sebagai berikut :
selector {
property : value
}
Penjelasannya sebagai berikut :
Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).
#kepala
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.
.bgnisi
Jika anda hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :
.bgnisi h1
Nah, untuk menghemat penulisan kode selector yang memiliki property dan value yang sama maka selektor bisa digabung dan di tulis seperti ini :
Sebelum digabung :
h1{ background-color: #8982f1; }
p { background-color: #8982f1; }
a { background-color: #8982f1; }
Setelah digabung :
h1, p, a { background-color: #8982f1; }
Property adalah Jenis bentuk/model yang akan kita terapkan pada selektor tadi sedang value merupakan nilai/ukuran dari property yang akan kita gunakan.
Contoh :
sebuah selektor "h1" (Headline) dengan Property warna teks (text-color), jenis huruf (text-type), dan ukuran huruf (text-size) menggunakan value warna text "merah", jenis huruf "arial", dengan ukuran teks "24". Maka dapat dituliskan dalam bentuk kode CSS sebagai berikut :
h1 {
text-color : red;
text-type : arial;
text size : 24;
}
Sedangkan dalam penulisannya, CSS dibagi dalam 3 cara/bentuk, yaitu :
Inline : yaitu cara penulisan CSS yang disisipkan dalam tag/elemen laman html terebut
Contoh :
<h1 style = "text-color : red; text-type : arial;text size : 24;">INI ADALAH JUDUL</h1>
Internal : Metode yang ditulis di dalam tag <style>yang ditempatkan dalam tag head.
<HTML>
<head>
<title>Judul HTML</title>
<style>
h1 {
text-color : red;
text-type : arial;
text size : 24;
}
</style>
</head>
...
External : Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.
Pemanggilan file CSS dilakukan dengan menggunakan tag link:
<HTML>
<head>
<title>Judul HTML</title>
<link rel='stylesheet‛ href='fileCSS.css‛ />
</head> ...
Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan alamat css yang kita simpan sebelumnya. Pemanggilannya sama dengan pemanggilan gambar atau link.
Demikian Pengenalan Singkat CSS dari saya. Semoga Membantu......
Lebih jelasnya, CSS adalah Laman/lembar/bagian yang mengatur bentuk gaya/model laman html/web yang nantinya akan tampil. Mulai dari bentuk dan model tulisan sampai dengan tampilan visual dan animasi. Tanpa Style Sheet ini, tampilan laman Web kita hanya berupa tulisan yang berurut ke bawah tanpa ada tata letak dan bentuk yang baik dan menarik.
Bentuk Umum dalam penulisan Kode CSS adalah sebagai berikut :
selector {
property : value
}
Penjelasannya sebagai berikut :
Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).
#kepala
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.
.bgnisi
Jika anda hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :
.bgnisi h1
Nah, untuk menghemat penulisan kode selector yang memiliki property dan value yang sama maka selektor bisa digabung dan di tulis seperti ini :
Sebelum digabung :
h1{ background-color: #8982f1; }
p { background-color: #8982f1; }
a { background-color: #8982f1; }
Setelah digabung :
h1, p, a { background-color: #8982f1; }
Property adalah Jenis bentuk/model yang akan kita terapkan pada selektor tadi sedang value merupakan nilai/ukuran dari property yang akan kita gunakan.
Contoh :
sebuah selektor "h1" (Headline) dengan Property warna teks (text-color), jenis huruf (text-type), dan ukuran huruf (text-size) menggunakan value warna text "merah", jenis huruf "arial", dengan ukuran teks "24". Maka dapat dituliskan dalam bentuk kode CSS sebagai berikut :
h1 {
text-color : red;
text-type : arial;
text size : 24;
}
Sedangkan dalam penulisannya, CSS dibagi dalam 3 cara/bentuk, yaitu :
Inline : yaitu cara penulisan CSS yang disisipkan dalam tag/elemen laman html terebut
Contoh :
<h1 style = "text-color : red; text-type : arial;text size : 24;">INI ADALAH JUDUL</h1>
Internal : Metode yang ditulis di dalam tag <style>yang ditempatkan dalam tag head.
<HTML>
<head>
<title>Judul HTML</title>
<style>
h1 {
text-color : red;
text-type : arial;
text size : 24;
}
</style>
</head>
...
External : Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.
Pemanggilan file CSS dilakukan dengan menggunakan tag link:
<HTML>
<head>
<title>Judul HTML</title>
<link rel='stylesheet‛ href='fileCSS.css‛ />
</head> ...
Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan alamat css yang kita simpan sebelumnya. Pemanggilannya sama dengan pemanggilan gambar atau link.
Demikian Pengenalan Singkat CSS dari saya. Semoga Membantu......
