Modul Cascading Style Sheet (CSS)

MODUL II
CASCADING STYLE SHEET (CSS)
Apa ituCSS?
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style,
misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas
(file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS
dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink,
warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1]
CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2]
Dengan adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan format yang berbeda.
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan
dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer,
sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung
penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi
CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3
desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query.
Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan
CSS Object Model. (source : id.wikipedia.org)

1. Sintaks Penulisan Kode CSS
Aturan penulisan kode CSS sebagai berikut :
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.
2. CSS Comment
Comment pada CSS digunakan untuk memberikan deskripsi pada program, sehingga lebih
memudahkan dalam memahami struktur program. Comment hanya sebagai penunjuk, tidak akan
dieksekusi sebagai baris program.

3. CSS Selector
CSS Selector digunakan untuk memilih element mana pada HTML yang ingin diterapkan CSS. Element pada
HTML diantaranya adalah id, class dan group.
3.1 Selector dengan id

3.2 Selector dengan Class
3.3 Selector dengan Group
4. Menyisipkan Kode CSS (3 cara)
Ada 3 cara untuk menyisipkan kode CSS pada HTML yaitu :
 External style sheet
 Internal style sheet
 Inline style
4.1 External Style Sheet
Buat dua file. File pertama dengan nama file eksternal.html dan file kedua dengan nama file style.css
Kode HTML file eksternal.html
<html>
<head><title>Coba CSS Eksternal</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> Coba CSS dari eksternal </h1>
</body>
</html>

Kode pada file style.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
4.2 Internal Style Sheet
4.3 Inline Style Sheet
Konsep lain adalah Multiple Style Sheet dan Multiple Styles into one dibahas lengkap di w3schools

5. CSS Background
6. CSS Text
7. CSS Font
7.1 Font Family

8. CSS List
<! DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>C offee</li>
<li>T ea</li>
<li>C oca Cola</li>
</ul>
<ul class="b">
<li>C offee</li>
<li>T ea</li>
<li>C oca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>C offee</li>
<li>T ea</li>
<li>C oca Cola</li>
</ol>
<ol class="d">
<li>C offee</li>
<li>T ea</li>
<li>C oca Cola</li>
</ol>
</body>
</html>

10. CSS Table
10.1 Table Border
10.2 Collapse Border

10.3 Table width height
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

10.3 Table Color
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid green;
}
th {
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

11.CSS Box Model
12. CSS Border

13.CSS Padding
14. CSS Positioning
15. CSS Positiong Absolute

16.Overlapping Position
17. CSS Float

19. CSS Images
<!DOCTYPE html>
<html>
<head>
<style>
div.img{
margin: 5px;
padding:5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.imgimg {
display:inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.imga:hover img {
border: 1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg"alt="Klematis"width="110"
height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg"alt="Klematis"width="110"
height="90"></a>
</div>
<div class="img">
height="90"></a>
</div>
<div class="img">
height="90"></a>
</div>
</body>
</html>

<html>
<head>
<style>
div.background {
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
}
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>

Modul Cascading Style Sheet (CSS)

More Related Content

What's hot (16)

Viewers also liked (11)

Similar to Modul Cascading Style Sheet (CSS) (20)

More from Brian Raafiu (20)

Recently uploaded (20)

Modul Cascading Style Sheet (CSS)