Dasar Dasar CSS

pada tanggal

 

Pengenalan CSS, Serta Cara menggunakan nya

 

 


 

CSS singkatan dari Cascading Style Sheets fungsi CSS adalah untuk mendesain halaman website seperti mengatur warna background dan font yang digunakan, ukuran layout, mengubah tampilan form, dan masih banyak lagi. Jika kamu ingin membuat tampilan website menjadi lebih bagus atau menarik, maka kamu wajib belajar CSS untuk menguasai skill web design.

 

Ada 3 cara untuk menambahkan style CS ke website Anda: Anda bisa menggunakan internal CSS dan menambahkannya ke rule CSS di dalam bagian <head> pada dokumen HTML, atau menghubungkan file CSS eksternal yang mengandung semua rule CSS, atau yang terakhir adalah menggunakan inline CSS. Tutorial ini akan membahasa 3 cara tersebut, beserta keuntungan dan kerugiannya masing-masing.

 

1. inline CSS

 

Kode CSS internal diletakkan di dalam bagian <head> pada halaman. Class dan ID bisa digunakan untuk merujuk pada kode CSS, namun hanya akan aktif pada halaman tersebut. Style CSS yang dipasang dengan metode ini akan di-download setiap kali halaman dipanggil, jadi ini akan meningkatkan kecepatan akses. Namun, ada beberapa case dimana penggunaan internal stylesheet justru berguna. Salah satu contohnya adalah untuk mengirimkan template halaman ke seseorang – karena semuanya bisa terlihat dalam 1 halaman, maka akan lebih mudah untuk melihat previewnya. CSS internal diletakkan di dalam tag <style></style>.

 

Contohnya:

 

<head>

    <style type="text/css">

      p {color:white; font-size: 10px;}

      .center {display: block; margin: 0 auto;}

      #button-go, #button-back {border: solid 1px black;}

    </style>

  </head>

 

2. external CSS

Salah satu cara yang paling nyaman untuk menambahkan CSS ke website Anda adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang Anda buat pada file CSS akan tampil pada website Anda secara keseluruhan. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman.

 

Contoh

Pada file html

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

 Sedangkan pada file style.css

 .xleftcol {

    float: left;
    width: 33%;
    background:#809900;
 }
 .xmiddlecol {
    float: left;
    width: 34%;
    background:#eff2df;
 }

3. Inline CSS

 

Inline CSS digunakan untuk tag HTML tertentu. Atribut <style> digunakan untuk memberikan style ke tag HTML tertentu. Cara ini kurang direkomendasikan, karena setiap tag HTML malah harus diberikan style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, pada saat Anda tidak memiliki akses ke file CSS atau harus mengubah style untuk 1 elemen saja.

 

Contoh :

 


Komentar

Posting Komentar