Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Tanya cara memisahkan menu style dari file html
Mohon maaf sebelumnya, saya baru pertama kali belajar CSS dan saya mengikuti dari kelasnya abang Hilman Ramadhan, dimana saya masih bingung cara memisahkan script css dengan script htmlnya. dimana yang saya dapat seperti ini
<html>
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav > ul > li{
float: left;
width: 20%;
border-right: 1px solid #ccc;
box-sizing:border-box;
}
li{
list-style: none;
text-align: center;
font-size: 23px;
height: 40px;
line-height: 40px;
background-color: #09f;
}
li:hover{
background-color: #756;
}
li:last-child{
border:none;
}
li ul{
display: none;
}
li ul li{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
li ul li:hover{
background-color: red;
}
ul li:hover ul{
display: block;
}
a{
text-decoration: none;
color: #fff
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">List</a></li>
<li><a href="">List</a></li>
<li><a href="">List</a></li>
<li><a href="">List</a></li>
<li><a href="">List</a>
<ul>
<li><a href="">Helo</a></li>
<li><a href="">Hola</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Saya terbiasa menggunakan <div>, dan saya bingung pada tanda bintang seperti yang di bawah ini :
*{
margin: 0;
padding: 0;
font-family: sans-serif;
Jika pada file css, tanda bintang tersebut diganti dengan apa.? dan apa bisa menggabungkan atau mengganti tanda bintang dengan #header atau yang lainnya.?
mohon maaf jika pertanyaan saya agak membingungkan.
5 Jawaban:
Haloo, tanda bintang itu artinya -semuanya- . Jadi semuanya akan kena efek css dari tanda bintang ini, misalnya dalam tanda bintang kita tulis color:red, berarti semuaa tulisan akan berwarna merah. Di file css dan html walaupun terpisah sama aja , tetep bintang ditulisnya
bahasa lain tanda bintang itu untuk me-reset kode css default ny browser gan, agan bisa buktiin coba aj d hapus margin sama paddingnya, lihat dibrowser prbdaan setelah dan sesudah margin pding nya dhapus. sy sh biasanya naro file css ny dfile lain gan nnt file ny dpanggil pake tag dihlman html.
oh, terima kasih bang @hilmanrdn dan @akhmami , saya mulai mngerti maksud dari tanda * tadi, tetapi ketika saya memakai <div id> di html, pada script css yang tadi ada tanda bintang, bagaimana agar ketika saya menambahkan #header { dan lainnya tidak membuat fungsi dari * tersebut terganggu, saya mencoba menambahkan #header di belakang tanda *, seperti di bawah ini :
#header *{
margin: 0;
padding: 0;
font-family: sans-serif;
}
tetapi tampilannya berubah, kira" kesalahan saya di mana karena saya juga belum begitu paham akan css. saya tidak bisa menaruh semua script karena batas maksimal huruf hanya 1000..
coba hilangin tanda bintang mas
jadi gini
#header{
margin: 0;
padding: 0;
font-family: sans-serif;
}
css reset (*) sma "id" itu dipisah gan, Fungsi dr bintang itu untuk -mereset semuanya- dr default browser agar tampilan awal sesuai dengan yang kita inginkan. setelah itu baru kita buat kode css berdasarkan id atau class kita, contoh:
<!DOCTYPE HTML>
<html>
<head>
<title>nama document</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- untuk memanggil file css nya yaitu style.css -->
</head>
<body>
<div id="header">
<nav>
<ul>
<li>bla bla bla..</li>
<li>bla bla bla..</li>
<li>bla bla bla..</li>
</ul>
</nav>
</body>
</html>
pd kode html diatas ada id dengan nama "header" dan kita panggil file cssnya dengan tag <link> (yg diletakan letakan diantara <head></head>) buat file cssny dengan nama style.css lalu inputkan kodenya.
/* pertama kita reset pengaturan default browsernya */
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/* lalu buat style id headernya */
#header {
margin: 0 auto; /* ini hanya contoh property: dan nilai; terserah agan*/
}