CSS
TUTORIALS
1.
CSS
Selector
Penjelasan
:
CSS selector digunakan untuk memilih dan
memanipulasi elemen HTML. CSS selector digunakan untuk menemukan elemen HTML
pada id, class, tipe, atribut dan lain-lain.
Seletor
tag
Penjelasan
:
Selector tag digunakan untuk memilih
elemen pada nama elemen.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Blue;
text-align:
center;
}
p {
color:
green;
}
</style>
</head>
<body>
<h1>Love yourself</h1>
<p>All the time that you rain on my
parade</p>
<p>And all the clubs you get in using my
name</p>
<p>You think you broke my heart</p>
</body>
</html>
Hasil:
Selector
id
Penjelasan
:
Selector id menggunakan atribut id pada
elemen html untuk memilih elemen khusus. Selector id tidak bisa dipanggil
secara berulangkali. Selector id ditandai dengan tanda “#”.
Script:
<!DOCTYPE html>
<html>
<head>
<style>
#dewi{
text-align:
center;
color:
violet;
}
#citra {
color:
red;
}
</style>
</head>
<body>
<p id="dewi">Maybe you should know
that</p>
<p id="citra">My mama doesn't like
you and she likes everyone.</p>
</body>
</html>
Hasil
:
Selector
class
Penjelasan
:
Selector class digunakan untuk
menentukan style dari sebuah group elemen. Selector class bisa dipakai
berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil
beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector
class dituliskan dengan ditandai dengan tanda titik “.” .
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
.iya {
text-align: center;
}
.no {
color:
darkblue;
}
</style>
</head>
<body>
<h1 class="iya">Cause if you like
the way you look that much</h1>
<p class="no">Oh baby you should go
and love yourself</p>
<p class="iya no">And if you think
taht i'm still holdin'non to somethin'</p>
</body>
</html>
Hasil
:
Grouping
selectors
Penjelasan
:
Selector ini digunakan untuk
mendeskripsikan style yang sama pada elemen. group selector memisahkan tiap
selector dengan tanda koma (,).
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
h1, p {
text-align: center;
color:
red;
}
</style>
</head>
<body>
<h1>Love yourself</h1>
<p>My mama doesn't like you and she likes
everyone</p>
</body>
</html>
Hasil
:
2.
CSS
How To
External
style sheet
Penjelasan
:
External style sheet merupakan ideal
ketika gaya diterapkan pada banyak halaman , dengan ini dapat mengubah
tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link
ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam
bagian head. Dengan eksternal style sheet dapat ditulis dalam bentuk
editor teks apapun , dan harus disimpan pada ekstensi .css.
Script
dalam bentuk styles.css
body {
background-color: lightblue;
}
h1 {
color:
red;
margin-left: 20px;
}
Script
:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="styles.css">
</head>
<body>
<h1>External Sheet</h1>
</body>
</html>
Hasil
:
Internal
style sheet
Penjelasan
:
Internal style sheet seharusnya digunakan
saat sebuah dokumen single mempunyai style yang unik. Hal tersebut
didefinisikan di bagian head dalam halaman html pada tag <style>.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: gray;
}
h1 {
color:
maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Hasil
:
Inline
style
Penjelasan
:
Dalam inline style kita dapat
menambahkan atribut style pada tag relevan. Atribut style dapat berisi beberapa
property dalam CSS.
Script
:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;
margin-left:20px;">Citra</h1>
<p style="color:brown">Dewi Citra
Kurnia</p>
</body>
</html>
Hasil
:
3.
CSS
Backgrounds
Penjelasan
:
CSS background properti digunakan untuk mendefinisikaan
efek-efek background pada sebuah eleemen.
Background
color
Penjelasan
:
Properti background color digunakan
untuk menentukan waran background pada sebuah elemen.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background
color.</p>
We are still in the div element.
</div>
</body>
</html>
Hasil
:
Backgroud
image
Penjelasan
:
Properti background image menentukan
sebuah gambar untuk digunakan sebagai background pada sebuah elemen.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("D.jpg");
}
</style>
</head>
<body>
<h1>Hello Citra!</h1>
<p>This text is not easy to read on this
background image.</p>
</body>
</html>
Hasil
:
Background
repeat
Penjelasan
:
Secara default, background repeat
digunakan untuk mengulang gambar background secara horizontal dan vertical.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("50799.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Nama saya adalah Dewi Citra
Kurnia</p>
</body>
</html>
Hasil
:
Background
set position and no repeat
Penjelasan
:
Tampilan gambar pada elemen ini hanya
ditentukan oleh properti backgroung repeat.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("50799.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image
example.</p>
<p>The background image is only showing once,
but it is disturbing the reader!</p>
</body>
</html>
Hasil
:
Background
shorthand property
Penjelasan
:
seperti contoh di atas, ada beberapa
properti untuk mempertimbangkan saat pemberian background. Untuk kode yang
lebih singkat, cara ini juga mungkin untuk menentukan semua properti dalam satu
properti single.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffff00 url("D.jpg") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello Citra!</h1>
<p>Now the background image is only shown
once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin
on the right side, so that the background image will not disturb the
text.</p>
</body>
</html>
Hasil
:
4.
CSS
Text
Text
color
Penjelasan
:
Properti color pada CSS teks digunakan
untuk mengatur warna pada teks. Dalam CSS, warna yang paling sering digunakan
yaitu, nilai HEX (seperti “#ff0000”), nilai RGB (seperti “rgb(255,0,0)”), dan nama
warna (seperti merah dll).
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:
red;
}
h1 {
color:
#00ff00;
}
p.ex {
color:
rgb(0,0,255);
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>This is an ordinary paragraph. Notice that
this text is red. The default text-color for a page is defined in the body
selector.</p>
<p class="ex">This is a paragraph
with class="ex". This text is blue.</p>
</body>
</html>
Hasil
:
Text
alignment
Penjelasan
:
Properti text align digunakan untuk
mengatur keadaan horizontal pada teks. Teks bisa diatur di rata tengah, kiri,
kanan, maupun rata kanan–kiri.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and
more vulnerable years my father gave me some advice that I've been turning over
in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world
haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser
window to see how the value "justify" works.</p>
</body>
</html>
Hasil
:
Text
decoration
Penjelasan
:
Properti text decoration digunakan untuk
mengatur atau menghilangkan dekorasi dari teks. Properti text decoration sering
digunkan untuk menghilangkan garis bawah dari link untuk tujuan desain.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p {
text-decoration:
none;
}
</style>
</head>
<body>
<h1>Dewi Citra Kurnia</h1>
<h2>Dewi Citra Kurnia</h2>
<h3>Dewi Citra Kurnia</h3>
<p>Dewi Citra Kurnia</p>
</body>
</html>
Hasil
:
Text
transformation
Penjelasan
:
Properti text transformation digunakan
untuk menentukan huruf besar dan huruf kecil pada teks.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">Dewi Citra
Kurnia</p>
<p class="lowercase">Dewi Citra
Kurnia</p>
<p class="capitalize">Dewi Citra
Kurnia</p>
</body>
</html>
Hasil
:
Text
indentation
Penjelasan
:
Properti text indentation digunakan
untuk menentukan lekukan pada baris pertama dalam teks.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>Sistem adalah Sekumpulan elemen yang saling
berkaitan & saling mempengaruhi dalam melakukan kegiatan bersama untuk
mencapai suatu tujuan. Sistem pakar (expert system) adalah sistem yang berusaha
mengapdosi pengetahuan manusia ke komputer, agar komputer dapat menyelesaikan
masalah seperti yang biasa dilakukan oleh para ahli.</p>
</body>
</html>
Hasil
:
5.
CSS
Fonts
Penjelasan
:
Properti CSS fonts mendefinisikan family
huruf, ketebalan, ukuran, dan style pada teks.
Font
Family
Penjelasan
:
Font family digunakan untuk menentukan jenis
huruf pada teks seperti times new roman, arial dan lain-lain.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a
paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a
paragraph, shown in the Arial font.</p>
</body>
</html>
Hasil
:
Font
Style
Penjelasan
:
Font style digunkan untuk menentukan
style huruf pada teks seperti italic (miring).
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a
paragraph in normal style.</p>
<p class="italic">This is a
paragraph in italic style.</p>
<p class="oblique">This is a
paragraph in oblique style.</p>
</body>
</html>
Hasil
:
Font
Size
Penjelasan
:
Font size digunakan untuk mengatur
ukuran huruf pada teks. Ukuran huruf pada teks bisa diatur dengan satuan pixel
maupun em.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:
40px;
}
h2 {
font-size:
1.875em; /* 30px/16=1.875em */
}
p {
font-size:
14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Hasil
:
6.
CSS
Links
Styling
links
Penjelasan
:
Link dapat diberi style dengan cara yang
berbeda. Link dapat diberi style dengan beberapa property CSS seperti warna, family huruf, background dan
lain-lain.
Empat pernyataan
link adalah :
- a: link – link, yang normal belum dikunjungi
- a: visited – link pengguna telah dikunjungi
- a: hover – link ketika pengguna mouse di atasnya
- a: active- link saat itu diklik
Pengaturan gaya
untuk beberapa link yang menyatakan ada beberapa
aturan untuk:
- a: hover HARUS datang setelah: link dan a: visited
- a: active HARUS datang setelah a: hover
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color:
#FF0000;
}
/* visited link */
a:visited {
color:
#00FF00;
}
/* mouse over link */
a:hover {
color:
#FF00FF;
}
/* selected link */
a:active {
color:
#0000FF;
}
</style>
</head>
<body>
<p><b><a
href="default.html" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover MUST come
after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come
after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Hasil
:
Common
link styles
Penjelasan
:
Dalam contoh
di atas warna link berubah tergantung pada pernyataan apa.
Beberapa cara umum lainnya untuk link style, yaitu :
Text
Decoration
Properti text-decoration digunakan untuk
menghapus garis bawah dari link.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.html"
target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and
a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the
CSS definition in order to be effective.</p>
</body>
</html>
Hasil
:
Background
color
Penjelasan
:
Properti background-color digunakan
untuk menentukan warna background dari link.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color:
#B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
</style>
</head>
<body>
<p><b><a
href="default.html" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover MUST come
after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come
after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Hasil
:
7.
CSS
Lists
Penjelasan
:
Dalam CSS, list dibedakan menjadi 3,
yaitu ordered list, unordered list, dan image list.
Different
list item markers
Penjelasan
:
Tipe dari tanda item list ditentukan
dengan properti tipe style list seperti tanda circle (bulat), square (persegi), upper-roman, dan lower-alpha.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Hasil
:
An
image as the list item marker
Penjelasan
:
Image (gambar) dapat digunakan sebagai
penanda item list dengan menggunkan properti list-style-image.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('hamtaro.ico');
margin-left:
100px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Hasil
:
Crossbrowser
solution
Penjelasan
:
Dalam crossbrowser solution, kita dapat
mengatur gambar pada list sesuai dengan kebutuhan kita dalam browser.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding:
0px;
margin:
0px;
}
ul li {
background-image: url(images.jpg);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Hasil
:
List
shorthand property
Penjelasan
:
Dalan hal ini semua properti bisa
disetting menjadi satu deklarasi. Untuk nilai propertinya yaitu
list-style-type, list-style-position, dan list-style-image.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("images.jpg");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Hasil
:
8.
CSS
Tables
Table
borders
Penjelasan
:
Table border digunakan untuk menentukan
border table dalam CSS dengan menggunakan property border.
Contoh di bawah ini menggunakan double
border. Ini karena kedua tabel dan elemen <th> atau <td> memisahkan
border.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:
1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Dewi Citra</td>
<td>Kurnia</td>
</tr>
<tr>
<td>Edi Candra</td>
<td>Kirana</td>
</tr>
<tr>
<td>Saidatul</td>
<td>Mukarromah</td>
</tr>
</table>
</body>
</html>
Hasil
:
Collapse
borders
Penjelasan
:
Properti Collapse-border mengatur apakah
border tabel menjadi border single atau pisah.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border:
2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Dewi
Citra</td>
<td>Kurnia</td>
</tr>
<tr>
<td>Edi Candra</td>
<td>Kirana</td>
</tr>
<tr>
<td>Saidatul</td>
<td>Mukarromah</td>
</tr>
</table>
</body>
</html>
Hasil
:
Table
width and height
Penjelasan
:
Lebar dan tinggi pada tabel
didefinisikan oleh property width dan height. Kita bisa mengatur berapa lebar
dan tinggi pada tabel pada elemen <th>.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border:
1px solid black;
}
table {
width:
50%;
}
th {
height:
50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Dewi Citra</td>
<td>Kurnia</td>
<td>$100</td>
</tr>
<tr>
<td>Edi Candra</td>
<td>Kirana</td>
<td>$150</td>
</tr>
</tr>
<tr>
<td>Saidatul</td>
<td>Mukarromah</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Hasil
:
Horizontal
text alignment
Penjelasan
:
Properti text-align dalam hal ini
mengatur keadaan horizontal seperti kiri, kanan, atau tengah. Secara default,
teks dalam elemen <th> berada di tengah dan teks pada elemen <td>
berada di kiri.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border:
1px solid black;
}
table {
width:
100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Hasil
:
Vertical
text alignment
Penjelasan
:
Properti vertical-align digunakan untuk
mengatur teks dalam keadaan vertical seperti atas, bawah, atau tengah. Secara
default, keadaan vertikal pada teks
dalam tabel adalah rata tengahuntuk kedua elemen <th> dan <td>.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border:
1px solid black;
}
td {
height:
50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Hasil
:
Table
padding
Penjelasan
:
Table padding digunakan untuk mengatur
spasi antara border dan konten dalam tabel dengan menggunakan property padding
pada elemen <th> dan <td>.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border:
2px solid black;
}
td {
padding:
20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Hasil
:
Table
color
Penjelasan
:
Table color digunakan untuk menentukan
warna pada border, teks, dan background pada elemen <th>.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border:
1px solid blue;
}
th {
background-color: skyblue;
color:
red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Hasil
:
9.
CSS
Box Model
Penjelasan
:
Dalam CSS, box model digunakan ketika
membahas desain dan layout. CSS box model pada dasarnya adalah sebuah kotak
yang membungkus disekitar elemen HTML dan itu terdiri dari margin, border,
padding, dan content.
Margin adalah ‘spasi’ dari sebuah
element dengan element lain di sekelilingnya. Margin bersifat transparan dan
digunakan agar setiap element tidak saling menempel satu sama lain.
Border adalah garis tepi pembatas
element. Kita bisa mengatur berbagai hal tentang border, seperti ketebalan,
warna, dan jenis garis yang digunakan.
Padding adalah jarak antara konten
dengan garis tepi (border) elemen.
Content adalah bagian inti dari sebuah
box.
Box model memungkinkan kita untuk
menambahkan sebuah elemen disekitar border dan mendefinisikan spasi antara
elemen-elemen.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width:
300px;
padding:
25px;
border:
25px solid red;
margin:
25px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</div>
</body>
</html>
Hasil
:
Width
and height of an element
Penjelasan
:
Dalam box model, kita dapat mengatur
lebar dan tinggi pada sebuah elemen secara benar dalam semua browser.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:
320px;
padding:
10px;
border:
5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<img src="D.jpg" width="350"
height="263" alt="Klematis">
<div>The picture above is 350px wide. The
total width of this element is also 350px.</div>
</body>
</html>
Hasil
:
10.
CSS
Border
Penjelasan
:
Properti CSS border memungkinkan untuk
menentukan style, ukuran, dan warna pada elemen border.
Border
style
Penjelasan
:
Properti style-border digunakan untuk
menentukan jenis border apa yang akan ditunjukkan.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted
border.</p>
<p class="dashed">A dashed
border.</p>
<p class="solid">A solid
border.</p>
<p class="double">A double
border.</p>
<p class="groove">A groove
border.</p>
<p class="ridge">A ridge
border.</p>
<p class="inset">An inset
border.</p>
<p class="outset">An outset
border.</p>
<p class="hidden">A hidden
border.</p>
</body>
</html>
Hasil
:
Border
width
Penjelasan
:
Properti border-width digunakan untuk
mengatur kelebaran pada border. Kelebaran tersebut diatur dalam satuan pixels
atau menggunakan salah satu dari tiga nilai yaitu thin (tipis), medium (sedang)
dan thick (tebal).
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<p class="one">Dewi Citra Kurnia</p>
<p class="two">Dewi Citra
Kurnia</p>
<p class="three">Dewi Citra
Kurnia</p>
</body>
</html>
Hasil
:
Border
color
Penjelasan
:
Properti border-color digunakan untuk
mengatur warna pada border. Warna dapat ditentukan dengan nama warna (seperti
red), RGB (seperti “rgb(255,0,0)”), dan HEX (seperti “#ff0000”). Atau juga bisa
mengatur warna border menggunakan “transparent”.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: lightgreen;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">A solid lightgreen
border</p>
<p class="two">A solid green
border</p>
</body>
</html>
Hasil
:
Border
individual sides
Penjelasan
:
Dalam CSS memungkinkan untuk menentukan
perbedaan style border untuk sisi-sisi yang berbeda dengan menggunkan property
border-top-style, border-right-style, border-bottom-style, dan
border-left-style.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
Hasil
:
11.
CSS
Outline
Penjelasan
:
Outline adalah sebuah baris yang
digambarkan disekitar elemen-elemen (diluar sisi border). Properti outline
menentukan style, warna, dan lebar pada outline. Outline tidak bagian dari
diimensi elemen. Total lebar dan tinggi elemen tidak dipengaruhi oleh lebar
pada outline.
Properti CSS Outline :
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:
2px solid red;
outline-style: groove;
outline-color: #00ffee;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</body>
</html>
Hasil
:
12.
CSS
Margin
Penjelasan
:
Margin adalah sebuah area sekitar elemen
(diluar border) yang secara menyeluruh mempunyai sifat yang transparan dan
tidak mempunyai warna pada background.
Margin atas, bawah, kanan, dan kiri
dapat diubah dengan bebas menggunakan properti-properti terpisah.
Margin
individual sides
Penjelasan
:
Dalam CSS memungkinkan untuk menenutukan
perbedaan margin untuk sisi yang berbeda pada sebuah elemen menggunakan
properti margin-top, margin-bottom, margin-left, dan margin-right
.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color:
yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 150px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified
margins.</p>
<p class="ex">This is a paragraph
with specified margins.</p>
</body>
</html>
Hasil
:
Margin
shorthand property
Penjelasan
:
Untuk mempersingkat kode dalam CSS
margin, kita dapat menentukan semua properti margin dalam satu properti, yaitu
menggunakan properti margin.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin:
50px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified
margins.</p>
<p class="ex">This is a paragraph
with specified margins.</p>
</body>
</html>
Hasil
:
13.
CSS
Padding
Penjelasan
:
Properti CSS padding mendefinisikan
spasi antara elemen border dan elemen
konten.
Padding adalah sebuah area di sekitar
konten (diluar border) pada sebuah elemen. Padding dipengaruhi oleh warna
background pada elemen.
Script
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.padding {
padding-top: 25px;
padding-right: 150px;
padding-bottom: 25px;
padding-left: 150px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a
paragraph with specified paddings.</p>
</body>
</html>
Hasil
:
Tidak ada komentar:
Posting Komentar