Langsung ke konten utama

belajar CSS dasar bersama part 11 : mengenal dan membuat gaya lis dengan properti list-style css

 


dalam tulisan kali ini kita akan mengenal dan membuat  gaya lis dengan properti list-style dalam css, kita akan mencoba untuk tahu apa itu list-style dan apa fungsinya dan bagaimana dalam penerapan kode css, tapi sebelum kita memulai izinkan saya untuk mengucapkan

Salam sobat semua

Bismillah walhamdulillahi robbil 'alamiin. segala puji bagi Allah pencipta semesta alam ini atas segala nikmat yang telah diberikan kepada diri ini sehingga diri ini

hari ini bisa menulis dan berbagi dalam tulisan ini. sholawat serta salam akan tetap terpanjatkan untuk baginda sayyidina Muhammad ibni Abdillah S.A.W. sang kekasih

yang tercinta dari Tuhan semesta alam.


bismillah untuk kali ini kita akan mencoba apa yang namanya properti list-style yang artinya menurut saya yaitu kode css yang merubah bentuk dan posisi gaya pada lis atau

daftar di sebuah HTML. biar lebih jelas mari kita langsung saja terapkan pada kode html berikut ini. silahkan ketik atau copy paste pada text editor kalian. kalau saya

lebih suka pakai notepad++.

<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat 
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat 
website prtama saya
<br>
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
<p>Macam-macam nama kota di jawa timur:
<ul>
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
</p>
</div>
</body>
</html>

dan kode cssnya seperti berikut

body{

margin:0px;

}

#main{

border:1px solid blue;

min-width:150px;

width:99.1%;

background:#edfa1d ;

margin:0px;

padding:11px 0px 0px 11px;

font-size:14px;

font-family:arial;


}

.link{

text-decoration:none;

}

kemudian kita load di browser kesayangan kita, maka akan tampak hasilnya seperti berikut


dari hasil diatas kita sudah bisa membuat list seperti yang telah kita ketahui pada tulisan 

https://notemazdopunk.blogspot.com/2021/05/belajar-html-bersama-part-9-mengenal.html. sekarang kita coba untuk merubah beberapa gaya dari lis yang kita buat.

maka silahkan ketik atau copy paste kode css berikut

body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:14px;
font-family:arial;

}
.link{
text-decoration:none;
}
.lis{
list-style-type:circle;
}

dan kode html berikut ini

<html>

<head>

<title>My Web</title>

<link href="style/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="main">

<p>Ini adala isi dari main content yang akan saya buat 

sebagai website pertama saya

</p>

<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat 

website prtama saya

<br>

<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>

<p>Macam-macam nama kota di jawa timur:

<ul class="lis">

<li>Probolinggo</li>

<li>Surabaya</li>

<li>Jember</li>

<li>Pasuruan</li>

<li>Malang</li>

</ul>

</p>

</p>

</div>

</body>

</html>

maka dari kode diatas akan dihasilkan output seperti berikut


dari hasil diatas kita lihat gaya dari hasil diatas berubah bentuknya, untuk nilai list-style-type ini yang saya tahu adalah

list-style-type:circle;

list-style-type:square;

list-style-type:lower-roman;

list-style-type:upper-roman;

list-style-type:upper-alpha;

list-style-type:lower-alpha;

list-style-type:none;

untuk yang nilainya none berfungsi menghilangkan segala tipe gaya pada lis tersebut, jika diterapkan pada kode css maka kodenya seperti berikut

 body{

margin:0px;

}

#main{

border:1px solid blue;

min-width:150px;

width:99.1%;

background:#edfa1d ;

margin:0px;

padding:11px 0px 0px 11px;

font-size:14px;

font-family:arial;


}

.link{

text-decoration:none;

}

.lis{

list-style-type:none;

}

dan akan didapatkan hasil seperti berikut


selain itu list-style ini juga mempunyai properti list-style-position, tapi saya jarang sekali menggunakannya tapi tidak apa-apa kita coba saja sebagai tambahan

pengetahuan. untuk nilai dari list-style-position ini adalah inside untuk posisi agak menjorok kekanan atau kedalam, dan nilainya yang lain juga adalah outside 

yaitu untuk merubah posisi biar agak menjorok keluar atau kekiri. kita langsung saja mencobanya dalam kode css berikut ini

body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:14px;
font-family:arial;

}
.link{
text-decoration:none;
}
.lis{
list-style-type:lower-roman;
list-style-position:inside;
}

maka dari kode diatas akan menghasilkan output seperti berikut


dan untuk list-style ini bisa juga ditulis kodenya seperti berikut

list-style:list-style-type list-style-position;

biar lebih paham kita langsung coba terapkan dalam kode css seperti berikut

body{

margin:0px;

}

#main{

border:1px solid blue;

min-width:150px;

width:99.1%;

background:#edfa1d ;

margin:0px;

padding:11px 0px 0px 11px;

font-size:14px;

font-family:arial;


}

.link{

text-decoration:none;

}

.lis{

list-style:lower-roman inside;

}

dan dari kode diatas maka akan diperoleh hasil outuput yang sama dengan output yang dihasilkan kode diatas sebelumnya.

untuk tulisan kali ini tentang list-style cukup sekian dulu, mudah-mudahan bisa bermanfaat buat kita semua. dan kita lanjut di next tulisan.


Salam sobat semua


#css #html #free #share #web #website #websites #list #style #cicle #square #berbagi #gratis 

 

 

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya