TutorialUncategorized

Mendadani Web dengan CSS

  • Apa Itu CSS?

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.

  • Beberapa property CSS dan fungsinya.
  1.  Width      :  untuk mengatur lebar bidang_tag yang kita berikan style
  2. Height      : untuk mengatur panjang bidang_tag yang kita berikan style
  3. Color        : untuk mengatur warna font
  4. Padding   : untuk mengatur jarak dalam bidang-tag
  5. Margin     : untuk mengatur jarak luar bidang-tag
  6. font-size   : untuk mengatur ukuran huruf
  7. text-align : untuk mengatur rata teks,
  8. background-color : untuk mengganti warna background

contoh penggunaanya:
<html>
<head>
<title> SMK Jombloger</title>

<style>
#pembungkus{
width: 750px;
margin: auto;
padding: 5px;
border: 3px solid black;
display: table;
background-color:gray;

}
#header{
width: 720px;
margin: 5px;
padding: 5px;
border: 2px solid black;
border-radius: 15px;
background-image: url(‘1440141171759.jpg’)

}
h1{
text-align: center;
font-size: 55px;
color: red;
text-effect:tightreflection;
}
#header p{
text-align: right;
margin: 5px;
color: brown;
text-weight: bold;
font: 20px;

}
#menu{
width: 720px;
float: left;
margin: 5px;
padding: 5px;
border: 2px solid black;
background-color:lightgray;
border-radius: 15px;

}
#menu b{
width:120px;
margin: 5px;
padding: 5px;
border: 1px solid black;
background-color:gray;
border-radius: 15px;
color: white;
font-size: 15px;
float: left;
text-align: center;
}
#besar{
width: 433px;
margin: 5px;
padding: 5px;
border: 3px solid black;
float: left;
background-color: lightgrey;
}
.berita{
width: 408px;
margin: 5px;
padding: 5px;
border: 2px solid black;
float: left;
background-color:white;
text-align: justify;
}
#kecil{
width: 265px;
margin: 5px;
padding: 5px;
border: 3px solid black;
float: right;
background-color:lightgrey;
}

#footer{
width: 150px;
margin: 5px;
padding: 5px;
border: 2px solid black;
float: right;
background-color:white;
text-align: right;
font-size: 15px;
height: 30px;
}
.widget{
width: 240px;
margin: 5px;
padding: 5px;
border: 2px solid black;
float: right;
background-color:white;
}
h2{
text-align: center;
}
.berita h4{
text-align: right;
}
.widget h4{
text-align: center;
font-size: 20px;
}
.widget h4+p{
color: black;
text-align: right;
font-weight: bold;
font-size: 20px;
}
.widget h4+p+p{
color: black;
text-align: right;
font-style: italic;
color:black;
font-size: 15px;
}
body{
background-image:url(‘1440141025184.jpg’)
}
</style>
</head>

<body>
<div id=”pembungkus”>
<div id=”header”>
<h1> SMK Jombloger </h1>
<p> Jl. Perintis Kemerdekaan II <br>
Cikokol, Tangerang <br>
Telp: (021) 123-4567 </p>
</div>

<div id=”menu”>
<b> Home </b>
<b> Berita </b>
<b> Artikel </b>
<b> Tentang Saya </b>
</div>

<div id=”besar”>
<div class=”berita”>
<h2> Kita Kembali Juara </h2>
<h4> Oleh: Mawan .A. Nugroho </h4>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>

<div class=”berita”>
<h2> Pemasangan Wifi </h2>
<h4> Oleh: Mawan .A. Nugroho </h4>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p>
</div>
</div>

<div id=”kecil”>
<div class=”widget”>
<h4> Artikel Terbaru </h4>
<ul>
<li> Cara Belajar </li>
<li> Sopan Santun </li>
<li> Hidup Sehat </li>
</ul>
</div>

<div class=”widget”>
<h4> Hubungi Kami </h4>
<p> SMK Christina </p>
<p> Jl. Perintis Kemerdekaan II <br>
Telp: (021) 123-4567 </p>
</div>
</div>

<div id=”footer”>
<p> Theme by <b> Christina </b> </p>
</div>
<div>

</body>
</html>

 

hasilnya :

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *