Pengertian CSS

CSS

CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini.

Pengertian CSS

Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-21<!DOCTYPE html>
<html>
<head>
      <title>Test Tag Font HTML</title>
</head>
 
<body>
  <p>
    CSS merupakan bahasanya <font color="blue">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> adalah kumpulan kode yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya adalah HTML</font>.
  <br />
    Dengan CSS kita bisa mengubah desain dari
    <font color="orange">text, warna, gambar dan latar belakang</font>
    dari (hampir) semua kode tag HTML.
  </p>
</body>
</html>

CSS merupakan bahasanya desainer web. Namun sebenarnya, apa itu CSS?
CSS adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, salah satunya adalah HTML.
Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.


menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.

Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.

Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-26<!DOCTYPE html>
<html>
<head>
      <title>Test Background Color CSS</title>
      <style type="text/css">
         .warna {
                 color: blue;
                }
       </style>
</head>
  
<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Namun sebenarnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>adalah kumpulan kode
      yang digunakan untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya adalah HTML</span>.
    <br />
      Dengan CSS kita bisa mengubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) semua kode tag HTML.
    </p>
</body>
</html>


CSS merupakan bahasanya desainer web. Namun sebenarnya, apa itu CSS?
CSS adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, salah satunya adalah HTML.
Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.


Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head.

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru. semoga berguna...

Artikel Terkait

  • Styles template blog dengan CSS Reset
    Mengatur ulang gaya template blogger Anda, sering disebut sebagai CSS Reset atau Reset CSS adalah proses ulang (atau lebih tepatnya - pengaturan) gaya dari semua elemen ke nilai dasar sehingga menghindari perbedaan lintas-browser karena built-in pengaturan gaya default. Dengan mengatur ulang style blog Anda, Anda menghindari default ke gaya bu…
  • Effect Blur pada Item CSS3 dan jQuery
    Dalam tutorial ini saya ingin menunjukkan kepada Anda bagaimana untuk membuat efek blur sederhana untuk item berbasis teks. Idenya adalah untuk memiliki satu kotak teks yang akan berefek kabur saat Item dalam fokus cursor. Hal ini akan membuat semacam "fokus" efek yang menarik perhatian ke item saat yang lain kabur. Kita akan menggunakan CSS3 …
  • Trik CSS Reset Stylesheet template Blogger
    Untuk mengatasi error saat menerapkan trik validasi html5 sobat bisa mencoba dan menggunakan cara ini yaitu menyembunyikan CSS Reset Stylesheet, Kodenya seperti berikut: <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2761160889-widget_css_bundle.css' /> dan kode kedua <link type="text/css" rel="s…
  • Memahami CSS Unit: Pixels, EM, dan Persentase
    Satuan berperan penting untuk mengukur dan membangun hal-hal seperti rumah, jembatan atau menara, dan membangun sebuah website pun tidak terkecuali. Ada beberapa metode pengukuran yang digunakan di Web, khususnya dalam CSS, yaitu Pixel, EM dan Persentase. Dalam posting ini, kita akan mempelajari melalui unit-unit ini untuk mendapatkan wawasan…
  • Membuat animasi loading blog css3
    Halo pembaca, Ada banyak blog yang telah berbagi trik ini tetapi efek yang mereka berikan hanya sebuah gambar bawaan tutorial atau hanya sebuah teks "Loading ...". Hal ini berbeda dari apa yang saya katakan di atas, tetapi efek loading dalam artikel ini hanya dibuat dengan CSS, Dan untuk menambahkan efek menarik ini di blog anda, silahkan ikut…
  • Membuat tooltip menggunankan css3
    Pagi ini saya mencoba share trik membuat tooltip css3.apa itu tooltip ? tooltip adalah deskripsi pembantu saat seseorang menklik link atau gambar yang sudah disertai tooltip didalamnya,sehingga deskripsi link atau gambar akan muncul.nah,bagaimana membuat yang lebih keren ? simak tutorial berikut. Login ke akun blogger Klik Edit HTML - "e…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...