Style CSS


Memberi Style CSS pada HTML

CSS mulai diperkenalkan bersama dengan HTML 4. CSS dapat membantu Anda untuk memberikan tampilan elemen HTML dengan lebih baik.

CSS dapat ditambahkan ke HTML dengan 3 cara yaitu :

  • Inline – menuliskan perintah CSS langsung pada elemen HTML
  • Internal – menuliskan perintah CSS di bagian <head>
  • Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal)

Cara yang direkomendasikan untuk menambahkan CSS ke HTML ialah dengan menuliskan perintah CSS pada file yang berbeda.

Inline Style CSS

Cara ini, perintah CSS akan langsung dituliskan pada elemen HTML. Contoh berikut ialah memberikan warna pada background body, h2 (heading) dan p (paragraf).

Contoh

<html>
<body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>Ini adalah heading</h2>
<p style=”background-color:green;”>Ini sebuah paragraf.</p>
</body>
</html>

Coba »


Contoh HTML Style – Font, Color dan Size

Contoh

<html>
<body>
<h1 style=”font-family:verdana;”>Heading</h1>
<p style=”font-family:arial;color:red;font-size:20px;”>Paragraf.</p>
</body>
</html>

Coba »

Keterangan :

  • font-family mendefinisikan jenis font.
  • color mendefinisikan warna teks.
  • font-size mendefinisikan ukuran teks.

Contoh HTML Style – Text Alignment

Property text-align mendefinisikan letak teks secara horizontal di element.

<html>
<body>
<h1 style=”text-align:center;”>Posisi Heading di tengah</h1>
<p>Ini paragraf.</p>
</body>
</html>

Coba »

Internal Style CSS

Cara ini, perintah CSS akan dituliskan dibagian <head> file HTML menggunakan tag <style>. Contoh :

&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
body {background-color:yellow;}
p {color:blue;}
&lt;/style&gt;
&lt;/head&gt;

Eksternal Style CSS

Cara ini, perintah CSS ditulis di file yang berbeda. Kemudian, file CSS tersebut dipanggil dibagian <head> perintah HTML. Contoh :

&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
&lt;/head&gt;

Contoh diatas, perintah CSS ditulis di file style.css. Kemudian, file tersebut dipanggil dibagian <head>dengan tag <link rel>