Materi HTML Dan CSS

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ).
CSS merupakan bahasa yang digunakan untuk

mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita
berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang
digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Pengertian CSS
 CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan
bagiamana suatu text akan tertampil di halaman web.
 Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna),
margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen
seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
 Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang
berbeda.
 CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan
disajikan.
 Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.
 Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau
pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode
tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Keuntungan Menggunakan CSS
 CSS memberikan keseragaman pada halaman web.

 Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS,
perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan
dalam style sheet.
 CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
 Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
 CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
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>NuSinau</h2>
<p>NuSinau 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).
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.
BOX MODEL (Padding, Margin dan Border)

Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar
dibawah ini dulu :
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)
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
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 ";"
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>
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>
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>
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;
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
text-decoration: underline
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
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;
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
text-decoration: underline overline;
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
text-decoration: underline;

Materi HTML Dan CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi HTML Dan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ).

CSS merupakan bahasa yang digunakan untuk

Keuntungan Menggunakan CSS

 CSS memberikan keseragaman pada halaman web.

p{font-size:11pt ; font-style: italic}

<p>NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan.

Sintak CSS (Syntax CSS)

selector (properti: nilai)

body (color: blue)

h1 (font-size: 20px; text-align: left; color: blue; font-family: Arial;)

dapat pula ditulis seperti:

Pengelompokan Selector (Grouping of Selectors)

Pengelompokan dalam CSS

BOX MODEL (Padding, Margin dan Border)

Dari keterangan diatas kita dapat menyimpulkan seperti dibawah

Satuan Dalam CSS

penulisan dasar CSS seperti di bawah ini :

Selector merupakan tag HTML atau elemen (class/id) yang Di pilih

Untuk lebih jelasnya bisa lihat contoh di bawah ini

1. Kode CSS harus ditulis diantara tag <head> dan </head>

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. External Style Sheet (file CSS berbeda dari file HTML),

Penempatan CSS dalam HTML

Metode penulisan kode CSS langsung dalam file HTML. contoh:

Penulisan kode CSS dalam tag HTML. contoh:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Coba kode CSS berikut:

font-family: Times New Roman;

font-family: Times New Roman;

font-family: Times New Roman;

font-family: Arial, Helvetica, sans-serif;

font-family: Arial, Helvetica, sans-serif;

font-family: Arial, Helvetica, sans-serif;

text-decoration: underline overline;

font-family: Arial, Helvetica, sans-serif;

Anda mungkin juga menyukai