Apa itu css ?

CSS kependekan dari (cascading style sheet) merupakan tata cara untuk mengatur tampilan dokumen html dan xhtml. dengan css kita dapat memodifikasi semua element dalam dokumen html. css di kembangkan oleh w3c (World Wide Web Consortium) dan sampai saat artikel ini ditulis, css sudah sampai tiga versi pengembangannya yaitu css v1, v2, v3. dengan menggunakan css, kita tidak hanya dapat menipulasi kode html dari segi warna, ukuran dan posisi element html bahkan denagan css v3, kita dapat membuat animasi 2D dan animasi 3D.
seiring berkembangnya versi css, hampir semua aplikasi browser mensuport penggunaan css dalam sistemnya.
ada tiga cara penuisan css yaitu Inline Style Sheet, Internal Style Sheet dan exsternal Style Sheet

Inline Style Sheet

CSS inline didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style yang di berikan kepada element hanya akan berlaku pada element yang bersangkutan dan tidak akan memengaruhi element HTML yang lainnya.

Contoh penulisan CSS dengan metode Inline Style Sheet sebagai berikut:

Contoh inline css

 
<html>
<head>
<title>Contoh Inline CSS</title>
</head>
<body style="bgcolor:#FFFFFF;">

<p style="font-size:20px;">
Tag P ini diformat dengan ukuran font 20 pixel </p>

<p style="font-size:14px; color:blue;">
Tag P ini diformat dengan ukuran font 14 pixel text warna biru </p>

</body>
</html>

Preview

Contoh Inline CSS

Tag P ini diformat dengan ukuran font 20 pixel

Tag P ini diformat dengan ukuran font 14 pixel text warna biru

Internal Style Sheet

Internal css adalah cara penulisan css terpisah dari element yang di tuju. untuk menggunakan metode ini, kita harus membuat tag <style> </style> sebelum tag </head>. tag style berguna untuk menampung semua text perintah css yang akan di gunakan untuk mengontrol element html.

contoh internal Style Sheet sebagai berikut:

Contoh internal CSS

 
<html>
<head>
<title></title>
<style type="text/css"> 

body {
background:cyan;
}

h1{
color:red;
font-size:20px;
background:black;
}

p{
color:blue;
font-size:20px;
}


</style>
</head>
<body>
<h1>belajar html dan css dasar</h1>

<p>selamat belajar html </p>
</body>
</html>

Preview

belajar html dan css dasar

selamat belajar html

seperti contoh di atas, dengan menggunakan tag <style> kita menempatkan semua perintah css. cara penulisan seperti ini adalah cara penulisan yang umum di gunakan oleh para pengembang web.

Exsternal style sheet

Exsternal CSS adalah cara penulisan perintah css terpisah dari dokument html. perntah-perintah css dapat di simpan ke dalam file dengan ekstansi (namafile.css). agar dapat terhubung dengan file html, di dalam dokument html harus di panggil dengan menggunakan tag <link>.

contoh exsternal css sebagai berikut:

untuk lembih memahaminya copy contoh html di bawah ini dan simpan dengan nama fileku.html

Contoh exsternal CSS

 
<html>
<head>
<title></title>
<link  rel="stylesheet" href="fileku.css" />
</head>
<body>

<h1>belajar html dan css dasar </h1>
<p>selamat belajar html </p>

</body>
</html>

kemudian copy contoh di bawah ini dan simpan dengan nama fileku.css tempatkan di folder yang sama dengan file html di atas.

Conton exsternal css


body {
background:cyan;
}

h1{
color:red;
font-size:20px;
background:black;

}

p{
color:blue;
font-size:20px;
}

Preview

belajar html dan css dasar

selamat belajar html

syntax html di atas masih sama dengan syntax di css inline, namun kita menggunakan konsep exsternal css dan memanggilnya dengan tag <link>.

di artikel selanjutnya kita akan belajar penulisan css lebih mendalam yakni tentang komponen-komponen dalam css.

ZenTutorials

CSS dan HTML

Apa itu css ?

Inline Style Sheet

Internal Style Sheet

belajar html dan css dasar

Exsternal style sheet

belajar html dan css dasar

Tidak ada komentar:

Posting Komentar