Mengenal CSS

Apa itu CSS
CSS (Cascading Style Sheet) merupakan sebuah pengembangan dokumen yang mendukung HTML di dalam mendesain suatu website. CSS bukan merupakan bahasa pemrograman seperi java script, delphi, dan C+ melainkan sebuah desain yang berbasiskan scriptting yang di-embed (disisipkan) pada kode HTML.
CSS digunakan untuk mengelompokkan blok perintah yang terjadi berulang-ulang dengan membuat blok kategori sesuai kebutuhan sehingga akan membantu mempercepat dan mempermudah desain website. Dengan menggunaknan CSS, kita tidak perlu mengulang-ulang kode yang sama karena sebelumnya telah dikategorikan berdasarkan kelompok masing-masing.
Penulisan CSS diawali dengan tanda "{" dan diakhiri dengan tanda "}" dan setiap deklarasi di dalam suatu sub categori harus diakhiri dengan tanda ";". Setiap blok kategori tersebut diawali dengan tanda '#' atau "." (titik) kecuali kode-kode yang telah umum dalam HTML seperi "p", "table", "h1...h6", "a", dan lain-lain.
Penulisan kode CSS ada dua cara, yang pertama disisipkan langsung di dalam kode HTML dan yang kedua adalah dengan menulis kode CSS tersebut pada file yang terpisah yang nantinya file CSS tersebut dipanggil dalam HTML. Penulisan code CSS pada file yang berbeda ini cara menyisipkan (memanggil) file CSS tersebut adalah seperti dua cara di bawah ini :

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="style.css" type="text/css" />

Style.css adalah nama file CSS yang nantinya harus diupload bersama-sama dengan file index. Penulisan CSS pada file yang terpisah akan lebih sederhana dan lebih memudahkan pembuatan suatu website. Pada saat membuat kode-kode CSS. Setiap blok kategori CSS sebaiknya diberi nama yang sesuai dengan desain website untuk memudahkan pengeditan nantinya, contoh :

Blok kategori header diberi nama #header {......} atau .header {......}
Blok kategori logo diberi nama #logo {......} atau .logo {......}
Blok kategori artikel diberi nama #artikel{......} atau .artikel {......}
Blok kategori footer diberi nama #footer {......} atau .footer {......}
Blok kategori sidebar diberinama #sidebar {.......} atau .sidebar {......}
Dan seterusnya (terserah anda)

Tanda {.......} maksudnya ada beberapa kode di dalam tanda kurung tersebut yang disesuaikan dengan kebutuhan. Perbedaan penggunaan tanda pagar (#) dan titik (.) akan saya bahas pada potingan selanjutnya.
Penulisan kode CSS yang diawali dengan tanda pagar (#) nantinya akan disisipkan dalam kode HTML seperti di bawah:

<div id="header"> ........</div>,
<div id="footer">......</div>,
<div id="sidebar">......</div>, dan seterusnya,

Sedangakan kode CSS yang diawali dengan tanda titik(.) akan disisipkan seperti ini :

<div class="header">......</div>,
<div class="footer">......</div>,
<div class="sidebar">......</div>, dan seterusnya.

Contoh Penulisan CSS yang disisipkan langsung dalam kode HTML:

Setiap paragraph akan menggunakan huruf arial, warna merah ukuran huruf 12px, align left
Setiap heading h1 akan menggunakan huruf bold, arial, warna biru, ukuran huruf 16px

Penulisan kodenya sebagai berikut :

<html>

   <head>
   <title>BELAJAR CSS DASAR</title>
   <style type="text/css">

   .style1 {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   color: #0000ff;
   }

   .style2 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #ff0000;
   }
</style>
</head>

<body>
<h1 class="style1">Judul 1</h1>
<p class="style2">pargraph ke satu</p>
<p class="style2">paragraph kedua</p>
    <p class="style2">pargraph ketiga</p>
<h1 class="style1">Judul 2 </h1>
<p class="style2">pargraph A </p>
<p class="style2">paragraph B </p>
<p class="style2">pargraph C </p>
    <p class="style2"> </p>
</body>

</html>

Tampilan setelah diposting :

Judul 1

pargraph ke satu

paragraph kedua

pargraph ketiga

Judul 2

pargraph A

paragraph B

pargraph C

Contoh lain :

<html>

<head>
<title>DASAR-DASAR CSS</title>
<style type="text/css">
.header {
            font-size: 18px;
            color: #FF0000;
            font-family:Arial, Helvetica, sans-serif;
            font-weight:bold;
}
.artikelatas {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12px;
           color: #009900;
    }
.artikelbawah {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #0033FF;
          font-style: italic;
}
#footer {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 10px;
          color: #00000;
          font-weight:bold;
}

</style>

</head>
<body>
          <p class="header">PENULISAN CSS</p>
          <p class="artikelatas">Paragraph ini mengunakan font arial dengan warna hijau </p>
          <p class="artikelatas">Ukuran font untuk pargraph ini 12 px</p>
          <p class="artikelatas">Font Family pada paragraph ini adalah arial, </p>
          <p class="artikelatas">Sedagkan judul heding1 (h1) menggunakan huruf tebal</p>
          <p class="artikelatas">Dengan font arial warna merah dan ukuranya 18px. </p>
          <p class="artikelbawah">Paragraph ini mengunakan font arial dengan warna biru </p>
          <p class="artikelbawah">Ukuran font untuk pargraph ini 14 px italic (miring) </p>
          <p class="artikelbawah">Font Family pada paragraph iniadalah arial, </p>
          <div id="footer">
               <p>Tulisan ini adalah terletak pada blok kategori Footer</p>
               <p>dengan Font-Family arial ukuran 8px warna hitam </p>
          </div>

</body>

</html>

Tampilan setelah diposting :

PENULISAN CSS

Paragraph ini mengunakan font arial dengan warna hijau

Ukuran font untuk pargraph ini 12 px

Font Family pada paragraph iniadalah arial,

Sedagkan judul heding1 (h1) menggunakan huruf tebal

Dengan font arial warna merah dan ukuranya 18px.

Paragraph ini mengunakan font arial dengan warna biru

Ukuran font untuk pargraph ini 14 px italic (miring)

Font Family pada paragraph ini adalah arial,

Istilah Blok kategori adalah istilah saya sendiri untuk memudahkan pengertian khususnya bagi pemula yang baru atau sedang belajar CSS.

Tambahan :

#00000 : Kode warna hitam
#ff0000 : Kode warna merah
#0000ff : Kode warna biru
#0033FF : Kode Warna Hijau

Informasi mengenai kode warna dapat anda lihat pada postingan selanjutnya.
Semoga Bermanfaat.

Artikel yang perlu dikoreksi :

0 comments:

Siapapun boleh berkomentar termasuk kritik dan koreksi untuk perbaikan blog. Bagi yang awam, jangan malu untuk bertanya karena sayapun masih belajar. Tetapi saya mohon maaf karena tidak semua komentar dan email dapat saya reply.

Form Komentar Alternatif

Link Sukses

Arsip Sampah

Link

Sponsor

Judul 1

Judul 2

Artikel yang perlu dikoreksi :

0 comments:

Tutorial Blog

CSS Dasar

HTML Dasar

Bisnis Online

SEO Untuk Pemula

Photoshop Dasar

Software Dan Driver

Facebook (FB)

Twitter

Website Tools

Lain-lain

Komentar Terbaru

Motivator Blogs