Cascading Style Sheets
1.
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.
Css di ada 3 macam:
1.
Inline = elemen html, penulisannya terdapat dalam
tagnya.
contoh: <a
style=”color:blue;>
Kekurangan
Inline : Jika memiliki element yang sama proprti yang lain akan mengikuti atau bisa
di bilang selektornya tidak boleh sama.
2.
Internal = Dokument Html, penulisanya di dalam dokumen
html.
contohnya : <style>Internal
css</style>
3.
Eksternal = Css dan HTML terpisah, menghubungkan css
dan link dengan HTML.
Strucktur
Penulisan CSS
Selektor{property:value;}
1. Selektor adalah element apa yang ingin kamu
ubah, berupa tag html,class atau id.
·
HTML cara
memanggilnya langsung saja. Contohnya a{color:green;}
·
CLASS cara
memanggilnya harus menggunakan (.). Contohnya .a{color:green;}
·
ID cara
memanggilnya menggunakan (#). Contohnya #a{color:green;}
2. Property adalah elemen apa yang ingin di
ubah, contohnya misalnya element a yang mau di ubah adalah font,color, dll.
3. Value adalah nilai dari property yang
ingin di ubah.
2. Definisi CSS
Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style
sheet language) yang mengontrol format tampilan sebuah halaman web yang
ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS
digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS
bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan
ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang
meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses
konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam
spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk
membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam
penulisan kode dan struktur dari konten, contohnya teknik tableless pada
desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style
dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen,
in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten
web bisa menentukan link yang menghubungkan konten dengan file CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari
tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan
lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah
warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan
mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada
tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam
membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu
pembuatan web.
fungsi css
fungsi utama
css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga
website). dan isi dari halaman website adalah tag-tag html, logikanya css itu
dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional
dan menarik.
4.
Cara kerja css
cara kerja
css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan
class tersesuaikan) maka secara otomatis akan bekerja pada document html.
Konten
Konten pada dasarnya memiliki border
Ø Jarak antara
border dan konten di sebut padding
Ø Jarak antara
border dengan element-element yang lain di sebut margin
Ø jenis border
ada 3 macam :
a.
solid (______)
b.
Dash (- - - - - -)
c.
dot (. . . . . .)
Berikut adalah beberapa warna dalam
css
·
red
|
·
lime
|
·
maroon
|
·
aqua
|
·
yellow
|
·
blue
|
·
orange
|
·
navy
|
·
green
|
·
fuchsia
|
·
olive
|
·
purple
|
·
gray
|
·
black
|
·
silver
|
·
white
|
Cara
Membuat Table Dengan Css tipe Eksternal
Kode CSS :
a{
border: 1px solid red;
padding: 1px 0px;
background-color:grey;
color: black;
font-weight: bold;
font-family: arial;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
}
a:hover{
color: black;
background-color: skyblue;
}
a:active{
background-color: red;
}
table {
border-collapse: collapse;
width: 500px;
margin: 25px;
font-family: arial;
}
tr, td {
border: 1px solid red;
}
.no1{
background-color: violet;
border-radius: 1px 1px; a{
border: 1px solid red;
padding: 1px 0px;
background-color:grey;
color: black;
font-weight: bold;
font-family: arial;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
}
a:hover{
color: black;
background-color: skyblue;
}
a:active{
background-color: red;
}
table {
border-collapse: collapse;
width: 500px;
margin: 25px;
font-family: arial;
}
tr, td {
border: 1px solid red;
}
.no1{
background-color: violet;
border-radius: 1px 1px;
}
.no2{
background-color: white;
}
.no2:hover{
background-color: grey;
}
.no3{
background-color: yellow;
}
.no3:hover{
background-color: red;
}
.no4{
background-color: brown;
}
.no4:hover{
background-color: blue;
}
.no5{
background-color: green;
}
.no5:hover{
background-color: purple;
}
}
.no2{
background-color: white;
}
.no2:hover{
background-color: grey;
}
.no3{
background-color: yellow;
}
.no3:hover{
background-color: red;
}
.no4{
background-color: brown;
}
.no4:hover{
background-color: blue;
}
.no5{
background-color: green;
}
.no5:hover{
background-color: purple;
}
ul li{
list-style:none;
display: inline-block;
}
<html>
<head>
<title>mey.html</title>
<link
rel="stylesheet" type="text/css"
href="table.css">
</head>
<body>
<table border="1">
<th
class="no1">No</th>
<th
class="no1">Nama Lengkap</th>
<th
class="no1">Umur</td>
<th
class="no1">Pekerjaan</th>
<tr
class="no2">
<td>1</td>
<td>Sukarjono</td>
<td>56
tahun</td>
<td>Karyawan
KNE</td>
</tr>
<tr
class="no3">
<td>2</td>
<td>Rubiyati</td>
<td>52
tahun</td>
<td>Ibu
Rumah Tangga</td>
</tr>
<tr
class="no2">
<td>3</td>
<td>Sigit
Saputro</td>
<td>24
tahun</td>
<td>Karyawan
YUM</td>
</tr>
<tr
class="no3">
<td>4</td>
<td>Mey
Dwi Nurcahyani</td>
<td>19
tahun</td>
<td>Kuliah</td>
</tr>
<tr
class="no2">
<td>5</td>
<td>Nor
Ares Prastiyo</td>
<td>15
tahun</td>
<td>Smp</td>
</tr>
<tr
class="no3">
<td>6</td>
<td>Devi
Putri Wardani</td>
<td>10
tahun</td>
<td>Sd</td>
</tr>
</table>
<ul>
<li><a
href="mey" class="menu">Beranda</a></li>
<li><a
href="mey" class="menu">Profil</a></li>
<li><a
href="mey" class="menu">Galeri</a></li>
</ul>
</body>
</html>
Hasil output dari tipe
eksternal
Catatan:
Yang
harus kalian ingat dari tipe eksternal ini css dan html terpisah, beda dengan
table css tipe internal. Berikut adalah cara membuat table dengan tipe external
.Caranya buat table terdahulu dengan menyimpan file dengan (.html), lalu buka
file yang sama dan buat folder baru dengan ctrl+n atau klik new file pada
sublime dan menyimpan file dengan (.css)
Berikut adalah script
Table CSS tipe internal
<html>
<head>
<title>mey.html</title>
</head>
<body>
<h2
style="background-color:black;color:white;">
Contoh
Table Cascading Style Sheets
</h2>
</body>
<style>
a{
border: 1px solid red;
padding: 1px 0px;
background-color:grey;
color: black;
font-weight: bold;
font-family: arial;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
}
a:hover{
color: black;
background-color: skyblue;
}
a:active{
background-color: red;
}
table
{
border-collapse: collapse;
width: 500px;
margin: 25px;
font-family: arial;
}
tr, td {
border: 1px solid red;
}
.no1{
background-color: violet;
border-radius: opx opx;
}
.no2{
background-color: white;
}
.no2:hover{
background-color: grey;
}
.no3{
background-color: yellow;
}
.no3:hover{
background-color: red;
}
.no4{
background-color: brown;
}
.no4:hover{
background-color: blue;
}
.no5{
background-color: green;
}
.no5:hover{
background-color: purple;
}
</style>
<body>
<table border="1">
<th
class="no1">No</th>
<th
class="no1">Nama Lengkap</th>
<th
class="no1">Umur</th>
<th
class="no1">Pekerjaan</th>
<tr
class="no2">
<td>1</td>
<td>Sukarjono</td>
<td>56
tahun</td>
<td>Karyawan
KNE</td>
</tr>
<tr
class="no3">
<td>2</td>
<td>Rubiyati</td>
<td>52
tahun</td>
<td>Ibu
Rumah Tangga</td>
</tr>
<tr
class="no2">
<td>3</td>
<td>Sigit
Saputro</td>
<td>24
tahun</td>
<td>Karyawan
YUM</td>
</tr>
<tr
class="no3">
<td>4</td>
<td>Mey
Dwi Nurcahyani</td>
<td>19
tahun</td>
<td>Kuliah</td>
</tr>
<tr
class="no2">
<td>5</td>
<td>Nor
Ares Prastiyo</td>
<td>15
tahun</td>
<td>Smp</td>
</tr>
<tr
class="no3">
<td>6</td>
<td>Devi
Putri Wardani</td>
<td>10
tahun</td>
<td>Sd</td>
</tr>
</table>
</body>
<body>
<a
href="mey.html" class="Menu"> Profil</a>
</body>
</html>
Keterangan :
1. Dalam
inputan saya ini saya menggunakan padding: 2px 5px; yang
di maksud untuk mengukur jarak antar konten dan border 2px pertama untuk
mengkur atas dan bawah sedangkan 5px yang kedua untu menggukur kanan dan kiri.
2. Border-radius berfungsi
untuk membuat lengkungan pada box tag html
3.
.no2{
background-color: white;
}
Perintah
seperti ini untuk mengubah tampilan warna.
4.
.no5:hover{
background-color: purple;
} Perintah seperti
ini berfungsi ketika kursor menyentuh link warna akan berubah sesuai dengan
inputan yang telah kita masukkan.
5.
a:active{
background-color: red;
} ini digunakan untuk
mengaktifkan atau saat kita meng klik warna tampilan akan berubah.
6. <tr class="no4"> menentukan
warna baris cell agar dapat selang-seling menggunakan atribut class atau id.
7. Margin berfungsi
untuk menentukan posisi tabel tersebut sedangkan width berfungsi untuk mengubah lebar dari table.
8. Display
ada tiga macam
a.
display:
inline; berfunggsi mendefinisikan elemen yang
sama dengan elemen yang lain.
b.
display: none;berfungsi
untuk tidak menampilkan elemen atau di anggap hilang
c.
display:
block; berfungsi untuk membuat baris baru pada
elemen
Dandalam hal ini saya menggunakan
display model block
9. Border-collapse adalah properti
css yang digunakan untuk menentukan tipe border. Ada border collapse (satu
border) ,border separate (terpisah).
Output
Dari Table Css tipe Internal
Selamat
Mencoba ya
Tidak ada komentar:
Posting Komentar