Internal CSS

Ada tiga cara menuliskan code CSS pada HTML web page yaitu internal, external dan inline. Yang paling mudah digunakan dari ketiganya adalah internal CSS. Kalau kamu mau menggunakan cara internal CSS maka kamu harus menambahkan <style> tag di dalam <head> tag.

Code internal CSS:

<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>Masukkan content disini!</p>
</body>
</html>

Code CSS diatas tidak merubah tampilan dari web page. Code style tag diatas hanya memberitahu browser bahwa code CSS akan digunakan di web page ini.

Cara membuat code internal CSS

Code CSS memiliki cara penulisan yang berbeda dengan HTML karena code CSS dimaksudkan untuk memodifikasi tampilan web page HTML. Dibawah ini adalah contoh sederhana dari penulisan code CSS yang digabung dengan code HTML.

Code CSS sederhana:

<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Text putih dengan background hitam!</p>
</body>
</html>

Hasil code CSS sederhana:

Text putih dengan background hitam!

Pada code CSS diatas kita memodifikasi tampilan <body> dan <p> tag. Keistimewaan dari CSS adalah mudah dimengerti. Jadi kalau kamu mengerti susunan atau format code CSS secara umumnya maka kamu sudah menguasai hampir semua bahasa CSS.

Format code CSS umumnya:

"tag HTML" { "CSS Property" : "Value" ; }

Berikut ini adalah penjelasan code CSS sederhana diatas untuk modifikasi p tag.

p {color: white; }
  • Bagian pertama adalah kita menyebutkan element HTML yang mau kita modifikasi. Dari contoh adalah [p { : ;}]
  • Bagian kedua adalah element HTML tersebut kita modifikasi warnanya dengan code CSS, yaitu dengan color attribute. – [p {color: ;}]
  • Bagian terakhir kita atur font color menjadi putih. – [p {color: white;}]

Sekarang semua text di dalam paragraph tag akan menjadi putih.

Dibawah ini adalah penjelasan mengenai modifikasi background <body>.

body {background-color: black; }
  • Pertama kita tuliskan body element – [body { : ; }]
  • Kedua kita tuliskan attribute CSS untuk background color – [body {background-color: ; }]
  • Terakhir kita atur background colornya menjadi black – [body {background-color: black;}]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>