Friday, January 23, 2015

MENGGUNAKAN CSS PADA HTML



CARA MEMANGGIL / MENGGUNAKAN CSS PADA HTML

1.   Inline Styles

Inline styles ini maksudnya kalian memakai CSS langsung pada tag HTMLnya. Untuk memasukkan CSSnya kalian butuh atribut “style”. Biar gak pada bingung ini contohnya.

<html>
  <head>
    <title>Belajar CSS</title>
  </head>
  <body>
    <p style="background: #efefef">Contoh</p>
  </body>
</html>

Nah jadi outpunya akan menghasilnya tulisan “Contoh” dengan warna background abu-abu, iya background: #efefef itu untuk mengubah background jadi warna abu-abu.

2.   Internal Styles

Internal styles yaitu memakai CSS masih di dalam file HTML namun tidak langsung pada tagnya seperti Inline Styles, melainkan kita buat beberapa baris kode CSS dan kemudian kita panggil. Contohnya simplenya seperti ini
<html>
  <head>
    <title>Belajar CSS</title>
    <style> p{ background: #efefef }</style>
  </head>
  <body>
    <p>Contoh</p>
  </body>
</html>

Kode itu sama menghasilkan tulisan “Contoh” dengan warna background jadi abu-abu. Hanya penulisannya saja berbeda dimana kode CSSnya dibedakan tempatnya dan di apit tag <style>



3.   External Styles

External Style dimana kita membuat file yang berisi kode CSS dan file berisi kode HTML terpisah,  jadinya ada 2 file. Contohnya seperti ini
Pertama buat file CSS, misalnya kita beri nama style.css
p{ background: #efefef }
Dan yang kedua kita buat file HTML, dimana diberi nama latihan.html
<html>
  <head>
    <title>Belajar CSS</title>
    <link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
  </head>
  <body>
    <p>Contoh</p>
  </body>
</html>

<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”screen” /> itu digunakan untuk memanggil file CSS yang akan digunakan. Dan output yang dihasilkan sebenarnya sama juga dengan yang di atas yaitu tulisan “Contoh” dengan warna background abu-abu.






Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
 <ul>
 <li><a href="#">WordPress</a></li>
 <li><a href="#">Photoshop</a></li>
 <li><a href="#">Web Design</a>
  <ul>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
  </ul>
 </li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav> 

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik: 
Simpan dengan nama style.css
nav ul ul { display: none; }

nav ul li:hover ul {
 display: block;
}
nav ul {
 background: #efefef;
 padding: 0;
 list-style: none;
 position: relative;
 display: inline-table;
}
nav ul:after {
 content: ""; clear: both; display: block;
}
nav ul li {
 float: left;
}
nav ul li:hover {
 background: #4b545f;
}
nav ul li:hover a {
 color: #fff;
}

nav ul li a {
 display: block; padding: 25px 40px;
 color: #757575; text-decoration: none;
}
nav ul ul {
 background: #5f6975; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;
}
nav ul ul li {
 float: none;
 border-top: 1px solid #6b727c;
 border-bottom: 1px solid #575f6a;
 position: relative;
}
nav ul ul li a {
 padding: 15px 40px;
 color: #fff;
}
nav ul ul li a:hover {
 background: #4b545f;
}

nav ul ul ul {
 position: absolute; left: 100%; top:0;
}

Berikut penjelasan dari code css:
nav ul ul {
 display: none;
}

nav ul li:hover > ul {
 display: block;
}

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
 float: none;
 border-top: 1px solid #6b727c;
 border-bottom: 1px solid #575f6a;
 position: relative;
}
Code ini adalah styling untuk submenu. Artikel mempunyai submenu WordPress, Photoshop dan Web Design. Nah style ini dimaksudkan untuk submenu.
Jika sudah maka tampilan akhir dari code diatas adalah seperti ini:

0 Comments:

Post a Comment