CSS
HAI adik adik selamat datang pada pertemuan ke dua kali ini ldxlucyfer akan membahas apaitu CSS'
pengertian CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
HAI adik adik selamat datang pada pertemuan ke dua kali ini ldxlucyfer akan membahas apaitu CSS'
pengertian CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
pengertian CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Menulis CSS
Dalam hal ini ada beberapa istilah dan kosep dasar dari css. Tapi sebelum
menuju pembahasan lebih lanjut, akan lebih baik kita harus membiasakan dengan
bagaimana suatu style harus ditulis. Berikut adalah contoh mudah
penulisan css pada suatu halaman web:
Contoh CSS 1
<html>
<head>
<style Type="text/css">
h1{font-family:tahoma}
h2{color: blue}
p{font-size:11pt ; font-style: italic}
</style>
</head>
<body>
<h2>ldxlucyfer</h2>
<p>ldxlucyfer adalah suatu
website tempat berbagi berbagai ilmu pengetahuan.
</p></body>
</html>
Sintak CSS (Syntax CSS)
selector (properti: nilai)
body (color: blue)
p {font-family: tahoma}
h1 {font-weight: bold}
dan lain-lain
Selector
Selector biasanya merupakan elemen HTML atau tag dimana
berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap
properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai
terkait dapat diatur.
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Contoh
h1 (font-size: 20px; text-align:
left; color: blue; font-family: Arial;)
dapat pula ditulis seperti:
h1 (font-size: 20px;
text-align: left;
color: blue;
font-family: Arial;)
Pengelompokan Selector (Grouping of Selectors)
Seperti dapat dilihat, satu selector dapat memiliki beberapa
properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai
properti dengan nilai yang sama. Dengan begitu harus dilakukan pengolompokan selector.
h1 , body , p , ul
{
color : blue;
}
Pada contoh diatas, elemen header, body, paragraph, unordered list
berada pada group yang sama. Semua elemen tersebut nantinya akan berwarna biru.
Pengelompokan dalam CSS
·
Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai
properti yang sama (misalnya font, ukuran, warna, dll).
·
Dengan satu perintah dapat memberikan properti style pada elemen
yang berbeda dengan nilai yang sama.
·
Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika
merubah properti di elemen.
Padding, Margin dan Border
Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan
lihat skema gambar dibawah ini dulu :
Nah dari keterangan diatas kita
dapat menyimpulkan seperti dibawah
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penggunaan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penggunaan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
penulisan dasar CSS seperti di bawah ini :
Selector {property:value}
Selector merupakan tag HTML atau elemen (class/id) yang Di pilih
Property adalah atribut yang ingin kalian atur nilai nya
Value adalah nilai dari property, bisa berupa angka atau teks.
Untuk lebih jelasnya bisa lihat contoh di bawah ini
Property adalah atribut yang ingin kalian atur nilai nya
Value adalah nilai dari property, bisa berupa angka atau teks.
Untuk lebih jelasnya bisa lihat contoh di bawah ini
p {color:blue}
Dimana p
merupakan selector yang digunakan untuk memunculkan property color dan value
blue. Agar lebih mengerti kalian bisa kihat pernulisan HTML nya sebagai berikut
:
<html>
<title>belajar CSS<title>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Hallo World</p>
</body>
</html>
Bisa dilihat setelah di buka pada browser tulisan teks akan berwarna biru ini di karenakan pada selector P telah di beri kan property color dengan value blue.
Perlu di ingat dalam penulisan CSS harus mengikitu peraturan berikut :
1. Kode CSS harus ditulis diantara tag <head> dan </head>
2. Kode CSS harus di awali dengan tag <style>
3. Di awali dengan tanda kurung buka "{" dan di akhiri dengan tanda kurung tutup "}"
4. bila ingin mnuliskan property lebih dari 1 gunakan tanda titik koma ";"
<html>
<title>belajar CSS<title>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Hallo World</p>
</body>
</html>
Bisa dilihat setelah di buka pada browser tulisan teks akan berwarna biru ini di karenakan pada selector P telah di beri kan property color dengan value blue.
Perlu di ingat dalam penulisan CSS harus mengikitu peraturan berikut :
1. Kode CSS harus ditulis diantara tag <head> dan </head>
2. Kode CSS harus di awali dengan tag <style>
3. Di awali dengan tanda kurung buka "{" dan di akhiri dengan tanda kurung tutup "}"
4. bila ingin mnuliskan property lebih dari 1 gunakan tanda titik koma ";"
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
1.
External Style Sheet (file CSS berbeda dari file HTML),
2.
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3.
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak
direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah
dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja
kita coba kode berikut ini:
Penempatan CSS dalam HTML
Internal CSS
Metode penulisan kode CSS langsung dalam file HTML.
contoh:
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan
ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css,
misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link>
yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita
menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html
anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan
ubah isinya pada bagian <body> saja bagian yang didalam <head>
tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class
untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank).
Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda
ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya
saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan
menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan
didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf
agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan
property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan
hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling
spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka
browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode
berikut:
<h1 style="font-family:
'Times New Roman', Times, serif">Serif font</h1>
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap
link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link
yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: underline;
}
| sebelumnya | baris 1 kolom 2 | Baris 2 kolom 1 | baris 2 kolom 2 |
pengertian CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Menulis CSS
Dalam hal ini ada beberapa istilah dan kosep dasar dari css. Tapi sebelum
menuju pembahasan lebih lanjut, akan lebih baik kita harus membiasakan dengan
bagaimana suatu style harus ditulis. Berikut adalah contoh mudah
penulisan css pada suatu halaman web:
Contoh CSS 1
<html>
<head>
<style Type="text/css">
h1{font-family:tahoma}
h2{color: blue}
p{font-size:11pt ; font-style: italic}
</style>
</head>
<body>
<h2>ldxlucyfer</h2>
<p>ldxlucyfer adalah suatu
website tempat berbagi berbagai ilmu pengetahuan.
</p></body>
</html>
Sintak CSS (Syntax CSS)
selector (properti: nilai)
body (color: blue)
p {font-family: tahoma}
h1 {font-weight: bold}
dan lain-lain
Selector
Selector biasanya merupakan elemen HTML atau tag dimana
berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap
properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai
terkait dapat diatur.
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Contoh
h1 (font-size: 20px; text-align:
left; color: blue; font-family: Arial;)
dapat pula ditulis seperti:
h1 (font-size: 20px;
text-align: left;
color: blue;
font-family: Arial;)
Pengelompokan Selector (Grouping of Selectors)
Seperti dapat dilihat, satu selector dapat memiliki beberapa
properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai
properti dengan nilai yang sama. Dengan begitu harus dilakukan pengolompokan selector.
h1 , body , p , ul
{
color : blue;
}
Pada contoh diatas, elemen header, body, paragraph, unordered list
berada pada group yang sama. Semua elemen tersebut nantinya akan berwarna biru.
Pengelompokan dalam CSS
·
Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai
properti yang sama (misalnya font, ukuran, warna, dll).
·
Dengan satu perintah dapat memberikan properti style pada elemen
yang berbeda dengan nilai yang sama.
·
Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika
merubah properti di elemen.
Padding, Margin dan Border
Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan
lihat skema gambar dibawah ini dulu :
Nah dari keterangan diatas kita
dapat menyimpulkan seperti dibawah
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penggunaan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penggunaan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
penulisan dasar CSS seperti di bawah ini :
Selector {property:value}
Selector merupakan tag HTML atau elemen (class/id) yang Di pilih
Property adalah atribut yang ingin kalian atur nilai nya
Value adalah nilai dari property, bisa berupa angka atau teks.
Untuk lebih jelasnya bisa lihat contoh di bawah ini
Property adalah atribut yang ingin kalian atur nilai nya
Value adalah nilai dari property, bisa berupa angka atau teks.
Untuk lebih jelasnya bisa lihat contoh di bawah ini
p {color:blue}
Dimana p
merupakan selector yang digunakan untuk memunculkan property color dan value
blue. Agar lebih mengerti kalian bisa kihat pernulisan HTML nya sebagai berikut
:
<html>
<title>belajar CSS<title>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Hallo World</p>
</body>
</html>
Bisa dilihat setelah di buka pada browser tulisan teks akan berwarna biru ini di karenakan pada selector P telah di beri kan property color dengan value blue.
Perlu di ingat dalam penulisan CSS harus mengikitu peraturan berikut :
1. Kode CSS harus ditulis diantara tag <head> dan </head>
2. Kode CSS harus di awali dengan tag <style>
3. Di awali dengan tanda kurung buka "{" dan di akhiri dengan tanda kurung tutup "}"
4. bila ingin mnuliskan property lebih dari 1 gunakan tanda titik koma ";"
<html>
<title>belajar CSS<title>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Hallo World</p>
</body>
</html>
Bisa dilihat setelah di buka pada browser tulisan teks akan berwarna biru ini di karenakan pada selector P telah di beri kan property color dengan value blue.
Perlu di ingat dalam penulisan CSS harus mengikitu peraturan berikut :
1. Kode CSS harus ditulis diantara tag <head> dan </head>
2. Kode CSS harus di awali dengan tag <style>
3. Di awali dengan tanda kurung buka "{" dan di akhiri dengan tanda kurung tutup "}"
4. bila ingin mnuliskan property lebih dari 1 gunakan tanda titik koma ";"
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
1.
External Style Sheet (file CSS berbeda dari file HTML),
2.
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3.
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak
direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah
dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja
kita coba kode berikut ini:
Penempatan CSS dalam HTML
Internal CSS
Metode penulisan kode CSS langsung dalam file HTML.
contoh:
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan
ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css,
misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link>
yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita
menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html
anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan
ubah isinya pada bagian <body> saja bagian yang didalam <head>
tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class
untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank).
Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda
ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya
saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan
menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan
didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf
agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan
property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan
hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling
spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka
browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode
berikut:
<h1 style="font-family:
'Times New Roman', Times, serif">Serif font</h1>
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap
link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link
yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica,
sans-serif;
text-decoration: underline;
}
| sebelumnya | baris 1 kolom 2 | Baris 2 kolom 1 | baris 2 kolom 2 |
Komentar
Posting Komentar