.jpeg)
silkan sebuah halaman website yang terlihat menarik
dan modern. ada beberapa cara mempercantik background atau latar belakang website. bisa
mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan
gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah
background dengan CSS, gunakan property background pada CSS. property background selain
di gunakan untuk mengubah background body website, bisa juga di gunakan untuk mengubah
gambar background pada sebuah elemen HTML yang di inginkan.
Cara mengubah background dengan CSS
Ebook Belajar HTML & CSS Dasar 59Diki Alfarabi Hadi | www.malasngoding.com
pada tutorial belajar CSS mengubah background dengan css ini akan di jelaskan bagaimana cara
mengubah background dengan menggunakan CSS. langsung saja masuk ke cara mengubah
background menggunakan CSS. buat sebuah file html dengan nama file html nya terserah anda.
di sini saya membuat nya dengan nama index.html. kemudian buat sebuah file css dengan
namanya juga terserah anda tapi di sini saya membuat file css dengan nama style.css.
Mengubah warna background dengan CSS
Perhatikan penjelasan berikut ini untuk cara mengubah warna background dengan menggunakan
CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Merubah warna background dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial mengubah warna background dengan CSS</h1>
</body>
</html>
style.css
body{
background: blue;
color: white;
}
Maka hasilnya
Ebook Belajar HTML & CSS Dasar 60Diki Alfarabi Hadi | www.malasngoding.com
Gambar 26 cara merubah warna dengan css
Pada syntax css di atas kita menentukan body yang akan di modifikasi kemudian memberikan
property background dengan value blue (biru) dan warna color font dengan warna white (putih).
Mengubah gambar background dengan CSS
Pada sub judul mengubah gambar background dengan css ini akan di jelaskan bagaimana
cara mengubah background sebuah halaman website dengan menggunakan gambar. oleh sebab
itu anda harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman
website anda. di sini saya sudah menyediakan sebuah gambar sederhana yang akan saya jadikan
gambar pada background. letakkan file gambar satu folder dengan file html dan css agar tidak
kebingungan nantinya. nama file gambar saya yaitu malasngoding.png
Ebook Belajar HTML & CSS Dasar 60Diki Alfarabi Hadi | www.malasngoding.com
Gambar 26 cara merubah warna dengan css
Pada syntax css di atas kita menentukan body yang akan di modifikasi kemudian memberikan
property background dengan value blue (biru) dan warna color font dengan warna white (putih).
Mengubah gambar background dengan CSS
Pada sub judul mengubah gambar background dengan css ini akan di jelaskan bagaimana
cara mengubah background sebuah halaman website dengan menggunakan gambar. oleh sebab
itu anda harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman
website anda. di sini saya sudah menyediakan sebuah gambar sederhana yang akan saya jadikan
gambar pada background. letakkan file gambar satu folder dengan file html dan css agar tidak
kebingungan nantinya. nama file gambar saya yaitu malasngoding.png
Ebook Belajar HTML & CSS Dasar 60Diki Alfarabi Hadi | www.malasngoding.com
Gambar 26 cara merubah warna dengan css
Pada syntax css di atas kita menentukan body yang akan di modifikasi kemudian memberikan
property background dengan value blue (biru) dan warna color font dengan warna white (putih).
Mengubah gambar background dengan CSS
Pada sub judul mengubah gambar background dengan css ini akan di jelaskan bagaimana
cara mengubah background sebuah halaman website dengan menggunakan gambar. oleh sebab
itu anda harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman
website anda. di sini saya sudah menyediakan sebuah gambar sederhana yang akan saya jadikan
gambar pada background. letakkan file gambar satu folder dengan file html dan css agar tidak
kebingungan nantinya. nama file gambar saya yaitu malasngoding.png
Ebook Belajar HTML & CSS Dasar 61Diki Alfarabi Hadi | www.malasngoding.com
Gambar 27 cara membuat background gambar dengan css
index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat background dengan gambar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Membuat background gambar dengan CSS</h1>
</body>
</html>
style.css
Ebook Belajar HTML & CSS Dasar 61Diki Alfarabi Hadi | www.malasngoding.com
Gambar 27 cara membuat background gambar dengan css
index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat background dengan gambar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Membuat background gambar dengan CSS</h1>
</body>
</html>
style.css
Ebook Belajar HTML & CSS Dasar 61Diki Alfarabi Hadi | www.malasngoding.com
Gambar 27 cara membuat background gambar dengan css
index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat background dengan gambar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Membuat background gambar dengan CSS</h1>
</body>
</html>
style.css
Ebook Belajar HTML & CSS Dasar 62Diki Alfarabi Hadi | www.malasngoding.com
body{
background: url('malasngoding.png');
color: #fff;
}
perhatikan pada syntax css di atas. untuk membuat gambar background gunakan syntax
background: url('malasngoding.png');
Gambar 28 tutorial cara merubah background gambar dengan css
Gambar pun berhasil di pasang sebagai background halaman. sekian tutorial belajar dasar CSS
tentang cara mengubah background dengan CSS.
Belajar CSS Dasar : Margin dan Padding pada CSS
Ebook Belajar HTML & CSS Dasar 62Diki Alfarabi Hadi | www.malasngoding.com
body{
background: url('malasngoding.png');
color: #fff;
}
perhatikan pada syntax css di atas. untuk membuat gambar background gunakan syntax
background: url('malasngoding.png');
Gambar 28 tutorial cara merubah background gambar dengan css
Gambar pun berhasil di pasang sebagai background halaman. sekian tutorial belajar dasar CSS
tentang cara mengubah background dengan CSS.
Belajar CSS Dasar : Margin dan Padding pada CSS
Ebook Belajar HTML & CSS Dasar 62Diki Alfarabi Hadi | www.malasngoding.com
body{
background: url('malasngoding.png');
color: #fff;
}
perhatikan pada syntax css di atas. untuk membuat gambar background gunakan syntax
background: url('malasngoding.png');
Gambar 28 tutorial cara merubah background gambar dengan css
Gambar pun berhasil di pasang sebagai background halaman. sekian tutorial belajar dasar CSS
tentang cara mengubah background dengan CSS.
Belajar CSS Dasar : Margin dan Padding pada CSS
Ebook Belajar HTML & CSS Dasar 63Diki Alfarabi Hadi | www.malasngoding.com
Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah
website dengan menggunakan CSS. karena margin dan padding di gunakan untuk mengatur sisi
dalam dari pada sebuah element dan mengatur sisi sebelah luar dari sebuah element. untuk itu
pada tutorial belajar CSS Dasar Margin dan Padding pada CSS ini akan dijelaskan tentang apa
itu margin? apa itu padding? dan bagaimana cara penggunaannya pada CSS.
Mengenal Margin pada CSS
Margin yaitu sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar
element. anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar
margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar
bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah
kiri element, dan ‘margin-right’ yaitu sisi luar pada bagian sebelah kanan. tetapi jika anda
hanya menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah,
kiri dan kanan element. berikut ini yaitu Contoh penggunaan margin pada CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Margin CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1>Ini yaitu box</h1>
</div>
<div class="box-dua">
<h1>Ini yaitu box dua</h1>
</div>
Ebook Belajar HTML & CSS Dasar 64Diki Alfarabi Hadi | www.malasngoding.com
</body>
</html>
style.css
.box{
background: blue;
height: 200px;
width: 300px;
margin: 20px;
}
.box-dua{
background: red;
height: 100px;
width: 200px;
margin-left: 70px;
}
Ebook Belajar HTML & CSS Dasar 65Diki Alfarabi Hadi | www.malasngoding.com
Gambar 29 mengenal margin pada css
perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri
sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau
jarak luar segala sisi sebesar 20px.
Mengenal Padding pada CSS
Padding yaitu sisi dalam dari sebuah element. kita bisa menggunakan syntax
padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. sama
seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu
padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah
atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan
‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’
yaitu sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja
maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian
dalam. berikut ini yaitu Contoh penggunaan padding pada CSS
index.html
Ebook Belajar HTML & CSS Dasar 65Diki Alfarabi Hadi | www.malasngoding.com
Gambar 29 mengenal margin pada css
perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri
sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau
jarak luar segala sisi sebesar 20px.
Mengenal Padding pada CSS
Padding yaitu sisi dalam dari sebuah element. kita bisa menggunakan syntax
padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. sama
seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu
padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah
atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan
‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’
yaitu sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja
maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian
dalam. berikut ini yaitu Contoh penggunaan padding pada CSS
index.html
Ebook Belajar HTML & CSS Dasar 65Diki Alfarabi Hadi | www.malasngoding.com
Gambar 29 mengenal margin pada css
perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri
sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau
jarak luar segala sisi sebesar 20px.
Mengenal Padding pada CSS
Padding yaitu sisi dalam dari sebuah element. kita bisa menggunakan syntax
padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. sama
seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu
padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah
atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan
‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’
yaitu sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja
maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian
dalam. berikut ini yaitu Contoh penggunaan padding pada CSS
index.html
Ebook Belajar HTML & CSS Dasar 66Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>Padding CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>www.malasngoding.com</h1>
<div class="box">
<h1>Ini yaitu box</h1>
</div>
<div class="box-dua">
<h1>Ini yaitu box dua</h1>
</div>
</body>
</html>
style.css
h1{
text-align: center;
}
.box{
background: blue;
height: 200px;
width: 300px;
padding: 20px;
}
.box-dua{
Ebook Belajar HTML & CSS Dasar 67Diki Alfarabi Hadi | www.malasngoding.com
background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}
Gambar 30 Belajar CSS Margin dan Padding pada CSS
sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan
padding pada css.
Belajar CSS Dasar : Mengatur Font dengan CSS
Pada tutorial belajar css mengatur font dengan css ini akan di jelaskan tentang cara
melakukan pengaturan font dengan css. misalnya seperti merubah font, mengatur ukuran font,
warna font serta jenis bentuk font(garis miring, huruf tebal, tulisan miring).
Ebook Belajar HTML & CSS Dasar 67Diki Alfarabi Hadi | www.malasngoding.com
background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}
Gambar 30 Belajar CSS Margin dan Padding pada CSS
sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan
padding pada css.
Belajar CSS Dasar : Mengatur Font dengan CSS
Pada tutorial belajar css mengatur font dengan css ini akan di jelaskan tentang cara
melakukan pengaturan font dengan css. misalnya seperti merubah font, mengatur ukuran font,
warna font serta jenis bentuk font(garis miring, huruf tebal, tulisan miring).
Ebook Belajar HTML & CSS Dasar 67Diki Alfarabi Hadi | www.malasngoding.com
background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}
Gambar 30 Belajar CSS Margin dan Padding pada CSS
sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan
padding pada css.
Belajar CSS Dasar : Mengatur Font dengan CSS
Pada tutorial belajar css mengatur font dengan css ini akan di jelaskan tentang cara
melakukan pengaturan font dengan css. misalnya seperti merubah font, mengatur ukuran font,
warna font serta jenis bentuk font(garis miring, huruf tebal, tulisan miring).
Ebook Belajar HTML & CSS Dasar 68Diki Alfarabi Hadi | www.malasngoding.com
Beberapa syntax css yang digunakan untuk mengatur font:
font-size digunakan untuk mengatur ukuran font
font-weight di gunakan untuk mengatur ketebalan font
font-family untuk mengubah jenis font
font-style digunakan untuk merubah gaya pada font.
font-color digunakan untuk merubah warna font.
berikut ini yaitu contoh cara mengatur font dengan css.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Font CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="tulisan_satu">Belajar CSS Dasar di www.malasngoding.com</h1>
<h1 class="tulisan_dua">Belajar CSS Dasar di www.malasngoding.com</h1>
<h1 class="tulisan_tiga">Belajar CSS Dasar di www.malasngoding.com</h1>
</body>
</html>
style.css
.tulisan_satu{
font-color: red;
font-family: sans-serif;
font-style: normal;
}
.tulisan_dua{
font-color: green;
Ebook Belajar HTML & CSS Dasar 69Diki Alfarabi Hadi | www.malasngoding.com
font-size: 24pt;
font-style: italic;
}
.tulisan_tiga{
font-color: red;
font-weight: bold;
font-style: oblique;
}
Gambar 31 tutorial css mengatur font dengan css
dapat di lihat pada contoh mengatur font dengan css di atas. untuk merubah warna font bisa
menggunakan perintah ‘color’, font-family digunakan untuk merubah jenis font, font-style
digunakan untuk mengatur gaya font, italic,normal dan lainnta. font-size digunakan untuk
mengatur ukuran dari font. dan font-weight digunakan untuk menentukan lebar dari pada font.
sekian tutorial belajar css mengatur font dengan css.
Ebook Belajar HTML & CSS Dasar 69Diki Alfarabi Hadi | www.malasngoding.com
font-size: 24pt;
font-style: italic;
}
.tulisan_tiga{
font-color: red;
font-weight: bold;
font-style: oblique;
}
Gambar 31 tutorial css mengatur font dengan css
dapat di lihat pada contoh mengatur font dengan css di atas. untuk merubah warna font bisa
menggunakan perintah ‘color’, font-family digunakan untuk merubah jenis font, font-style
digunakan untuk mengatur gaya font, italic,normal dan lainnta. font-size digunakan untuk
mengatur ukuran dari font. dan font-weight digunakan untuk menentukan lebar dari pada font.
sekian tutorial belajar css mengatur font dengan css.
Ebook Belajar HTML & CSS Dasar 69Diki Alfarabi Hadi | www.malasngoding.com
font-size: 24pt;
font-style: italic;
}
.tulisan_tiga{
font-color: red;
font-weight: bold;
font-style: oblique;
}
Gambar 31 tutorial css mengatur font dengan css
dapat di lihat pada contoh mengatur font dengan css di atas. untuk merubah warna font bisa
menggunakan perintah ‘color’, font-family digunakan untuk merubah jenis font, font-style
digunakan untuk mengatur gaya font, italic,normal dan lainnta. font-size digunakan untuk
mengatur ukuran dari font. dan font-weight digunakan untuk menentukan lebar dari pada font.
sekian tutorial belajar css mengatur font dengan css.
Ebook Belajar HTML & CSS Dasar 70Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Mengatur Hyperlink dengan CSS
Hyperlink merupakan link yang dibuat untuk mengalihkan halaman saat di klik.
hyperlink atau link dibuat dengan menggunakan tag <a> dan di akhiri dengan tag </a> di HTML.
dan untuk mempercantik, mengubah atau mengatur hyperlink dengan css caranya sangat mudah.
pada tutorial belajar css mengatur hyperlink dengan css ini akan di jelaskan tentang cara
mengatur hyperlink dengan css. mulai dari membuat warna pada link, mengubah link menjadi
bentuk tombol, membuat tampilan hyperlink berubah pada saat di klik dan sebagainya.
Ada empat status yang di miliki oleh hyperlink html dan bisa di manipulasi dengan
menggunakan css. yaitu :
link . merupakan link aktif biasa.
visited. merupakan status sebuah link yang telah di kunjungi.
hover. merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
active. merupakan status sebuah link atau hyperlink pada saat sudah di klik.
untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat di tulis dengan syntax:
a:link = untuk link biasa
a:visited = merupakan status sebuah link yang telah di kunjungi.
a:hover = merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
a:active = merupakan status sebuah link atau hyperlink pada saat sudah di klik.
berikut ini yaitu contoh mengatur hyperlink dengan css
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink CSS</title>
Ebook Belajar HTML & CSS Dasar 71Diki Alfarabi Hadi | www.malasngoding.com
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="link" href="http://www.malasngoding.com">Klik di sini</a>
</body>
</html>
style.css
.link{
font-size: 20pt;
}
.link:hover{
color: red;
}
.link:link{
color: blue;
}
Ebook Belajar HTML & CSS Dasar 72Diki Alfarabi Hadi | www.malasngoding.com
Gambar 32 mengatur hyperlink dengan css
dan saat cursor di letakkan pada link
Gambar 33 saat cursor mouse di letakkan di atas link
design link dengan css
index.html
Ebook Belajar HTML & CSS Dasar 72Diki Alfarabi Hadi | www.malasngoding.com
Gambar 32 mengatur hyperlink dengan css
dan saat cursor di letakkan pada link
Gambar 33 saat cursor mouse di letakkan di atas link
design link dengan css
index.html
Ebook Belajar HTML & CSS Dasar 72Diki Alfarabi Hadi | www.malasngoding.com
Gambar 32 mengatur hyperlink dengan css
dan saat cursor di letakkan pada link
Gambar 33 saat cursor mouse di letakkan di atas link
design link dengan css
index.html
Ebook Belajar HTML & CSS Dasar 73Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="contoh-link" target="_blank" href="http://www.malasngoding.com">Klik di sini</a>
</body>
</html>
style.css
.contoh-link,
.contoh-link:link,
.contoh-link:active,
.contoh-link:visited{
font-size: 20pt;
background: #1ABC9C;
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
}
.contoh-link:hover{
background: #16A085;
}
Ebook Belajar HTML & CSS Dasar 74Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Mengatur Format Text dengan CSS
Pada tutorial belajar CSS Mengatur Format Text Dengan CSS ini akan di jelaskan
tentang penggunaan css dalam mengatur atau memodifikasi text dengan tujuan agar format text
dapat menjadi seperti yang kita inginkan dan kita butuhkan. contohnya untuk mengatur text
menjadi justify atau kita kenal dengan sebutan rata kiri rata kanan, mengatur jarak indent text,
mengatur huruf menjadi uppercase atau huruf besar, huruf kecil, warna text dan juga mengatur
dekorasi atau design pada text. silahkan simak penjelasan berikut tentang mengatur format
text yang dapat di lakukan menggunakan CSS.
adapun beberata syntax CSS yang bisa di gunakan untuk mengatur format text diantara nya
yaitu :
color
Di gunakan untuk mengatur warna text, value yang dapat di isi berupa warna atau kode
warna.
text-align
Di gunakan untuk mengatur posisi align pada text atau rata text, value yang bisa di isi
diantaranya yaitu center untuk membuat text rata tengah, left untuk membuat text
menjadi rata kiri, right untuk membuat text menjadi rata kanan dan justify untuk
membuat text menjadi rata kanan dan rata kiri.
text-decoration
Di gunakan untuk mengatur dekorasi text, value nya berupa none untuk membuat text
tidak memiliki dekorasi, overline untuk membuat text memiliki garis pada bagian atas
text, line-through untuk membuat garis yang mencoreng pada text, dan underline untuk
membuat garis pada bawah text(garis bawah).
text-transform
Digunakan untuk mengatur huruf kapital pada text, value yang bisa di gunakan
diantaranya yaitu uppercase untuk membuat text menjadi huruf besar, lowercase untuk
membuat text menjadi huruf kecil, dan capitalize untuk membuat huruf awal pada tiap
kata menjadi huruf besar.
Ebook Belajar HTML & CSS Dasar 75Diki Alfarabi Hadi | www.malasngoding.com
text-indent
Digunakan untuk mengatur jarak alinea pada text, value yang bisa digunakan berupa nilai
pixel dan lainnya sesuai kebutuhan.
text-spacing
Digunakan untuk mengatur jarak antar karakter pada text, value yang di isi berupa nilai
pixel dan lain-lain. Mengatur Format Text Dengan CSS.
word-spacing
Digunakan untuk mengatur jarak antar kata pada text, value yang di isi juga berupa nilai
pixel.
line-height
Digunakan untuk mengatur jarak antar baris pada text value yang di isi berupa nilai.
text-shadow
Digunakan untuk mengatur efek bayang pada text, value yang di isikan pertama mengisi
nilai untuk jarak kiri kanan, dan kedua mengisi jarak atas bawah dan yang ketiga mengisi
warna. untuk contoh penulisanya 2px 5px blue.
vertical-align
Digunakan untuk mengatur align dalam bentuk vertikal pada text value yang digunakan
yaitu left untuk membuat text rata kiri, right untuk rata atas dan center untuk rata
tengah.
Untuk contoh cara mengatur format text dengan css. buat sebuah file html dan sebuah file css. di
sini saya membuat file index.html dan style.css
Cara mengubah warna text dengan CSS
untuk mengubah warna text dengan CSS perhatikan contoh berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>format text CSS</title>
Ebook Belajar HTML & CSS Dasar 76Diki Alfarabi Hadi | www.malasngoding.com
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_warna">Mengatur format text dengan CSS</p>
</body>
</html>
style.css
.tulisan_warna{
color: blue;
}
dapat di lihat pada contoh di atas terdapat sebuah tag paragraf yang mempunyai class
tulisan_warna. Kemudian mengatur warna biru dengan css.
Cara menggunakan text align CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_kiri">Mengatur format text dengan CSS</p>
<p class="tulisan_kanan">Mengatur format text dengan CSS</p>
<p class="tulisan_tengah">Mengatur format text dengan CSS</p>
<p class="tulisan_justify">
Belajar tutorial CSS dasar di www.malasngoding.com.
Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Ebook Belajar HTML & CSS Dasar 77Diki Alfarabi Hadi | www.malasngoding.com
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>
style.css
.tulisan_kiri{
text-align: left;
}
.tulisan_kanan{
text-align: right;
}
.tulisan_tengah{
text-align: center;
}
.tulisan_justify{
text-align: justify;
}
Ebook Belajar HTML & CSS Dasar 78Diki Alfarabi Hadi | www.malasngoding.com
Gambar 34 belajar css mengatur format text dengan css
Belajar CSS Mengatur format text dengan CSS
untuk contoh mengatur format text dengan CSS lainnya silahkan perhatikan contoh berikut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_satu">Mengatur format text dengan CSS</p>
<p class="tulisan_dua">Mengatur format text dengan CSS</p>
<p class="tulisan_tiga">Mengatur format text dengan CSS</p>
<p class="tulisan_empat">
Belajar tutorial CSS dasar di www.malasngoding.com.
Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com.
Lorem ipsum dolor sit amet, consectetur adipisicing 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
Ebook Belajar HTML & CSS Dasar 78Diki Alfarabi Hadi | www.malasngoding.com
Gambar 34 belajar css mengatur format text dengan css
Belajar CSS Mengatur format text dengan CSS
untuk contoh mengatur format text dengan CSS lainnya silahkan perhatikan contoh berikut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_satu">Mengatur format text dengan CSS</p>
<p class="tulisan_dua">Mengatur format text dengan CSS</p>
<p class="tulisan_tiga">Mengatur format text dengan CSS</p>
<p class="tulisan_empat">
Belajar tutorial CSS dasar di www.malasngoding.com.
Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com.
Lorem ipsum dolor sit amet, consectetur adipisicing 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
Ebook Belajar HTML & CSS Dasar 78Diki Alfarabi Hadi | www.malasngoding.com
Gambar 34 belajar css mengatur format text dengan css
Belajar CSS Mengatur format text dengan CSS
untuk contoh mengatur format text dengan CSS lainnya silahkan perhatikan contoh berikut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_satu">Mengatur format text dengan CSS</p>
<p class="tulisan_dua">Mengatur format text dengan CSS</p>
<p class="tulisan_tiga">Mengatur format text dengan CSS</p>
<p class="tulisan_empat">
Belajar tutorial CSS dasar di www.malasngoding.com.
Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com.
Lorem ipsum dolor sit amet, consectetur adipisicing 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
Ebook Belajar HTML & CSS Dasar 79Diki Alfarabi Hadi | www.malasngoding.com
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>
style.css
.tulisan_satu{
color: blue;
text-decoration: underline;
}
.tulisan_dua{
text-align: right;
text-transform: capitalize;
text-decoration: overline;
}
.tulisan_tiga{
text-align: center;
text-transform: lowercase;
text-decoration: line-through;
word-spacing: 10px;
}
.tulisan_empat{
text-transform: uppercase;
text-indent: 30px;
line-height: 30px;
letter-spacing: 5px;
}
Ebook Belajar HTML & CSS Dasar 80Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Mengenal Position CSS
Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. terkadang
kita ingin membuat atau menetapkan posisi sebuah element dengan element yang lain. maka
dengan menggunakan property position CSS ini kita dapat menentukan posisi sebuah element
HTML sesuai dengan yang kita inginkan. belajar css mengenal position css.
Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah
element HTML yaitu :
static
relative
fixed
absolute
secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti
menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan
posisi sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur
terlebih dahulu. karena property lain tergantung dengan position yang di tetapkan.
Static
Position static digunakan untuk mengatur element menjadi statis secara default. element
akan mengikuti posisi normal secara default.
contoh penggunaan position static
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Ebook Belajar HTML & CSS Dasar 81Diki Alfarabi Hadi | www.malasngoding.com
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: static;
}
Gambar 35 contoh position static css
Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Ebook Belajar HTML & CSS Dasar 81Diki Alfarabi Hadi | www.malasngoding.com
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: static;
}
Gambar 35 contoh position static css
Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Ebook Belajar HTML & CSS Dasar 81Diki Alfarabi Hadi | www.malasngoding.com
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: static;
}
Gambar 35 contoh position static css
Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Ebook Belajar HTML & CSS Dasar 82Diki Alfarabi Hadi | www.malasngoding.com
<body>
<div class="kotak">Tutorial position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: relative;
left: 40px;
padding: 10px;
}
Gambar 36 contoh position relative css
Fixed
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap.
tanpa ada perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top
dan right pada position fixed.
Ebook Belajar HTML & CSS Dasar 82Diki Alfarabi Hadi | www.malasngoding.com
<body>
<div class="kotak">Tutorial position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: relative;
left: 40px;
padding: 10px;
}
Gambar 36 contoh position relative css
Fixed
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap.
tanpa ada perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top
dan right pada position fixed.
Ebook Belajar HTML & CSS Dasar 82Diki Alfarabi Hadi | www.malasngoding.com
<body>
<div class="kotak">Tutorial position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: relative;
left: 40px;
padding: 10px;
}
Gambar 36 contoh position relative css
Fixed
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap.
tanpa ada perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top
dan right pada position fixed.
Ebook Belajar HTML & CSS Dasar 83Diki Alfarabi Hadi | www.malasngoding.com
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: fixed;
left: 40px;
padding: 10px;
}
Ebook Belajar HTML & CSS Dasar 84Diki Alfarabi Hadi | www.malasngoding.com
Gambar 37 contoh position fixed css
Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain.
position yaitu salah satu propertyposition css yang sangat berguna. salah satunya yaitu untuk
membuat menu dropdown dengan HTML dan CSS.
Gambar 38 contoh position absolute css
Ebook Belajar HTML & CSS Dasar 84Diki Alfarabi Hadi | www.malasngoding.com
Gambar 37 contoh position fixed css
Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain.
position yaitu salah satu propertyposition css yang sangat berguna. salah satunya yaitu untuk
membuat menu dropdown dengan HTML dan CSS.
Gambar 38 contoh position absolute css
Ebook Belajar HTML & CSS Dasar 84Diki Alfarabi Hadi | www.malasngoding.com
Gambar 37 contoh position fixed css
Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain.
position yaitu salah satu propertyposition css yang sangat berguna. salah satunya yaitu untuk
membuat menu dropdown dengan HTML dan CSS.
Gambar 38 contoh position absolute css
Ebook Belajar HTML & CSS Dasar 85Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Mengubah border dengan CSS
Pada tutorial ini kita akan membahas tentang manipulasi border dengan menggunakan
CSS .CSS memungkinkan kita untuk memanipulasi atau mengubah ukuran, warna, dan gaya atau
bentuk pada border. Misalnya border yang berbentuk titik-titik, strip dan yang bermodel biasa
saja .
untuk contoh mengubah border dengan CSS silahkan simak penjelasan berikut ini.
Mengubah Border Style
Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk
titik-titik, berbentuk garis yang putus-putus, garis ganda dan banyak lagi style/gaya yang bisa di
gunakan pada garis dengan CSS . untuk membuat garis sekaligus memberikan value style yang
kita inginkan kita bisa menggunakan property css border-style. silahkan perhatikan contoh di
bawah ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
<p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>
Ebook Belajar HTML & CSS Dasar 86Diki Alfarabi Hadi | www.malasngoding.com
</html>
style.css
#garis_1{
border-style:solid;
}
#garis_2{
border-style: dotted;
}
#garis_3{
border-style: dashed;
}
#garis_4{
border-style: double;
}
#garis_5{
border-style: groove;
}
#garis_6{
border-style: inset;
}
#garis_7{
border-style: outset;
}
#garis_8{
border-style: ridge;
}
Berikut yaitu contoh border-style saat di jalankan pada browser
Ebook Belajar HTML & CSS Dasar 87Diki Alfarabi Hadi | www.malasngoding.com
Gambar 39 contoh border style css
Mengatur Ukuran Border CSS
Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-
width.berikut ini yaitu contoh cara penulisan property border-width untuk membuat ukuran
garis.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
Ebook Belajar HTML & CSS Dasar 87Diki Alfarabi Hadi | www.malasngoding.com
Gambar 39 contoh border style css
Mengatur Ukuran Border CSS
Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-
width.berikut ini yaitu contoh cara penulisan property border-width untuk membuat ukuran
garis.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
Ebook Belajar HTML & CSS Dasar 87Diki Alfarabi Hadi | www.malasngoding.com
Gambar 39 contoh border style css
Mengatur Ukuran Border CSS
Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-
width.berikut ini yaitu contoh cara penulisan property border-width untuk membuat ukuran
garis.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
Ebook Belajar HTML & CSS Dasar 88Diki Alfarabi Hadi | www.malasngoding.com
<p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>
style.css
#garis_1{
border-style:solid;
border-width: 5px;
}
#garis_2{
border-style: dotted;
border-width: 10px;
}
#garis_3{
border-style: dashed;
border-width: 3px;
}
#garis_4{
border-style: double;
border-width: 9px;
}
#garis_5{
border-style: groove;
border-width: 25px;
}
#garis_6{
border-style: inset;
border-width: 5px;
}
#garis_7{
border-style: outset;
Ebook Belajar HTML & CSS Dasar 89Diki Alfarabi Hadi | www.malasngoding.com
border-width: 5px;
}
#garis_8{
border-style: ridge;
border-width: 50px;
}
dan perhatikan ukuran garis setelah kita mengaturnya dengan border-width.
Gambar 40 mengatur ukuran garis dengan border-width
Memberi warna pada border
untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut
yaitu contoh membuat warna pada garis menggunakan CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
Ebook Belajar HTML & CSS Dasar 89Diki Alfarabi Hadi | www.malasngoding.com
border-width: 5px;
}
#garis_8{
border-style: ridge;
border-width: 50px;
}
dan perhatikan ukuran garis setelah kita mengaturnya dengan border-width.
Gambar 40 mengatur ukuran garis dengan border-width
Memberi warna pada border
untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut
yaitu contoh membuat warna pada garis menggunakan CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
Ebook Belajar HTML & CSS Dasar 89Diki Alfarabi Hadi | www.malasngoding.com
border-width: 5px;
}
#garis_8{
border-style: ridge;
border-width: 50px;
}
dan perhatikan ukuran garis setelah kita mengaturnya dengan border-width.
Gambar 40 mengatur ukuran garis dengan border-width
Memberi warna pada border
untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut
yaitu contoh membuat warna pada garis menggunakan CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
Ebook Belajar HTML & CSS Dasar 90Diki Alfarabi Hadi | www.malasngoding.com
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
<p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>
style.css
#garis_1{
border-style:solid;
border-width: 5px;
}
#garis_2{
border-style: dotted;
border-width: 10px;
border-color:red;
}
#garis_3{
border-style: dashed;
border-width: 3px;
border-color:blue;
}
#garis_4{
border-style: double;
border-width: 9px;
border-color:green;
Ebook Belajar HTML & CSS Dasar 91Diki Alfarabi Hadi | www.malasngoding.com
}
#garis_5{
border-style: groove;
border-width: 25px;
border-color:#12ff00;
}
#garis_6{
border-style: inset;
border-width: 5px;
border-color:#333333;
}
#garis_7{
border-style: outset;
border-width: 5px;
border-color:yellow;
}
#garis_8{
border-style: ridge;
border-width: 50px;
border-color: violet;
}
Dan hasilnya
Ebook Belajar HTML & CSS Dasar 92Diki Alfarabi Hadi | www.malasngoding.com
Gambar 41 Belajar CSS Dasar : Mengubah border dengan CSS
Cara cepat memanipulasi border dengan CSS
Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita
bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis
dan warna. untuk cara cepat memanipulasi border dengan csssilahkan perhatikan contoh berikut
ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dotted</p>
Ebook Belajar HTML & CSS Dasar 92Diki Alfarabi Hadi | www.malasngoding.com
Gambar 41 Belajar CSS Dasar : Mengubah border dengan CSS
Cara cepat memanipulasi border dengan CSS
Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita
bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis
dan warna. untuk cara cepat memanipulasi border dengan csssilahkan perhatikan contoh berikut
ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dotted</p>
Ebook Belajar HTML & CSS Dasar 92Diki Alfarabi Hadi | www.malasngoding.com
Gambar 41 Belajar CSS Dasar : Mengubah border dengan CSS
Cara cepat memanipulasi border dengan CSS
Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita
bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis
dan warna. untuk cara cepat memanipulasi border dengan csssilahkan perhatikan contoh berikut
ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dotted</p>
Ebook Belajar HTML & CSS Dasar 93Diki Alfarabi Hadi | www.malasngoding.com
</body>
</html>
style.css
#garis_1{
border:1px solid blue;
}
#garis_2{
border:10px dotted green;
}
#garis_3{
border:30px dashed #12ff00;
}
perhatikan pada contoh syntax css di atas. untuk mengubah border dengan cepat bisa langsung
menyisipkan ukuran, jenis border dan warna yang di inginkan di dalam property border.
border:1px solid blue;
contoh di atas berarti border yang di maksud berukuran 1px, dengan jenis border solid dan
berwarna biru. maka hasilnya.
Gambar 42 Belajar CSS Mengubah border dengan CSS
Ebook Belajar HTML & CSS Dasar 93Diki Alfarabi Hadi | www.malasngoding.com
</body>
</html>
style.css
#garis_1{
border:1px solid blue;
}
#garis_2{
border:10px dotted green;
}
#garis_3{
border:30px dashed #12ff00;
}
perhatikan pada contoh syntax css di atas. untuk mengubah border dengan cepat bisa langsung
menyisipkan ukuran, jenis border dan warna yang di inginkan di dalam property border.
border:1px solid blue;
contoh di atas berarti border yang di maksud berukuran 1px, dengan jenis border solid dan
berwarna biru. maka hasilnya.
Gambar 42 Belajar CSS Mengubah border dengan CSS
Ebook Belajar HTML & CSS Dasar 93Diki Alfarabi Hadi | www.malasngoding.com
</body>
</html>
style.css
#garis_1{
border:1px solid blue;
}
#garis_2{
border:10px dotted green;
}
#garis_3{
border:30px dashed #12ff00;
}
perhatikan pada contoh syntax css di atas. untuk mengubah border dengan cepat bisa langsung
menyisipkan ukuran, jenis border dan warna yang di inginkan di dalam property border.
border:1px solid blue;
contoh di atas berarti border yang di maksud berukuran 1px, dengan jenis border solid dan
berwarna biru. maka hasilnya.
Gambar 42 Belajar CSS Mengubah border dengan CSS
Ebook Belajar HTML & CSS Dasar 94Diki Alfarabi Hadi | www.malasngoding.com
Dan berikut yaitu beberapa property lain yang di gunakan untuk mengubah tampilan border
dengan CSS :
border-bottom, Mengatur garis yang terletak di bawah.
border-bottom-color, Mengatur warna garis yang terletak di bawah.
border-bottom-style, Mengatur style garis yang terletak di bawah.
border-bottom-width, Mengatur ukuran garis yang terletak di bawah.
border-color, Mengatur warna garis.
border-left, Mengatur garis yang terletak di sebelah kiri.
border-left-color, Mengatur warna garis yang terletak di sebelah kiri.
border-left-style, Mengatur style garis yang terletak di sebelah kiri.
border-left-width, Mengatur ukuran garis yang terletak di sebelah kiri.
border-right, Mengatur garis yang terletak di sebelah kanan.
border-right-color, Mengatur warna garis yang terletak di sebelah kanan.
border-right-style, Mengatur style garis yang terletak di sebelah kanan.
border-right-width, Mengatur ukuran garis yang terletak di sebelah kanan.
border-style, Mengatur style garis.
border-top, Mengatur garis yang terletak di sebelah atas.
border-top-color, Mengatur warna garis yang terletak di sebelah atas.
border-top-style, Mengatur style garis yang terletak di sebelah atas.
border-top-width, Mengatur ukuran garis yang terletak di sebelah atas.
border-width, Mengatur ukuran garis.
Belajar CSS Dasar : Mengubah List Dengan CSS
CSS memiliki kemampuan untuk memanipulasi atau mengubah list HTML. CSS sangat
berguna ketika anda ingin membuat daftar list dengan model tertentu misalnya list yang
Ebook Belajar HTML & CSS Dasar 95Diki Alfarabi Hadi | www.malasngoding.com
berbentuk angka, titik, angka romawi dan lainnya. Dengan menggunakan CSS kita dapat
memanipulasi list HTML dengan mengubah bentuk tanda listnya. untuk mengubah list HTML
dengan CSS kita bisa menggunakan property “list-style-type” yang berarti tipe gaya list.
Untuk mengubah list HTML dengan CSS perhatikan contoh berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial cara mengubah list dengan CSS di <br/> www.malasngoding.com</h1>
<!-- unordered list -->
<ul class="makanan">
<li>Bakso</li>
<li>Mie Goreng</li>
<li>Sate Padang</li>
<li>Rujak</li>
</ul>
<ul class="minuman">
<li>Soft drink</li>
<li>Teh manis</li>
<li>Kopi</li>
<li>Jus jeruk</li>
<li>Susu</li>
</ul>
<!-- ordered list -->
<ol class="alamat">
<li>Bali</li>
<li>Jawa Timur</li>
Ebook Belajar HTML & CSS Dasar 96Diki Alfarabi Hadi | www.malasngoding.com
<li>Jawa Barat</li>
<li>Jakarta</li>
</ol>
<ol class="mobil">
<li>Sedan</li>
<li>Mini Bus</li>
<li>Truk</li>
<li>Pick Up</li>
</ol>
</body>
</html>
style.css
h1{
text-align: center;
}
ul.makanan{
list-style-type: square; /* list dengan bentuk square */
}
ul.minuman{
list-style-type: circle; /* list dengan bentuk lingkaran */
}
ol.alamat{
list-style-type: upper-alpha; /* list dengan bentuk alpha */
}
ol.mobil{
list-style-type: upper-roman; /* list dengan bentuk romawi */
}
maka hasilnya
Ebook Belajar HTML & CSS Dasar 97Diki Alfarabi Hadi | www.malasngoding.com
Gambar 43 Belajar CSS Mengubah List Dengan CSS
Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk
membuat list dengan bentuk square bisa menggunakan property dan value css:
list-style-type: square; /* list dengan bentuk square */
untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css:
list-style-type: circle; /* list dengan bentuk lingkaran */
untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value css:
list-style-type: upper-alpha; /* list dengan bentuk alphabet */
untuk membuat list dengan bentuk angka romawi bisa menggunakan property dan value css:
list-style-type: upper-roman; /* list dengan bentuk romawi */
Ebook Belajar HTML & CSS Dasar 97Diki Alfarabi Hadi | www.malasngoding.com
Gambar 43 Belajar CSS Mengubah List Dengan CSS
Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk
membuat list dengan bentuk square bisa menggunakan property dan value css:
list-style-type: square; /* list dengan bentuk square */
untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css:
list-style-type: circle; /* list dengan bentuk lingkaran */
untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value css:
list-style-type: upper-alpha; /* list dengan bentuk alphabet */
untuk membuat list dengan bentuk angka romawi bisa menggunakan property dan value css:
list-style-type: upper-roman; /* list dengan bentuk romawi */
Ebook Belajar HTML & CSS Dasar 97Diki Alfarabi Hadi | www.malasngoding.com
Gambar 43 Belajar CSS Mengubah List Dengan CSS
Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk
membuat list dengan bentuk square bisa menggunakan property dan value css:
list-style-type: square; /* list dengan bentuk square */
untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css:
list-style-type: circle; /* list dengan bentuk lingkaran */
untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value css:
list-style-type: upper-alpha; /* list dengan bentuk alphabet */
untuk membuat list dengan bentuk angka romawi bisa menggunakan property dan value css:
list-style-type: upper-roman; /* list dengan bentuk romawi */
Ebook Belajar HTML & CSS Dasar 98Diki Alfarabi Hadi | www.malasngoding.com
sedikit tambahan untuk menghilangkan tanda list anda bisa menggunakan propery dan value
sebagai berikut:
list-style-type: none; /* menghilangkan tanda list */
Sekian lah penjelasan singkat tentang cara mengubah list dengan CSS.
Belajar CSS Dasar : Menggunakan Float CSS
Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling
banyak di perlukan. float berfungsi untuk mengatur letak element secara horizontal. ada empat
value yang bisa di gunakan untuk property float, yaitu left, right, inherit dan none.
Salah satu contoh penggunaan float yang paling sering di temukan yaitu ketika kita
ingin mebuat gaambar postigan website yang terletak di bagian samping tulisan konten. berikut
akan diberikan contoh tentang penggunaan float pada CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Float dengan CSS di <br/> www.malasngoding.com</h1>
<div class="kotak">
Ebook Belajar HTML & CSS Dasar 99Diki Alfarabi Hadi | www.malasngoding.com
<img class="gambar" src="malasngoding.png">
<p>
Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css.
cara membuat element berbaris dengan float css. belajar css menggunakan float css. Belajar tutorial
pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang
penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css.
belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di
css.belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download
sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan
float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar
tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css
tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan
float css. belajar css menggunakan float css. cara membuat element berbaris dengan float css. belajar css
menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css.
cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial
pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang
penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css.
belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css.
cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial
pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang
penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css.
belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css.
cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial
pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang
penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css.
belajar css menggunakan float css.
</p>
</div>
</body>
Ebook Belajar HTML & CSS Dasar 100Diki Alfarabi Hadi | www.malasngoding.com
</html>
style.css
h1{
text-align: center;
}
.gambar{
width: 300px;
float: left;
margin-right: 10px;
}
Gambar 44 cara menggunakan float css
perhatikan pada contoh di atas. kita meletakkan float:left pada element gambar sehingga
gambar di letakkan ke samping dan text akan menjorok mengikuti element gambar.
untuk lebih lanjut anda bisa mencoba menggunakan float:right dan inherit untuk melihat
perbedaan dari masing-masing value property float CSS.
Ebook Belajar HTML & CSS Dasar 100Diki Alfarabi Hadi | www.malasngoding.com
</html>
style.css
h1{
text-align: center;
}
.gambar{
width: 300px;
float: left;
margin-right: 10px;
}
Gambar 44 cara menggunakan float css
perhatikan pada contoh di atas. kita meletakkan float:left pada element gambar sehingga
gambar di letakkan ke samping dan text akan menjorok mengikuti element gambar.
untuk lebih lanjut anda bisa mencoba menggunakan float:right dan inherit untuk melihat
perbedaan dari masing-masing value property float CSS.
Ebook Belajar HTML & CSS Dasar 100Diki Alfarabi Hadi | www.malasngoding.com
</html>
style.css
h1{
text-align: center;
}
.gambar{
width: 300px;
float: left;
margin-right: 10px;
}
Gambar 44 cara menggunakan float css
perhatikan pada contoh di atas. kita meletakkan float:left pada element gambar sehingga
gambar di letakkan ke samping dan text akan menjorok mengikuti element gambar.
untuk lebih lanjut anda bisa mencoba menggunakan float:right dan inherit untuk melihat
perbedaan dari masing-masing value property float CSS.
Ebook Belajar HTML & CSS Dasar 101Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Cara Mengganti Font Dengan CSS
Disini kita akan mencoba belajar cara mengganti tulisan atau font pada halaman website
dengan menggunakan css. memang jika menggunakan font standart kesannya tampilan website
kita akan terlalu monoton. dan terlihat biasa saja. seperti kurang interaktif. jadi pada kesempatan
kali ini akan kita bahas cara mengubah font atau tulisan dengan css.
Ada beberapa cara mengubah atau menggunakan font dengan css. ada cara menggunakan
font yang terletak di server lain. seperti misalnya menggunakan font yang di sediakan oleh
google. dengan haya mencantumkan link font yang ingin di gunakan. ada juga cara
menggunakan font standart yang tersedia secara default. dan ada juga cara mendownload font
yang di inginkan, kemudian meletakkannya pada directory project, dan menghubungkan atau
memanggilnya dengan css.
untuk mengganti font dengan css yang pertama yang harus teman-teman lakukan yaitu
mendapatkan dan memilih font yang di inginkan terlebih dulu. teman-teman bisa mendowload
atau mendapatkan link nya di http://www.google.com/fonts.
Gambar 45 cara mengganti font dengan css
Ebook Belajar HTML & CSS Dasar 101Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Cara Mengganti Font Dengan CSS
Disini kita akan mencoba belajar cara mengganti tulisan atau font pada halaman website
dengan menggunakan css. memang jika menggunakan font standart kesannya tampilan website
kita akan terlalu monoton. dan terlihat biasa saja. seperti kurang interaktif. jadi pada kesempatan
kali ini akan kita bahas cara mengubah font atau tulisan dengan css.
Ada beberapa cara mengubah atau menggunakan font dengan css. ada cara menggunakan
font yang terletak di server lain. seperti misalnya menggunakan font yang di sediakan oleh
google. dengan haya mencantumkan link font yang ingin di gunakan. ada juga cara
menggunakan font standart yang tersedia secara default. dan ada juga cara mendownload font
yang di inginkan, kemudian meletakkannya pada directory project, dan menghubungkan atau
memanggilnya dengan css.
untuk mengganti font dengan css yang pertama yang harus teman-teman lakukan yaitu
mendapatkan dan memilih font yang di inginkan terlebih dulu. teman-teman bisa mendowload
atau mendapatkan link nya di http://www.google.com/fonts.
Gambar 45 cara mengganti font dengan css
Ebook Belajar HTML & CSS Dasar 101Diki Alfarabi Hadi | www.malasngoding.com
Belajar CSS Dasar : Cara Mengganti Font Dengan CSS
Disini kita akan mencoba belajar cara mengganti tulisan atau font pada halaman website
dengan menggunakan css. memang jika menggunakan font standart kesannya tampilan website
kita akan terlalu monoton. dan terlihat biasa saja. seperti kurang interaktif. jadi pada kesempatan
kali ini akan kita bahas cara mengubah font atau tulisan dengan css.
Ada beberapa cara mengubah atau menggunakan font dengan css. ada cara menggunakan
font yang terletak di server lain. seperti misalnya menggunakan font yang di sediakan oleh
google. dengan haya mencantumkan link font yang ingin di gunakan. ada juga cara
menggunakan font standart yang tersedia secara default. dan ada juga cara mendownload font
yang di inginkan, kemudian meletakkannya pada directory project, dan menghubungkan atau
memanggilnya dengan css.
untuk mengganti font dengan css yang pertama yang harus teman-teman lakukan yaitu
mendapatkan dan memilih font yang di inginkan terlebih dulu. teman-teman bisa mendowload
atau mendapatkan link nya di http://www.google.com/fonts.
Gambar 45 cara mengganti font dengan css
Ebook Belajar HTML & CSS Dasar 102Diki Alfarabi Hadi | www.malasngoding.com
atau teman-teman mungkin bisa mendownload font yang di inginkan http://1001freefonts.com. di
sini akan saya contoh kan beberapa cara mengganti font atau tulisan dengan css.
untuk mengubah atau mengganti font dengan css, anda bisa menggunakan property ‘font-
family’. dan kemudian pada value nya masukkan nama font yang ingin di gunakan. pada contoh
di bawah ini saya akan menetapkan font ‘sans-serif’ pada element h2. dan menetapkan font
‘courier’ pada element paragraf.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | www.malasngoding.com</h1>
<div class="ketengah">
<hr>
<h2>Cara Mengganti Font Dengan CSS</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
Ebook Belajar HTML & CSS Dasar 103Diki Alfarabi Hadi | www.malasngoding.com
</body>
</html>
style.css
body{
background: #35A9DB;
font-family: roboto;
text-align: center;
color: #fff;
}
.ketengah{
margin: 10px auto;
width: 1150px;
}
h2{
font-family: sans-serif;
}
p{
font-family: courier;
}
Maka hasilnya bias di lihat pada browser
Ebook Belajar HTML & CSS Dasar 104Diki Alfarabi Hadi | www.malasngoding.com
Gambar 46 cara mengubah font dengan css
perhatikan pada syntax css berikut. yang menentukan font dengan font-family
h2{
font-family: sans-serif;
}
p{
font-family: courier;
}
Cara lain mengganti font dengan css
cara lain mengganti font dengan css yaitu bisa dengan mendownload font. kemudian
meletakkan nya pada director project untuk di hubungkan dan bisa juga dengan cara
menghubungkannya langung ke link font online.
di sini saya telah mendownload sebuah font dan meletakkan nya pada project contoh ini.
Ebook Belajar HTML & CSS Dasar 104Diki Alfarabi Hadi | www.malasngoding.com
Gambar 46 cara mengubah font dengan css
perhatikan pada syntax css berikut. yang menentukan font dengan font-family
h2{
font-family: sans-serif;
}
p{
font-family: courier;
}
Cara lain mengganti font dengan css
cara lain mengganti font dengan css yaitu bisa dengan mendownload font. kemudian
meletakkan nya pada director project untuk di hubungkan dan bisa juga dengan cara
menghubungkannya langung ke link font online.
di sini saya telah mendownload sebuah font dan meletakkan nya pada project contoh ini.
Ebook Belajar HTML & CSS Dasar 104Diki Alfarabi Hadi | www.malasngoding.com
Gambar 46 cara mengubah font dengan css
perhatikan pada syntax css berikut. yang menentukan font dengan font-family
h2{
font-family: sans-serif;
}
p{
font-family: courier;
}
Cara lain mengganti font dengan css
cara lain mengganti font dengan css yaitu bisa dengan mendownload font. kemudian
meletakkan nya pada director project untuk di hubungkan dan bisa juga dengan cara
menghubungkannya langung ke link font online.
di sini saya telah mendownload sebuah font dan meletakkan nya pada project contoh ini.
Ebook Belajar HTML & CSS Dasar 105Diki Alfarabi Hadi | www.malasngoding.com
Gambar 47 mengganti font
bisa di lihat pada gambar di atas. saya telah mendownload font dengan nama wolf.ttf. dan
selanjutnya tinggal di hubungkan dengan css.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | www.malasngoding.com</h1>
<div class="ketengah">
<hr>
<h2>cara mengganti font dengan css</h2>
</div>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 105Diki Alfarabi Hadi | www.malasngoding.com
Gambar 47 mengganti font
bisa di lihat pada gambar di atas. saya telah mendownload font dengan nama wolf.ttf. dan
selanjutnya tinggal di hubungkan dengan css.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | www.malasngoding.com</h1>
<div class="ketengah">
<hr>
<h2>cara mengganti font dengan css</h2>
</div>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 105Diki Alfarabi Hadi | www.malasngoding.com
Gambar 47 mengganti font
bisa di lihat pada gambar di atas. saya telah mendownload font dengan nama wolf.ttf. dan
selanjutnya tinggal di hubungkan dengan css.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | www.malasngoding.com</h1>
<div class="ketengah">
<hr>
<h2>cara mengganti font dengan css</h2>
</div>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 106Diki Alfarabi Hadi | www.malasngoding.com
style.css
body{
background: #35A9DB;
font-family: roboto;
text-align: center;
color: #fff;
}
.ketengah{
margin: 10px auto;
width: 1150px;
}
@font-face {
font-family: tulisan_keren;
src: url(Wolf.ttf);
}
h2{
font-family: 'tulisan_keren';
font-size: 70pt;
font-variant: inherit;
}
Seperti yang anda perhatikan pada contoh di atas. kita hubungkan font dengan fungsi url(). dan
memberikan namanya dengan tulisan_keren. jadi @font-face di sini berfungsi untuk
penghubung font. dan pada element h2 kita berikan font-family nya dengan nama tulisan_keren
tadi.
@font-face {
Ebook Belajar HTML & CSS Dasar 107Diki Alfarabi Hadi | www.malasngoding.com
font-family: tulisan_keren;
src: url(Wolf.ttf);
}
h2{
font-family: 'tulisan_keren';
font-size: 70pt;
font-variant: inherit;
}
hasilnya
Gambar 48 mengubah font dengan css
dan sekian tutorial kali ini tentang Cara Mengganti Font Dengan CSS.
Belajar CSS Dasar : Design Table dengan CSS
Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan yang lalu,
pasti banyak di antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat
Ebook Belajar HTML & CSS Dasar 107Diki Alfarabi Hadi | www.malasngoding.com
font-family: tulisan_keren;
src: url(Wolf.ttf);
}
h2{
font-family: 'tulisan_keren';
font-size: 70pt;
font-variant: inherit;
}
hasilnya
Gambar 48 mengubah font dengan css
dan sekian tutorial kali ini tentang Cara Mengganti Font Dengan CSS.
Belajar CSS Dasar : Design Table dengan CSS
Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan yang lalu,
pasti banyak di antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat
Ebook Belajar HTML & CSS Dasar 107Diki Alfarabi Hadi | www.malasngoding.com
font-family: tulisan_keren;
src: url(Wolf.ttf);
}
h2{
font-family: 'tulisan_keren';
font-size: 70pt;
font-variant: inherit;
}
hasilnya
Gambar 48 mengubah font dengan css
dan sekian tutorial kali ini tentang Cara Mengganti Font Dengan CSS.
Belajar CSS Dasar : Design Table dengan CSS
Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan yang lalu,
pasti banyak di antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat
Ebook Belajar HTML & CSS Dasar 108Diki Alfarabi Hadi | www.malasngoding.com
kurang menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa
saja. oleh karena itu Pada pembahasan belajar CSS design tabel ini akan di jelaskan
tentang bagaimana cara design sebuah tabel HTML dengan menggunakan CSS.
Di tutorial ini saya akan menjelaskan cara men-design table step by step. pertama kita
buat kerangka table nya dulu.
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | www.malasngoding.com</title>
</head>
<body>
<h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
Ebook Belajar HTML & CSS Dasar 109Diki Alfarabi Hadi | www.malasngoding.com
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
dan tampilan nya masih standar dan biasa saja.
Ebook Belajar HTML & CSS Dasar 109Diki Alfarabi Hadi | www.malasngoding.com
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
dan tampilan nya masih standar dan biasa saja.
Ebook Belajar HTML & CSS Dasar 109Diki Alfarabi Hadi | www.malasngoding.com
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
dan tampilan nya masih standar dan biasa saja.
Ebook Belajar HTML & CSS Dasar 110Diki Alfarabi Hadi | www.malasngoding.com
Seperti yang tampak pada gambar di atas. tampilan dari table kita masih sangat standar. sekarang
kita akan langsung memulai mendesign table nya. buat sebuah file css dan langsung hubungkan
dengan file html nya. baca tutorial sebelumnya tentangbelajar html menghubungkan html dan
css.
<link rel="stylesheet" type="text/css" href="style.css">
Sehingga file html nya menjadi seperti berikut
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
Ebook Belajar HTML & CSS Dasar 111Diki Alfarabi Hadi | www.malasngoding.com
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
style.css
/*design table 1*/
.table1 {
font-family: sans-serif;
color: #232323;
Ebook Belajar HTML & CSS Dasar 112Diki Alfarabi Hadi | www.malasngoding.com
border-collapse: collapse;
}
.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}
contoh di atas yaitu membuat design table sederhana.hasilnya :
Perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. hehe. saya
jelaskan sedikit penggunaan css nya.
Pada element table kita menentukan font yang ingin kita gunakan. karena kita akan mengganti
font nya. agar lebih terlihat menarik. cara mengganti font sudah saya jelaskan pada tutorial
sebelumnya. silahkan teman-teman baca tutorial cara mengganti font dengan css. dan
menetapkan warna font nya denga warna #232323. dan yang paling penting yaitu border-
collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris.
.table1 {
Ebook Belajar HTML & CSS Dasar 112Diki Alfarabi Hadi | www.malasngoding.com
border-collapse: collapse;
}
.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}
contoh di atas yaitu membuat design table sederhana.hasilnya :
Perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. hehe. saya
jelaskan sedikit penggunaan css nya.
Pada element table kita menentukan font yang ingin kita gunakan. karena kita akan mengganti
font nya. agar lebih terlihat menarik. cara mengganti font sudah saya jelaskan pada tutorial
sebelumnya. silahkan teman-teman baca tutorial cara mengganti font dengan css. dan
menetapkan warna font nya denga warna #232323. dan yang paling penting yaitu border-
collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris.
.table1 {
Ebook Belajar HTML & CSS Dasar 112Diki Alfarabi Hadi | www.malasngoding.com
border-collapse: collapse;
}
.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}
contoh di atas yaitu membuat design table sederhana.hasilnya :
Perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. hehe. saya
jelaskan sedikit penggunaan css nya.
Pada element table kita menentukan font yang ingin kita gunakan. karena kita akan mengganti
font nya. agar lebih terlihat menarik. cara mengganti font sudah saya jelaskan pada tutorial
sebelumnya. silahkan teman-teman baca tutorial cara mengganti font dengan css. dan
menetapkan warna font nya denga warna #232323. dan yang paling penting yaitu border-
collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris.
.table1 {
Ebook Belajar HTML & CSS Dasar 113Diki Alfarabi Hadi | www.malasngoding.com
font-family: sans-serif;
color: #232323;
border-collapse: collapse;
}
kemudian lagi pada element table head dan table body nya kita tentukan warna table nya dengan
kode warna #999. dan memberikan padding atas bawah sebesar 8px. dan kiri kanan 20px.
.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}
Contoh source code design table lainnya
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
Ebook Belajar HTML & CSS Dasar 114Diki Alfarabi Hadi | www.malasngoding.com
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 115Diki Alfarabi Hadi | www.malasngoding.com
style.css
.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;
}
.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}
Ebook Belajar HTML & CSS Dasar 116Diki Alfarabi Hadi | www.malasngoding.com
Gambar 49 Cara design table dengan css
Selesai.
Ebook Belajar HTML & CSS Dasar 116Diki Alfarabi Hadi | www.malasngoding.com
Gambar 49 Cara design table dengan css
Selesai.
Ebook Belajar HTML & CSS Dasar 116Diki Alfarabi Hadi | www.malasngoding.com
Gambar 49 Cara design table dengan css
.jpeg&description=HTML 6){kind=link}