Cascading Style Sheet (CSS) merupakan suatu kode pemrograman yang berfungsi untuk mempercantik tampilan HTML, dengan CSS kita membuat dan mengubah semua tag HTML seperti design, text, warna, dan background dan masih banyak lagi. Seperti yang dikutip dari wikipedia “CSS merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam”.

html-css

Cascading Style Sheet (CSS) dikembangkan oleh Hakom Wiuw Lie dan Bert Bos, mereka mengembangkan bahasa yang banyak diminati oleh desainer-desainer website, mereka juga membuat sebuah Web Browser Opera, CSS tidak bisa lepas dari HTML karena pada dasarnya CSS hanya sebuah style/gaya.

Sampai saat ini terdapat 3 versi CSS yaitu:

1. CSS1 dikembangkan yang berpusat pada performatan HTML.

2. CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar dapat ditampilkan.

3. CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal untuk design WEB, bahkan dengan CSS3 kita bisa membuat sebuah animasi dan masih banyak lagi seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Belajar CSS

Ada 3 penempatan css yaitu:

1. Internal CSS yaitu style yang digabungkan didalam file HTML.

Script CSS Internal

[html title=”belajarcss.html”]

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Bersama Ilmukita</title>
<style type=”text/css”>
.btn{
width: 100px;
height: 40px;
border-radius: 5px;
background: green;
}
</style>
</head>
<body>
<button class=”btn”>Ilmu Kita</button>
</body>
</html>

[/html]

2. Eksternal CSS yaitu style yang disimpan diluar HTML, yaitu kita harus membuat sebuah file misalkan style.css dan kemudian di panggil dengan HTML

Script HTML

[html language=”title=”]
<pre><!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Bersama Ilmukita</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<button class=”btn”>Ilmu Kita</button>
</body>
</html></pre>
[/html]

Script CSS

[css title=”style.css”]
.btn{
width: 100px;
height: 40px;
border-radius: 5px;
background: green;
}
[/css]

3. Inline CSS adalah menuliskan secara langsung script CSS kedalam tag HTML

Script Inline CSS

[html title=”belajarcss3.html”]

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Bersama Ilmukita</title>
</head>
<body>
<button style=”width: 100px; height: 40px; border-radius: 5px; background: green;”>Ilmu Kita</button>
</body>
</html>

[/html]

Mungkin hanya sediktit yang kita pelajari pada kesempatan ini. Semoga membantu agan-agan semua dalam
belajar CSS

.

LEAVE A REPLY

Please enter your comment!
Please enter your name here