CSS (Cascading Style Sheet) merupakan suatu aturan yang mengatur beberapa komponen dalam sebuah halaman web sehingga lebih terstruktur dan seragam. Semua tampilan halaman web menggunakan CSS untuk mengatur layout nya, diantaranya adalah mengatur ukuran header, ukuran containt, ukuran footer, gambar, style menu dan masih banyak element lain yang bisa diatur oleh CSS.
CSS mempunyai beberapa versi, yaitu
:
1.
CSS1. Css type ini dikembangkan terpusat pada pemformatan dokumen HTML
2.
CSS2. CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
3.
CSS3. Versi terbaru dari CSS yang mampu melakukan banyak hal dalam design website.
Kelebihan dari CSS3 yaitu :
- Struktur data sederhana.
- Mampu membuat animasi, efek grafis, menampilkan macam dan jenis huruf.
- Mampu memanipulasi secara visual warna, desain maupun tekstur.
- lebih mudah dan simple serta dapat menghindar penggunaan tag yang berulang-ulang
Kekurangan dari CSS3 yaitu :
- CSS3 hanya support pada G.Chrome, Mozilla, Bolt, Opera mini v9, IE
- Setiap browser mempunyai tag CSS sendiri-sendiri sehingga designer web perlu mencantumkan semua tagnya.
Ada 3 cara untuk menggunakan CSS, diantaranya :
1. CSS sebagai atribut.
<div style="background:red; width:20px;height:20px;"></div>
hasilnya akan menampilkan kotak persegi empat warna merah. Berikut penjelasan singkat dari kode diatas:
background = untuk menampilkan warna pada latarbelakang.
width = untuk mengatur lebar.
height = untuk mengatur tinggi.
2. CSS by Class/ID
<html>
<head></head>
<body>
<style>
.classexample{
width: 100px;
height: 20px;
background:skyblue;
}
#idexample{
width: 100px;
height: 20px;
background:skyblue;
}
</style>
<div class="classexample">Css by class</div>
<br />
<div id="idexample">Css by id</div>
</body>
</html>
Css by class
Css by id
Kode diatas akan menampilkan 2 <div> yang di atur by nama CLASS dan by nama ID nya.
Berikut penjelasannya :
style = diguakan untuk mendeklarasikan bahwa yang di dalam nya itu adalah script untuk css.
class = selector
id = selector
3. Import file CSS.
Di poin ke tiga ini yaitu mengimport file css ke dalam kode html.
Pertama buat file dengan nama misal index.css. Masukan kode dibawah ini di file index.css.
.container{
width:1000px;
height: 200px;
background:orangered;
code diatas merupakan code untuk merubah style div yang memiliki selector class dengan nama container.
Kedua yaitu buat file dengan nama index.html. masukan kode dibawah ini :
<html>
<head>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="container"></div>
</body>
</html>
Berikut penjelasan singkat terkait kode diatas.
tag <link..../> = merupakan tag element untuk mendeklarasikan lokasi file .css yang akan di import.
Sesudah file index.html dan index.css di buat dan isinya disuaikan, anda bisa coba running file index.html di browser. Ingat, file index.html dan index.css harus satu folder.
Sekian penjelasan tentang CSS nya semoga bermanfaat. Terimakasih :)
Referensi :
http://wikipedia.com
![Loker PT PAMA PERSADA NUSANTARA JULI 2017 [Expired]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMnORAL1VUL2XE6NxRqJ1h09Svc-FMzOonFp02tzjVTmFBwMS72HdqThF8zP6RHogVw13WyxuKBRhWLakQhqbPRqxt-nQPYLWuO77T7YEpcbuN9tFsaslLg6Vx0sgFx08qvvqUjl7px0/s72-c/pama1.jpg "Loker PT PAMA PERSADA NUSANTARA JULI 2017 [Expired]")
![[INTERNSHIP] Telkomsel Next Gen [expired]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64RLk5gtQu7mnuSE456UFo2sJVGh_ssYCtYGimQnnBofU573bIAP5uj7IaIsqYoINd5YGzWBln9kW2NxJ3mJEnIaV2WsyYFBBbGpA7nUyviTvKE0A7HYHEteFzn1qbv8A_XWIUpSS5as/s72-c/telkomsel.PNG "[INTERNSHIP] Telkomsel Next Gen [expired]")
