Home CSS Sekilas Tentang CSS

Sekilas Tentang CSS

Sekilas Tentang CSS

CSS atau Cascading Style Sheet adalah sebuah teknologi internet yang menjadikan sebuah website menjadi lebih indah. Dengan CSS akan lebih praktis untuk mengubah style element seperti warna, font dan tampilan dari keseluruhan website. Dan juga halaman website tidak terlalu dibebani dengan banyaknya script-script dari element html tersebut. Dengan adanya CSS kita tidak perlu mengetikkan berulang-ulang seluruh perintah pemformatan.

pengertian dan fungsi css


Perkembangan CSS telah dimulai pada tahun 1996 direkomendasikan oleh World Wide Web Consortium atau W3C. Setelah CSS distandarisasikan, Internet Explorer melepas browser terbarunya yaitu Internet Explorer 3 yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. Lalu disusul Netscape yang juga telah mengindikasikan bahwa mereka akan mendukung Style Sheet pada versi-versi terbaru browsernya.


Sampai saat ini ada tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.

Kelebihan CSS

Adapun beberapa kelebihan CSS adalah sebagai berikut:

  1. Memisahkan desain dengan konten halaman web.
  2. Mengatur desain sefisien mungkin.
  3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
  4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
  5. Lebih mudah didownload karena lebih ringan ukuran

Aturan Penggunaan CSS

Secara umum ada 3 bagian dalam penulisan CSS, yaitu:
  • Selector yaitu elemen yang akan didefinisikan
  • Properti yaitu atribut yang akan dirubah dan
  • Nilai (Value)
Contoh Penulisannya:

Selector { Properties : Value; }

Selector digunakan untuk menentukan element mana yang akan diatur stylenya. Antara properti dan nilai dipisahkan dengan titik dua seperti contoh dibawah:

Body { color : black; }

Jika nilai berupa beberapa kata gunakan tanda petik ganda, contoh:

P { font-family: "sans serif"; }

Apabila properti lebih dari satu, pisahkan dengan titik koma, contoh:

P { text-align: center;  
 color: black;  
 font-family arial; }

Jika selector dikelompokkan, contoh:


 H1, H2, H3, H4, H5, H6  
 {  
 color: green;  
 }


Style Sheet dapat digunakan dengan 3 cara, yaitu Style Sheet External, Style Sheet Internal dan Style Sheet Inline.

Style Sheet External

Style Sheet External yaitu membuat link dari dokumen HTML menuju file Style Sheet. Dengan metode ini memungkinkan kita mengubah style sejumlah halaman web dengan hanya mengedit satu file Style Sheet.

Sekarang perhatikan contoh dibawah, copi dan paste pada notepad sobat

<!DOCTYPE html>  
 <html>  
 <head>  
  <link rel="stylesheet" href="styles.css">  
 </head>  
 <body>  
 <h1>Ini adalah heading</h1>  
 <p>Ini adalah paragraph.</p>  
 </body>  
 </html>

Simpan file tersebut dengan nama index.html. Lalu lanjutkan dengan script dibawah dan simpan sebagai style.css

body {  
   background-color: lightgrey;  
 }  
 h1 {  
   color: blue;  
 }  
 p {  
   color:green;  
 }

Style Sheet Internal

Style Sheet Internal kita buat dengan cara menyisipkan Style Sheet pada file HTML. Contoh:

<!DOCTYPE html>  
 <html>  
 <head>  
 <style>  
 body {background-color:lightgrey;}  
 h1  {color:blue;}  
 p  {color:green;}  
 </style>  
 </head>  
 <body>  
 <h1>This is a heading</h1>  
 <p>This is a paragraph.</p>  
 </body>  
 </html>

Style Sheet Inline

Style Sheet Inline dibuat dengan cara  menyisipkan secara inline pada tag dalam file HTML. Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada halaman web.
Contoh:

<!DOCTYPE html>  
 <html>  
 <body>  
 <h1 style="color:blue;">This is a Blue Heading</h1>  
 </body>  
 </html>

Style inline ini hanya bisa diterapkan pada lokasi yang sangat spesifik, walaupun penggunaan dengan metode ini dapat kita lakukan tapi sangat tidak dianjurkan…

Baca Juga Cara Membuat Menu Navigasi Responsive Sederhana Dengan HTML dan CSS
Demikian Tutorial Sekilas Tentang CS, Semoga Bermanfaat

More From Author