HTML Dasar
HTML Menengah
HTML Mahir
HTML Referensi
HTML Contoh
HTML Resources

HTML Css


CSS atau Cascading Style Sheets


  • CSS digunakan untuk memberikan berbagai macam style pada elemen HTML.
  • CSS bisa dideklarasikan dengan tiga cara :
    • Inline : Di deklarasikan ke dalam attribut elemen HTML.
    • Internal : Di deklarasikan menggunakan elemen <style> di dalam elemen <head>.
    • External : Di deklarasikan pada sebuah file terpisah.

Contoh CSS

Pada paragraf ini terdapat inline CSS.

Pada paragraf menggunakan font family 'cursive'.

Pada paragraf menggunakan font family 'monospace'.

Pada paragraf menggunakan font family 'sans-serif'.

Codingku HTML Editori
<p style="color:#FF33FF; text-decoration:underline; font-size:13px;">
Pada paragraf ini terdapat inline CSS.
</p>

<p style="font-size:16px; font-family:cursive">
Pada paragraf menggunakan font family 'cursive'.
</p>

<p style="font-size:19px; font-family:monospace">
Pada paragraf menggunakan font family 'monospace'.
</p>

<p style="font-size:19px; color:#FF3333; font-family:sans-serif">
Pada paragraf menggunakan font family 'sans-serif'.
</p>
Coba sendiri »


Mengenai CSS


CSS diperkenalkan bersamaan dengan HTML 4.0.

Cara terbaik dari desain sebuah CSS adalah dengan menempatkan CSS pada file yang terpisah atau disebut dengan eksternal CSS.

Namu kami tidak akan membahas itu pada halaman ini, bila anda ingin mengentahui CSS yang lebih detail silahkan kunjungi halaman tutorial CSS kami.

Internal CSS

  • Internal CSS di deklarasikan di bagian elemen <head> pada suatu dokumen HTML.
  • Internal CSS akan mempengaruhi semua elemen dibawahnya yang sesuai dengan yang di deklarasikannya.

misal :

<style>
    p{color:green}
</style>
</head>

Pada contoh di atas,p{color:green} akan mempengaruhi semua elemen <p>... </p> di dalam dokumen tersebut.

Contoh internal CSS :
Codingku HTML Editori
<html>

<head>

<style>

h2{color:#33FFFF; text-decoration:underline;}

p{color:red; font-family:cursive; font-size:15px;}

</style>

</head>

<body>

<h2>Style heading ini dibuat dengan internal CSS. </h2>

<p>Style paragraf ini dibuat dengan internal CSS. </p>

</body>

</html>
Coba sendiri »

Bila anda sudah menguasai dasar dari CSS, maka sebaiknya hindarilah penggunaan elemen <strike>, <font>  maupun <center>.


Situs ini masih dalam versi beta, artinya masih dalam proses pengembangan baik dari segi bug maupun isi yg kurang lengkap. Silahkan melihat-lihat yang sudah ada sementara ini, tiap hari kami akan berusaha untuk melengkapi kekurangannya...