Tutorial Segalanya

Apa itu CSS ? Dan Bagaimana Cara Menggunakannya ?

Halo sahabat Blogger, pada kesempatan ini saya akan membahas apa itu CSS dan apa saja fungsi dan kegunaannya dalam dunia web.

CSS adalah kependekan dari Cascading Style Sheet, Berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML Ditampilkan, seperti menentukan posisi, merubah warna teks, atau background, menentukan ukuran teks, dan lain sebagainya.

Pada gambar diatas .content dinamakan selector, sedangkan margin-top dan background dinamakan property dan 12px & #fff dinamakan value.

Penulisan CSS

Ada tiga cara penulisan kode CSS, yaitu inline, internal dan external. Ketiganya bisa anda lakukan sesuai dengan kebutuhan. Berikut contoh penggunaan dari metode-metode tersebut:
1. Inline CSS
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.
CONTOH :

<html>
<head>
<title>Inline CSS</title>
</head>
<body>
 <nav class="menu">
<p style="background-color:black; font-size:12px; font-family:Cambria;"> Ini adalah contoh Inline CSS </p>
</body>
</html>

2. Internal CSS
Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.
CONTOH :

<html>
<head>
<title>Internal CSS</title>
<style type="text/css">
.menu {
font: normal 14px Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
overflow:hidden;
}
.nav-menu {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.nav-menu li {
display:inline;
float:left;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-right:1px solid #f0f0f0;
}
.nav-menu li a {
background:#ffffff;
color:#333333;
text-decoration:none;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
</style>
</head>
<body>
 <nav class="menu">
<ul class="nav-menu">
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
</nav>
</body>
</html>

3. Eksternal CSS
Pada eksternal CSS kode-kode CSS berada di luar dokumen, penulisan dokumen ini lebih banyak digunakan oleh desainer CSS, sehingga dalam pembuatanya dapat mudah di kontrol dan bisa multi dokumen CSS. Untuk menampilkannya adalah dengan menggunakan link.
CONTOH :

<html>
<head>
<title>Eksternal CSS</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <nav class="menu">
<ul class="nav-menu">
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
<li><a href="#">CONTOH</a></li>
</ul>
</nav>
</body>
</html>

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Apa itu CSS ? Dan Bagaimana Cara Menggunakannya ?

Penulisan CSS

0 Response to "Apa itu CSS ? Dan Bagaimana Cara Menggunakannya ?"

Post a Comment