cascading style sheets · pdf fileweb akses web lebih cepat di-loading ... jika ingin membuat...
TRANSCRIPT
Author : Minarni, S.Kom.,MM
Universitas Darwan Ali
Sampit – Kalimantan Tengah
Internet Multimedia
Cascading
SStyle Sheets
Keuntungan Menggunakan CSS
Mempermudah dan mempersingkatpembuatan dan pemeliharaan dokumenweb
Akses web lebih cepat di-loading (mempercepat pembacaan HTML)
Fleksibel, interaktif, tampilan lebih menarikdan nyaman dipandang
Ringan pada filesize/ bandwidth lebih kecil
Dapat digunakan pada semua web browser
Perbandingan jika menggunakan CSSJika ingin merubahtulisan menjadiberwarna merahmisalnya, kita harusmenuliskan coding <font color=“red”></font>
Jika ingin membuat text berwarna merah lagimaka kita akanmenuliskan lagi <font color=“red”></font>
setiap kali kita inginmerubah font-nya
Jika menggunakan CSS, kitacukup membuat selector untuk p(paraghraph) makaotomatis tampilannnya samadengan sifat tag p hanyaditambahkan perubahanwarna, seperti berikut :p {
color: red;}Panggil dengan cara ketikkan:<p>Text Warna Merah</p>Jika ingin membuat warnamerah lagi tinggal panggil tag <p> di awal setiap teks yang ingin dirubah
Penulisan CSS ditandai dengan script
<style>
Penulisan CSS bisa diletakkan di head
atau di body, atau pun di file terpisah
sendiri.
Contoh :<style type="text/css">p{font-family: Comic Sans Ms;font-size: 18px;}i { font-family: sans;color: blue;}</style>
<body><p>DAFTAR FACEBOOK</p><i>Nama</i></body>
Untuk membuat text berwarna merah, bercetaktebal dan bergaris bawah, maka coding CSS-nya :
p{
color: red;
font-weight: bold;
text-decoration: underline;
}
Untuk membuat text h1(heading1) dibuat denganwarna biru dan jenis tulisan Futura Md BT, makacoding CSS-nya :
h1{
color: blue;
font-family: Futura Md BT;
}
Background Attachment
Berfungsi untuk mendefinisikan cara penampilan sebuah background
gambar. Mengatur gambar layar, apakah ikut bergerak jika scroll kita
gerakkan ke atas maupun ke bawah, nilainya ada dua yaitu fixed dan
scroll.Background Color
Berfungsi untuk mengubah latar belakang sebuah halaman
• Background Image
Berfungsi untuk mengubah latar belakang sebuah halaman dengan gambar
• Background Position
Berfungsi untuk mengatur letak sebuah gambar yang dihasilkan. Nilai
properti background position bisa berupa : Left/ Right / Center sedangkan
nilai yang kedua bisa berupa Top/middle/bottom
• Background Repeat
Berfungsi untuk mengatur perulangan gambar. Nilainya bisa berupa
Repeat-y, repeat-x, no-repeat
body {background-image : url(‘images.jpg’);Background-repeat: no-repeat;Background-attachment: fixed;Background-position: center middle;}
Background
ID dan Class dalam CSS digunakan jika ingin memberikan
lebih dari satu jenis style pada suatu tag html. Dengan
adanya id dan class ini kita dapat membrikan style masing-
masing pada suatu kolom atau paragraf tertentu.
ID ditandai dan selalu diawali dengan tanda pagar (#)
sedangkan class selalu ditandai dengan tanda titik (.).
ID dan Class
#menu {
background: blue;
}
.intro {font-family: tahoma;
font-size: 20px;
font-weight: bold;
color: yellow; }
ID dan Class<body>
<div id=“menu”>
<p class=“intro”>AKU</p>
<div class=“intro”>DIV</p>
</body>
Secara umum ada beberapa nilai yang terkandung
dalam properti ini, diantaranya :
Dashed, efek garis putus-putus
Dotted, efek garis titik-titik
Double, efek garis double
Groove, efek garis 3D dengan tipe groove
Inset, efek garis 3D denga tipe inset
None, tanpa garis
Outset, efek garis 3D denga tipe outset
Ridge, efek garis 3D denga tipe ridge
Solid, efek garis normal
Border
BorderBorder-bottom
Border-bottom-color
Border-bottom-style
Border-bottom-width
Border-left
Border-left-color
Border-left-style
Border-left-width
Border-top
Border-top-color
Border-top-style
Border-top-width
Border-right
Border-right-color
Border-right-style
Border-right-width
Border<html><head><title>Border CSS</title><style>
p{border-top-style: solid;border-left-style: dotted;border-bottom-style: dashed;border-right-style: double;}</style>
</head><body><p>Border style solid, dotted,
dashed dan double</p></body>
</html>
Border<html><head><title>Nyekrip: Belajar Border
CSS</title><style>
p{border-style:solid;border-left-width:10px;border-top-width:20px;border-right-width:30px;border-bottom-width:40px;} </style>
</head><body><p>Paragraf nih, dengan lebar
border yang berbeda pada tiap sisi</p></body>
</html>
Borderp.pertama {border-style: solid;border-color: red;border-width:10px;}
p.kedua {border-style: solid;border-color: #98bf21;border-width:10px;}
p.ketiga {border-style: solid;border-color: rgb(252,217,197);border-width:10px;}
Padding
Padding merupakan properti yang digunakan
untuk mengatur jarak ruang bagian bibir tepi
dalam sebuah elemen (mengatur jarak border
dengan konten). Padding dibagi 4 properti,
diantaranya :
Padding-top
Padding-right
Padding-bottom
Padding-left
Padding<html>
<head>
<style>
.top {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="top">
HAVE A NICE DAY
</div></body>
</html>
<html><head><style>.pad {padding-top: 20px;padding-left: 20px;}</style></head><body><div class=“pad">HAVE A NICE DAY</div></body></html>
Margin
Padding berfungsi untuk mengatur jarak antara bibir
tepi dengan konten di dalam suatu elemen
Margin berfungsi untuk mengatur jarak antara bibir
tepi dengan konten di luar suatu elemen
Margin-top
Margin-right
Margin-bottom
Margin-left
<html>
<head>
<style>
body {
background-color: blue;
color:yellow;
}
#top {
border-style: solid;
margin-top: 50px;
}
.intro {
font-size: 20px;
font-weight: bold;
padding: 10px 30px 40px 30px;
}
</style>
</head>
<body>
<div id="top">
<div class="intro">
margin dan padding top right bottom left
</div>
</div>
</body>
</html>
<html>
<head>
<style>
body {
background-color: blue;
color:yellow;
}
#top {
border-style: solid;
margin-top: 50px;
}
.intro {
font-size: 20px;
font-weight: bold;
padding: 10px 30px 40px 30px;
}
</style>
</head>
<body>
<div id="top">
<div class="intro">
margin dan padding top right bottom left
</div>
</div>
</body>
</html>