Pengertian CSS , Contohnya dan Cara Penyisipannya di HTML


Bismillah Kali Ini zlearn akan berbagi informasi dan tutorial yang berkaitan dengan Pemrogramdan dan Pendesainan Web.

Nah berbicara tentang pemrograman web  atau desain web pasti tak akan jauh dengan yang namanya CSS.  nah pada postingan ini  zlearn akan mengupas tuntas mengenai CSS

Baca Juga :


Pengertian CSS?

CSS (Cascade Styling Sheet)  atau jika di terjemahkan dalam bahasa indonesia berarti Lembar bergaya susun. Merupakasn sebuah kode yang disisipkan pada sebuah file html atau dipanggil melalui link html yang berfungsi untuk menghias, mempercantik, dan membuat sebuah laman web menajdi lebih hidup.

Penggunaan CSS?

Lalu Bagaimnan dengan cara penggunaan CSS. seperti sudah di jelaskan di atas CSS di gunakan untuk memeprcatik sebuah tampilan laman website. Jika di ibaratkan Rumah HTML merupakan kerangka rumah , Javascript adalah fondasinya dan CSS adalah seprti Pekarangan , Cat Tembok, dan Ornamen dari Seuah Rumah.


Bagaimana Cara Menyisipkannya?

Lalu bagaiman cara penyisipannya  di kode html. Untuk Penysisipan Kode CSS ke File HTML memiliki 3 Cara.

1. External style sheet

External Stylesheet yaitu cara penyisioan kode CSS dengan Cara memanggi sebuah file  berekstensi CSS tang berisi kode-kode css contohnya <link rel="stylesheet" href="material.min.css"> kita memanggil file material.min.css

2. Inline Styles

 cara ini menambahakan kode css pada tag Html langsung dengan menamambah tag style  pada syntax HTML contohnya sebagai berikut:

Sebelum di tambahi CSS
<p> Nama Saya Zlearn.id </p>

Sedudah di tambahi CSS
<p style="color:blue; background-color:red;"> Nama Saya Zlearn.id </p>

3.  Internal Styles
 Cara yang ketiga yaitu dengan menambahkan kode CSS  diantara <head> </head>
 Jadi file css kita  ditambahkan  di antara tag head HTML  Berikut contoh contohya:

Sebelum ditambahi Internal Styles
<!DOCTYPE html>
<html>
<head><title>WisaTaMu</title>
</head>
<body>

<ul>
  <li><a class="active" href="lihat_tamu">Home</a></li>
  <li><a href="./" onclick="myFunction()">Buku Tamu</a></li>

  <script type="text/javascript">
      function{
        alert(Berikan Saran Dengan Santun);
      }
  </script>
  <li><a href="lihat_tamu">Lihat</a></li>


   <li class="w3-hide-small w3-right" id="cari" style="float: right;">  <form>
  <input type="text" name="search" class="cari" placeholder="Cari Pesan..">
</form></li>

</ul>
<div class="header">
<img src="gambar/header.jpg" class="img-header">
</div>

</body>
</html>

Sesudah ditambahi Internal Styles
<!DOCTYPE html>
<html>
<head><title>WisaTaMu</title>
<style>
body{
background-image:url('back2.jpg');
}
body{
width:80%;
margin:0px;
margin-left:10%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0AC0B3;;
}

li {
    float: left;
    border-right:1px solid white;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: rgb(28, 137, 133);
}

.active {
    background-color: #DEB218;;
}

input.cari[type=text] {
  margin-top: auto;
  margin-right: auto;
    width: 70%;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    background-image: url('gambar/searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.1s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input.cari[type=text]:focus {
    width: 90%;
}

.header {
{
    padding-bottom: 9px;
    margin: 30px 0 20px;
    border-bottom: 1px solid #eee;
}
}
.header {
    padding-top: 15px;
    padding-bottom: 30px;
    margin-bottom: 15px;
    color: inherit;
    background-color: white;

  
}

.img-header {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
img {
    vertical-align: middle;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="lihat_tamu">Home</a></li>
  <li><a href="./" onclick="myFunction()">Buku Tamu</a></li>

  <script type="text/javascript">
      function{
        alert(Berikan Saran Dengan Santun);
      }
  </script>
  <li><a href="lihat_tamu">Lihat</a></li>


   <li class="w3-hide-small w3-right" id="cari" style="float: right;">  <form>
  <input type="text" name="search" class="cari" placeholder="Cari Pesan..">
</form></li>

</ul>
<div class="header">
<img src="gambar/header.jpg" class="img-header">
</div>

</body>
</html>


Mudah kan belajar CSS semoga postingan mengenai  Pengertian CSS , Contohnya dan Cara Penyisipannya di HTML. Semoga dapat Bermanfaat dan Membantu pengunjung zlearn sekalian.
dan bial ada pertanyaa silahkan tuliskan komentar anda di komom komentar yang sudah tersedia.
Owh ya sekder Infomasi CSS sudah mencapai Versi 3.


Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...