Setelah kita mengenal Html pada post sebelumnya , saatnya kita menjamah script CSS, konten nya dibuat di html , dan designnya dibuat di CSS.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>CSS Grid Tutorial</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
</head>
<body>
<header>
<a href="#">Libertians > *</a>
</header>
<div class="isian">
<div id="content">
<h1>Down with the state</h1>
<p>Abandon the left vs. right paradigm and adopt new ideals, where consistency and logic reign supreme.</p>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-TxUlokDaleL_3Uw9sV9e7sW4p9ARvoNvClaBM3wMYwpQHURtPaAvRJATTGN5Jj_wk9Kft4Gf67n7rqYF4_IeLsguqMm3V4vVJUTbkvTwm0DEpEZLcHmSHWN-rmyjAnZdzvlzudGw9Dv/s320/jasa+video+solo+1.gif" />
</div>
<footer>
<ul>
<li>
<span>But what about the roads?</span>
You just don't understand economics, like supply and demand. Don't worry kiddo, where there's a demand there will be a supply; we'll all have our roads.
</li>
<li>
<span>Is taxation theft?</span>
If <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-TxUlokDaleL_3Uw9sV9e7sW4p9ARvoNvClaBM3wMYwpQHURtPaAvRJATTGN5Jj_wk9Kft4Gf67n7rqYF4_IeLsguqMm3V4vVJUTbkvTwm0DEpEZLcHmSHWN-rmyjAnZdzvlzudGw9Dv/s320/jasa+video+solo+1.gif" />
I came to your house with some heavily armed buddies, demanded that you and your neighbors give me a percentage of your income, in return for some crappy monopolized services that you didn't ask for, would you consider that theft?
</li>
<li>
<span> jadi gini what you're saying is...?</span>
Libertarians want to live in a world where gay couples can protect their poppy fields with fully automatic weapons.
A world where voluntaryism and property rights are treated with the highest respect.
</li>
<li> <!-- Ulangi lagi tiga kali sehingga sekarang kita punya 6 list -->
<li> <!-- Ulangi lagi tiga kali sehingga sekarang kita punya 6 list -->
<li> <!-- Ulangi lagi tiga kali sehingga sekarang kita punya 6 list -->
</ul>
</footer>
</body>
</html>
Berikut tampilan html tanpa memasukkan unsur css,
Jika malas membuka notepad++ bisa coba script html dan css dengan mengunjungi https://jsbin.com
Percantik tampilan dengan CSS
Saatnya mempercantik tampilan html di atas dengan CSS , dan sebelahnya telah saya jelaskan fungsi2 dari script CSS.
body {
font-family: 'Source sans Pro';
background:red;
color:white;
}
a {
text-decoration:none;
color:black; /* warna dari text dengan kode html a*/
font-size:1.22em;
font-weight:900;
}
Header
{
Background:white;
padding :1em; /*memberikan jarak atas bawah kiri untuk elemen header */
}
img{
width:120px;
justify-self:center;
/*menempatkan gambar ditengah kolom
justify-self center */
}
.isian{
padding:2em 1em; /*memberikan jarak atas bawah kiri untuk elemen container */
display : grid; /* mendefinisikan display mjd grid */
grid-template-columns: 66% auto; /* membagi grid 66% untuk kolom awal dan sisanya */
/* display dan grid-template-columns adalah css grid*/
}
footer {
background :#571212;
}
ul {
margin:0;padding:0; /*menghilangkan space untuk ul */
display: grid;
grid-template-columns:repeat(3,auto);
list-style-type:none; /* menghilangkan dot type */
/* repeat() merupakan cara cepat utk
menuliskan auto auto auto, kode ini
artinya membuat 3 kolom dengan lebar sama
rata*/
grid-template-rows:repeat (2, auto);
/*Untuk grid-template-rows artinya
kita ingin membuat dua baris dengan tinggi
yang sama rata (sama seperti kolom). */
}
ul li {
padding: 1em;
color:#E98A8A; /* text utk kode li */
}
ul li span {
display:block; /*untuk ngeblock li span agar tdk gabung ke text setelahnya */
font-size:1.4em;
margin-bottom:0.2em; /* space enter dengan bawah nya */
color: white;
}
Grid sangat mudah digunakan. jadi jika ingin desain tampilan web ya paling nggak paham css grid ya..
