0

CSS/CSS3 Tutorial

CSS/CSS3 Tutorial


CSS berfungsi sebagai salah satu pelengkap untuk membangun sebuah website, dimana CSS akan bekerja untuk mempercantik tampilan halaman website. Pada tutorial ini kita akan mengetahui bagaimana cara menggunakan CSS.

CSS Pengenalan

Apa itu CSS ?

  • CSS singkatan dari Cascading Style Sheets
  • CSS mendefinisikan bagaimana elemen HTML yang akan ditampilkan
  • Styles ditambahkan ke HTML untuk memecahkan masalah
  • CSS menghemat banyak pekerjaan
  • Gaya eksternal Sheets disimpan dalam file CSS

CSS Syntax

Struktur penulisan CSS adalah selector { properties : value;} contohnya seperti pada gambar berikut
Kemudian untuk memberikan komentar pada css yaitu tambahkan /* letakkan komentar disini */

CSS Selector

Selector dalam CSS terdiri dari 3 macam, antara lain:

  1. ID (#)

    Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
    Id harus unik dalam suatu halaman, sehingga pemilih id digunakan jika Anda ingin memilih satu, elemen yang unik.
    Untuk memilih elemen dengan id tertentu, menulis karakter hash, diikuti oleh id dari elemen.
    Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = "para1":
    #para1 {
text-align: center;
color: red;
}

  2. Class (.)

    Pemilih kelas memilih elemen dengan atribut kelas khusus.
    Untuk memilih elemen dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas:
    Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan pusat-blok:
    .center {
text-align: center;
color: red;
}
    atau seperti ini :
    /*berfungsi hanya untuk selector "p" yang memiliki class "center"*/
p.center {
text-align: center;
color: red;
}

  3. Tag HTML

    Semua tag HTML dapat dijadikan sebagai selector. contoh:
    h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

CSS How To

Dalam menggunakan CSS, terdapat 3 cara . antara lain sebagi berikut :

  1. Inline Style

    Untuk menggunakan CSS tipe ini, css akan diletakkan didalam tag pembuka html alias sebagai atribut. Nama atributnya adalah style=" ", contoh: 
    <p style="color:red;font-family:calibri;"> 
... 
</p>

  2. Embedded Style

    Untuk menggunakan CSS tipe ini, css akan diletakkan diantara tag head. contoh:
    <head>
<style>
h1{color:green;text-align:center;}
</style>	
</head>

<body>
<h1> Contoh css tipe embedded </h1>
</body>

  3. Exsternal Style

    CSS disimpan pada file sendiri dengan ekstensi .css . Sehingga di HTML tidak tercampur dengan CSS. Lalu untuk menghubungkan antara HTML dan CSS perlu menambahkan kode dibawah ini di HTML :
    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
    contoh :
    file mystyle.css
    h1{color:green;text-align:center;}
    file latihan.html
    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">	
</head>

<body>
<h1> Contoh css tipe external </h1>
</body>

CSS Backgrounds

Terdiri dari beberapa efek :
  1. Background color
    Digunakan untuk memberikan warna latar pada selector
  2. Background image
    Digunakan untuk memasukkan gambar latar belakang
  3. Background repeat
    Digunakan untuk mengulang gambar latar belakang. background-repeat terdiri dari :
    • background-repeat: repeat-x (Gambar diulang horizontal)
    • background-repeat: repeat-y (gambar ini diulangi vertikal)
    • background-repeat: repeat (gambar ini diulangi horizontal dan vertikal)
    • background-repeat: no-repeat (Gambar tidak diulang)
  4. Background attachment
    Digunakan untuk mengunci gambar latar belakang. Berikut adalah dua nilai background-attachment:
    • Background-attachment: scroll (gulungan gambar dengan halaman -unlocked)
    • Background-attachment: fixed (gambar diblokir)
  5. Background position
    Digunakan untuk menentukan lokasi background. posisi antara lain left, right, bottom, center.
<style>
body{
background-image: url(img/selector.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
P{
background-color: #FF8E66;
}
</style>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<!- -Perbanyak paragraph agar dapat di scroll - - >
</body>

CSS Text

Dengan text CSS kita bisa memodifikasi tampilan dari keseluruhan text baik itu space, decoration maupun alignment. Properti pada CSS adalah
  1. color : digunakan untuk memberikan warna pada tulisan
  2. direction
    menentukan arah teks (penempatan setiap kata dalam teks pada setiap baris) dari arah kiri ke kanan atau dari kanan ke kiri. Perbedaan arah teks ditentukan melalui nilai css direction property. Sekalipun sepintas terlihat hampir sama dengan fungsi css text-align (left dan right), namun sebenarnya kedua css property ini mempunyai fungsi dan kegunaan berbeda.
  3. letter-spacing
    Kalau dengan word-spacing kita bisa membuat jarak antar kata maka dengan letter-spacing dapat membuat jarak antar huruf. Value dari letter-spacing harus kamu isi dalam pixel.
  4. line-height
    Berfungsi untuk mengatur jarak antar baris teks. Nilai yang digunakan berupa angka (ekuivalen dengan satuan em), dalam satuan px, pt, em, cm, etc (length) dan % (persen). Nilai line-height dalam persen ditentukan berdasarkan ukuran font. Dalam property line-height tidak berlaku nilai negatif. Jika ingin membuat setiap baris lebih rapat atau hingga baris teks bertumpuk gunakan nilai yang semakin kecil.
  5. text-align
    Secara default, text akan ditampilkan rapat kiri. Kalau kamu ingin memodifikasi tampilan dari text ini maka Anda dapat menggunakan properti text-align.
  6. text-decoration
    Dengan text decoration maka Anda dapat membuat tampilan text menjadi berbeda karena ditambah beberapa dekorasi seperti menambahkan garis di tengah, atas, maupun di bawah text. Selain itu dengan text decoration Anda juga bisa menghilangkan underline yang ada pada sebuah text link. Value text-decoration antara lain : none,underline,overline,line-through.
  7. text-indent
    Text indent CSS adalah salah satu cara untuk memberi indent pada paragraph tanpa kita perlu menggunakan tag preformatted HTML [html] <pre> [/html] atau menggunakan space manual [html] & nbsp ; [/html] Anda dapat menggunakan indent dengan value dalam pixel maupun dalam persen
  8. text-shadow
    Digunakan untuk memberikan effek bayangan pada objek.
  9. text-transform
    Untuk merubah secara otomatis sebuah text menjadi capital maupun sebaliknya. value yang tersedia : uppercase, lowercase, capitalize.
  10. vertical-align
    vertical-align property berlaku pada elemen image dan digunakan bersama teks. Property vertical-align berfungsi mengatur penempatan teks secara vertical di sebelah kanan dan/atau kiri sebuah image. Ada beberapa posisi penempatan teks yang bisa dipergunakan dan pengaturannya dilakukan melalui beberapa nilai/value yang sudah ditentukan. Selain pada elemen image, vertical-align property juga bisa dipergunakan pada elemen table-cell.
  11. white-space
    Untuk meniadakan text wrapping sebelum Anda menulis code maka Anda dapat menggunakan code white-space. Dengan white-space maka text akan ditampilkan terus memanjang kekanan sampai ada code.
  12. word-spacing
    Code word-spacing di gunakan untuk menentukan berapa nilai spasi antara setiap kata. Nilai atau value dari space ini harus dalam pixel.
<style>
/*CSS Color*/
p{
color:#054D53;	
}

/*CSS Direction*/
div.ex1 {direction:rtl;}

/*
- rtl : right to left
- ltr :left to right 
*/

/*CSS Letter spacing*/	
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}

/*CSS text align*/
h3 {text-align:center}
h4 {text-align:left}
h5 {text-align:right}	

/*CSS Line height*/
p.small {line-height:70%;}
p.big {line-height:200%;}

/*CSS Text decoration*/
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

/*CSS Text indent*/
p {text-indent:50px;}

/*CSS Text shadow*/
h1 {text-shadow:2px 2px #FF0000;}

/*CSS Text transform*/
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}	


/*CSS Vertical align*/
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

/*CSS White space*/
p{white-space:nowrap;}

/*CSS Word spacing*/
p{ word-spacing:30px;}
</style>

<body>
<p>Sets the color of text</p>>
<div>Some text. Default writing direction.</div>
<div class="ex1">Some text. Right-to-left direction.</div>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
<p>In my younger and more vulnerable years my father 
gave me some advice that I've been turning over in my</p>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

<p>
An <img src="img/selector.gif" alt="NOMOR1" width="70" height="50" /> image with a default alignment.
</p>>
<p>
An <img class="top" src="img/selector.gif" alt="Webhozz" width="70" height="50" /> image with a text-top alignment.
</p> 
<p>
An <img class="bottom" src="img/selector.gif" alt="Wehozz" width="70" height="50" /> image with a text-bottom alignment.
</p>
	
</body>

CSS Fonts

Pada CSS Fonts terdiri dari beberapa properties yaitu
  • font-style : Berfungsi mengatur format tulisan .
  • font-weight : Berfungsi mengatur ketebalan font
  • font-family : Berfungsi mengatur karakter font
  • font-size : Berfungsi mengatur ukuran font
  • font-variant : Berfungsi mengatur semua font, besar semua atau sebaliknya.
<style<
/*Font style*/
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
/*Font weight*/
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
/*Font family*/
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
/*Font size*/
h2 {font-size:200%;}
/*Font variant*/
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
/*Font */
p.ex1 {font:15px arial,sans-serif;}
p.ex2 { font:italic bold 12px/30px Georgia,serif;}
</style>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>	
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>>
<h2>This is heading 2</h2>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>

CSS Links

Link dapat diatur dengan properti CSS (misalnya warna, font-family, latar belakang, dll). Berikut properti link dalam CSS :
  • a: link - normal, link yang belum dikunjungi
  • a: visited - link user setelah mengunjungi
  • a: hover - link ketika mouse user di atasnya
  • a: active - link saat itu diklik
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b>a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Text Decoration

Properti ini berfungsi untuk memberikan underline pada link, jika ingin menghilangkan underline, cukup dengan menjadikan text-decoration :none; pada CSS . contoh : 
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
text-decoration : none;
}

/* visited link */
a:visited {
text-decoration : none;
}

/* mouse over link */
a:hover {
text-decoration : underline;
}

/* selected link */
a:active {
text-decoration : underline;
}
</style>
</head>
<body>

<p><b><a href="#" target="_blank">This is a link</a></b></p>
</body>
</html>

Background Warna

Properti ini memberikan warna latar pada link
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
background-color: #B2FF99;
}

/* visited link */
a:visited {
background-color: #FFFF85;
}

/* mouse over link */
a:hover {
background-color: #FF704D;
}

/* selected link */
a:active {background-color: #FF704D;
}
</style>
</head>
<body>

<p><b><a href="#" target="_blank">This is a link</a></b></p>
</body>
</html>

CSS List

Ada beberapa properties untuk list yang dapat digunakan , antara lain :
  1. list-style-type : mendeklarasikan semua properti list, mulai dari tipe,image dan position
  2. list-style : Menentukan gambar sebagai penanda daftar -item
  3. list-style-image : Menentukan jika penanda daftar -item akan muncul di dalam atau di luar aliran konten
  4. list-style-position : Menentukan tipe daftar -item penanda

Contoh list-style-type

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola
contoh dari ordered lists:
  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>contoh dari unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Contoh list-style-image

  • Coffee
  • Tea
  • Coca Cola
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('img/sqpurple.gif');
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Contoh list-style-position

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: inside;
}

ul.b {
list-style-position: outside;
}
</style>
</head>

<body>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Contoh list-style 

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside ('img/sqpurple.gif');
}
</style>
</head>

<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

CSS Tables

Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.
Contoh di bawah ini menetapkan batas hitam untuk <table>, <th>, dan <td> elemen:

Tabel border

<!DOCTYPE html>
<html>
<head>
<style>	
table, th, td {
border: 1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

Collapse Border 

table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

Pengaturan lebar dan tinggi untuk tabel

table {
width: 100%;
}

th {
height: 50px;
}

Horizontal text alignment

th {
text-align: left;
}

Vertical text alignment

td {
height: 50px;
vertical-align: bottom;
}

Table Color

table, td, th {
border: 1px solid green;
}

th {
background-color: green;
color: white;
}

Table Padding

td {
padding: 15px;
}

CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.
Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.
Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.
Gambar di bawah ini menggambarkan model kotak:

    Keterangan :

  • Konten - Isi kotak, di mana teks dan gambar muncul
  • Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan
  • Perbatasan - Sebuah batas yang terjadi di sekitar padding dan konten
  • Margin - Menghapus daerah di luar perbatasan. Margin transparan
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div>

</body>
</html>

Lebar dan Tinggi dari Elemen

Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model kotak bekerja.
Bila Anda mengatur lebar dan tinggi sifat elemen dengan CSS, Anda hanya mengatur lebar dan tinggi area konten.Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin.
Selanjutnya kita akan membuat sebuah elemen div yang memiliki lebar total 350px:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>
Mari kita melakukan perhitungan:
320px (lebar)
+ 20px (kiri + kanan untuk padding)
+ 10px (kiri + kanan untuk border)
+ 0px (kiri + margin untuk kanan)
= 350px
Total lebar elemen harus dihitung seperti ini:
Width = Total elemen lebar + bantalan kiri + kanan + bantalan perbatasan kiri + kanan + perbatasan margin kiri + margin kanan Tinggi total elemen harus dihitung seperti ini:
Tinggi total elemen = tinggi + bantalan atas + bawah bantalan + perbatasan atas + batas bawah + margin atas + margin bawah

Browser Compatibility

Terjadi masalah pada Internet Explorer 8 dan versi sebelumnya, termasuk padding dan perbatasan di properti lebar.
Untuk memperbaiki masalah ini, tambahkan <! DOCTYPE html> ke halaman HTML.

CSS Border

CSS Border Properti

Sifat perbatasan CSS memungkinkan Anda untuk menentukan gaya, ukuran, dan warna perbatasan sebuah elemen.

Style border

Properti border-style menentukan apa perbatasan untuk ditampilkan.
Tidak ada sifat perbatasan akan memiliki efek APAPUN kecuali properti border-style diatur!
nilai border-style:
  • none: Mendefinisikan ada batas
  • dotted: Mendefinisikan perbatasan bertitik
  • berlari: Mendefinisikan perbatasan putus-putus
  • padat: Mendefinisikan perbatasan yang solid
  • ganda: Mendefinisikan dua perbatasan. Lebar dua perbatasan adalah sama dengan nilai border-width
  • groove: Mendefinisikan perbatasan beralur 3D. Efeknya tergantung pada nilai border-color
  • ridge: Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
  • inset: Mendefinisikan perbatasan 3D inset. Efeknya tergantung pada nilai border-color
  • awal: Mendefinisikan awal perbatasan 3D. Efeknya tergantung pada nilai border-color

Lebar border

Properti border-width digunakan untuk mengatur lebar border.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Catatan: "border-width" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur border pertama.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. You must add the "border-style" property to set the borders first.</p>

</body>
</html>

Warna Border

Properti border-color digunakan untuk mengatur warna border. Warna dapat diatur oleh:
  • Nama - menentukan nama warna, seperti "red"
  • RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
  • Hex - menentukan nilai hex, seperti "# ff0000"
Anda juga dapat mengatur warna border untuk "transparan".
Jika warna border tidak diatur itu diwariskan dari properti warna elemen.
Catatan: "border-color" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur border pertama.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
} 
</style>
</head>
<body>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>

Perbatasan - sisi Individu

Dalam CSS adalah mungkin untuk menentukan batas yang berbeda untuk sisi yang berbeda:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>
Contoh di atas juga dapat diatur dengan properti tunggal:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>
Properti border-style dapat memiliki dari satu sampai empat nilai.
  • border-style: burik ganda padat berlari;
    • border atas dihiasi
    • batas kanan solid
    • batas bawah ganda
    • border kiri berlari
  • border-style: burik padat ganda;
    • border atas dihiasi
    • batas kanan dan kiri yang padat
    • batas bawah ganda
  • border-style: burik padat;
    • border atas dan bawah yang dihiasi
    • batas kanan dan kiri yang padat
  • border-style: dihiasi;
    • keempat border yang bertitik
Properti border-style digunakan dalam contoh di atas. Namun, ia juga bekerja dengan border-width dan border-color.

border - Properti Singkatan

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan border.
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti border individu dalam satu properti. Ini disebut properti steno.
Properti border adalah singkatan untuk properti border individu berikut:
  • border-width
  • border-style (wajib)
  • border-color
<!DOCTYPE html><html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</html>

CSS Outline

outline/Garis adalah garis yang ditarik di sekitar elemen (luar border) untuk membuat elemen "menonjol".
Namun, properti outline berbeda dengan properti border.
outline/Garis besar bukan merupakan bagian dari dimensi sebuah elemen; Total lebar elemen dan tinggi tidak terpengaruh oleh lebar garis besar.
Semua Properti CSS Outline
Properti Deskripsi Nilai
outline Mengatur semua properti dalam satu garis deklarasi outline-color
outline-style
outline-width
inherit
outline-color Mengatur warna garis color_name
hex_number
rgb_number
invert
inherit
outline-style Mengatur gaya garis none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Mengatur lebar garis thin
medium
thick
length
inherit

CSS Margin

Adalah jarak diluar selector pada CSS. Margin memiliki beberapa jenis :
  • margin: 25px 50px 75px 100px;
    • jarak atas adalah 25px
    • jarak kanan adalah 50px
    • jarak bawah adalah 75px
    • jarak kiri adalah 100px
  • margin: 25px 50px 75px;
    • jarak atas adalah 25px
    • jarak kanan dan kiri 50px
    • jarak bawah adalah 75px
  • margin: 25px 50px;
    • jarak atas dan bawah adalah 25px
    • jarak kanan dan kiri adalah 50px
  • margin: 25px;
    • Semua berjarak 25px
<style>
p { background-color: yellow;}

p.margin {  margin-top: 100px;  margin-bottom: 100px; margin-right: 150px; margin-left: 50px; }
</style>

<body>

<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>

</body>

CSS Padding

Adalah kebalikan dari margin yang berarti jarak didalam
<style>
p { background-color: yellow;}

p.padding {padding-top: 25px; padding-bottom: 25px;padding-right: 50px; padding-left: 50px;}
</style>

<body>

<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>

</body>

CSS Dimensi

Sifat Dimensi CSS memungkinkan Anda untuk mengontrol tinggi dan lebar dari elemen.
Properti Deskripsi Value
height mengatur tinggi elemen auto
length
%
inherit
max-height mengatur maksimal tinggi elemen none
length
%
inherit
min-height mengatur minimal tinggi elemen length
%
inherit
width mengatur lebar elemen auto
length
%
inherit
max-width mengatur maksimal lebar elemen none
length
%
inherit
min-width mengatur minimal lebar elemen length
%
inherit 
<!DOCTYPE html>
<html>
<head>
<style>
img.normal { height:auto; }

img.big { height:120px;}

p.ex { height:100px; width:100px;}

.maxheight { max-height:50px; background-color:yellow;overflow:auto;}

.maxwidth { max-width:100px; background-color:yellow;}

.minheight { min-height:100px; background-color:yellow;}

.minwidth { min-width:150px; background-color:yellow;}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.(isi kalimat 5 baris).</p>
<p class="maxheight">Letakkan kalimat 5 baris</p>
<p class="maxwidth">The maximum height of this paragraph is set to 50px. The</p>
<p class="minheight">The minimum height of this paragraph is set to 100px.</p>
<p class="minwidth">The minimum width of this paragraph is set to 150px.</p>
</body>
</html>

CSS Display

Merupakan salah satu properti CSS yang fungsinya sama dengan span yaitu memisahkan bagian yang dikurung dari pengaturan sebelum dan sesudahnya.
  1. Display : none (menghilangkan selector)
  2. Display : inline (tampilan text akan mengikuti tampilan awal)
  3. Display : block (dapat memisahkan selector yang kita kehendaki dengan induknya)
<!DOCTYPE html>
<html>
<head>
<style>
li {display: inline;}

span {display:block;}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>
</body>
</html>

CSS Positioning

  1. Position : static
    posisi default suatu elemen (statis). Tataletaknya seperti div biasa. Pada posisi ini top, right, bottom danleft tidak akan berpengaruh
    <style>
body {
background:#f2f2f2;
font:normal 12px Arial;
}
#div1 {
background:black;
height:150px;
width:80%;
margin:20px auto;
text-align:center;
color:white;
}
.div2 {
background:red;
width:250px;
height:50px;
line-height:50px;
top:25px;
left:10px;
position:static;    
}
.div3 {
background:green;
width:250px;
height:50px;
line-height:50px;
top:15px;
left:10px;   
}
</style>

<body>
<div id='div1'>
<div class='div2'>Ini DIV2 dengan position:static</div>
<div class='div3'>Ini DIV3 tanpa deklarasi position</div>
</div>
</body>
  2. Position : fixed
    Posisi ini hampir sama dengan position:absolute, akan tetapi perbedaannya position:fixed akan selalu pada posisinya walaupun browser di scroll. Contohnya saya gabung dengan position:absolute terhadap layar (contoh atas).
  3. Position : relative
    Posisi inilah yang sering digunakan, pada posisi ini kita bisa memanfaatkan properti top dan left. Objek akan berubah posisi terhadap elemen utama, dan juga relativ terhadap dirinya.
    <style>
body {
background:#f2f2f2;
font:normal 12px Arial;
}
#div1 {
background:black;
height:150px;
width:80%;
margin:20px auto;
text-align:center;
color:white;
}
.div2 {
background:red;
width:250px;
height:50px;
line-height:50px;
top:15px;
left:10px;
bottom:40px;
position:relative;    
}
.div3 {
background:green;
width:250px;
height:50px;
line-height:50px;
top:15px;
left:40px;
position:relative;
}
</style>

<body>
<div id='div1'>
<div class='div2'>Ini DIV2 dengan top:15px dan left:10px</div>
<div class='div3'>Ini DIV2 dengan top:15px dan left:40px</div>
</div>
</body>
  4. Position : inherit
    Posisi ini akan mengikuti posisi pada elemen induk. Apabila elemen induk mempunyai position:absolute maka elemen didalamnya apabila diberi properti position dengan value inherit, maka hasilnya menjadi position:absolute (mengikuti elemen induk).
  5. Position : absolute
    Dengan menerapkan position:absolute, maka objek akan mengikuti parent (induk elemen) dengan catatan induk elemen harus menggunakan position:relative
    <style>
body {
background:#f2f2f2;
font:normal 12px Arial;
}
#div1 {
background:black;
height:150px;
width:80%;
line-height:50px;
margin:20px auto;
text-align:center;
color:white;
position:relative;
}
.div2 {
background:red;
width:250px;
height:50px;
line-height:50px;
left:50px;
bottom:0;
position:absolute;    
}
</style>

<body>
<div id='div1'>Ini elemen Induk dan harus memiliki position:relative
<div class='div2'>Ini DIV2 dengan bottom:0 dan left:50px</div>
</div>
</body>

CSS Floating

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {  float: left; width: 110px;  height: 90px;   margin: 5px;}

.text_line {  clear: both;    margin-bottom: 2px;}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

CSS Align

Digunakan untuk membuat perataan. Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}

.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>

<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>

<div class="right">
<p><b>Note: </b>When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>

</body>
</html>

CSS Combinator

adalah Sebuah selector CSS dapat berisi lebih dari satu selector sederhana. Antara selector sederhana, kita bisa memasukkan combinator a.
Ada empat combinators berbeda dalam CSS3:
  • selector keturunan
  • selector anak
  • selector saudara yang berdekatan
  • selector saudara umum
<!DOCTYPE html>
<html>
<head>
<style>

/*keturunan*/
div p {
background-color: yellow;
}

/*anak */
div > p {
background-color: yellow;
}


/*saudara yang berdekatan*/
div + p {
background-color: yellow;
}

/*saudara umum*/
div ~ p {
background-color: yellow;
}

</style>
</head>
<body>



Paragraph 1 in the div.


Paragraph 2 in the div.




Paragraph 3. Not in a div.


Paragraph 4. Not in a div.





</body>
</html>

CSS Pseudo-class

Adalah Sebuah pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu unsur.
Sebagai contoh, dapat digunakan untuk:
- Gaya elemen ketika mouse pengguna di atasnya
- Gaya dikunjungi dan belum dikunjungi link berbeda
sintaks :
selector:pseudo-class {
property:value;
}

Link pseudo-class

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

CSS Pseudo-element

adalah Sebuah CSS pseudo-elemen yang digunakan untuk gaya tertentu bagian dari elemen.
Sebagai contoh, dapat digunakan untuk:
Gaya huruf pertama, atau jalur, dari elemen
Sisipkan konten sebelum, atau setelah, isi elemen
sintaks :
selector::pseudo-element {
property:value;
}

Pseudo first-line

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>

Pseudo first-letter

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

CSS Navigation Bar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.$lt;/p>
<p>A backgrund color is added to the links to show the link area. The whole link area is clickable, not just the text.$lt;/p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.$lt;/p>

</body>
</html>
Keterangan
float: left - menggunakan pelampung untuk mendapatkan unsur-unsur blok untuk meluncur di samping satu sama lain
display: block - Menampilkan link sebagai elemen blok membuat daerah link diklik keseluruhan (tidak hanya teks), dan memungkinkan kita untuk menentukan lebar
width: 60px - Karena elemen blok mengambil lebar penuh yang tersedia, mereka tidak bisa mengapung di samping satu sama lain. Kami menentukan lebar link ke 60px

CSS Image Gallery

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}	

div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}

div.img a:hover img {
border: 1px solid #0000ff;
}

div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>

$lt;div class="img">
$lt;a target="_blank" href="klematis_big.htm">
$lt;img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
$lt;div class="desc">Add a description of the image here</div>
$lt;/div>
$lt;div class="img">
$lt;a target="_blank" href="klematis2_big.htm">
$lt;img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
$lt;div class="desc">Add a description of the image here</div>
$lt;/div>
$lt;div class="img">
$lt;a target="_blank" href="klematis3_big.htm">
$lt;img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
$lt;div class="desc">Add a description of the image here</div>
$lt;/div>
$lt;div class="img">
$lt;a target="_blank" href="klematis4_big.htm">
$lt;img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
$lt;div class="desc">Add a description of the image here</div>
$lt;/div>

</body>
</html>

CSS Image Opacity

Membuat gambar transparan dengan CSS mudah.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
</body>
</html>

CSS Image Sprites

Sebuah sprite gambar koleksi gambar dimasukkan ke dalam satu gambar.
Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan beberapa permintaan server.
Menggunakan gambar sprite akan mengurangi jumlah permintaan server dan menghemat bandwidth.

Gambar Sprite -Contoh Sederhana

Alih-alih menggunakan tiga gambar terpisah, kami menggunakan gambar ini tunggal ("img_navsprites.gif"):
Dengan CSS, kita dapat menunjukkan hanya bagian dari gambar yang kita butuhkan.
Pada contoh berikut CSS menentukan bagian mana dari "img_navsprites.gif" gambar untuk menunjukkan:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif"><br><br>
<img id="next" src="img_trans.gif">

</body>
</html>
Keterangan:
< Img id = "rumah" src = "img_trans.gif"> - Hanya mendefinisikan gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi gambar latar belakang kita tentukan di CSS
width: 46px; height: 44px; - Mendefinisikan bagian dari gambar yang ingin kita gunakan
background: url (img_navsprites.gif) 0 0; - Menentukan gambar latar belakang dan posisinya (0px kiri, atas 0px)
Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita ingin memperluas dengan menggunakan link dan membawa efek.

Gambar Sprite - Buat Daftar Navigasi

Kami ingin menggunakan gambar sprite ("img_navsprites.gif") untuk membuat daftar navigasi.
Kami akan menggunakan daftar HTML, karena dapat link dan juga mendukung gambar latar belakang:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>
Keterangan
#navlist {position: relative;} - posisi diatur untuk relatif untuk memungkinkan posisi mutlak di dalamnya
#navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin dan padding diatur ke 0, list-style dihapus, dan semua item daftar yang mutlak diposisikan
#navlist li, #navlist a {height: 44px; display: block;} - ketinggian semua gambar yang 44px
Sekarang mulai posisi dan gaya untuk setiap bagian tertentu:

#home {kiri: 0px; width: 46px;} - Diposisikan semua jalan ke kiri, dan lebar gambar adalah 46px
#home {background: url (img_navsprites.gif) 0 0;} - Menentukan gambar latar belakang dan posisinya (0px kiri, atas 0px)
#prev {kiri: 63px; width: 43px;} - Diposisikan 63px ke kanan (#home lebar 46px + beberapa ruang ekstra antara item), dan lebarnya adalah 43px.
#prev {background: url ('img_navsprites.gif') -47px 0;} - Menentukan 47px gambar latar belakang ke kanan (#home lebar 46px + 1px baris pembagi)
#next {kiri: 129px; width: 43px;} - Diposisikan 129px ke kanan (awal #prev adalah 63px + lebar #prev 43px + ruang tambahan), dan lebarnya adalah 43px.
#next {background: url ('img_navsprites.gif') -91px 0;} - Menentukan 91px gambar latar belakang ke kanan (#home lebar 46px + 1px garis pembagi + lebar #prev 43px + 1px baris pembagi)

Gambar Sprite - Hover Efek

Sekarang kita ingin menambahkan efek hover ke daftar navigasi kami.
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>
Keterangan
#home a: hover {background: url transparan ('img_navsprites_hover.gif') 0 -45px;} - Untuk semua tiga gambar melayang-layang kita tentukan posisi latar belakang yang sama, hanya 45px lebih bawah

CSS Media Types

Dengan menggunakan aturanmedia, sebuah situs web dapat memiliki tata letak yang berbeda untuk layar, cetak, ponsel, tablet, dll

Jenis Media

Beberapa properti CSS hanya dirancang untuk media tertentu. Misalnya "suara-family" properti dirancang untuk agen pengguna aural. Beberapa properti lainnya dapat digunakan untuk jenis media yang berbeda. Misalnya, "font-size" properti dapat digunakan untuk kedua media layar dan cetak, tapi mungkin dengan nilai yang berbeda. Dokumen biasanya membutuhkan font-size lebih besar pada layar daripada di atas kertas, dan sans-serif font yang mudah dibaca di layar, sedangkan font serif lebih mudah dibaca di atas kertas.

Aturanmedia

Themedia Aturan memungkinkan aturan gaya yang berbeda untuk media yang berbeda dalam style sheet yang sama.
Gaya dalam contoh di bawah ini memberitahu browser untuk menampilkan 14 piksel Verdana font pada layar. Tetapi jika halaman dicetak, maka akan dalam font 20 piksel, dan dalam warna merah:
<!DOCTYPE html>
<html>
<head>
<style>
@media screen {
p {
font-family: verdana,sans-serif;
font-size: 14px;
}
}

@media print {
p {
font-size: 20px;
color: red;
}
}
</style>
</head>
<body>

<h2>The @media Rule</h2>
<p>The @media rule allows different style rules for different media in the same style sheet.</p>
<p>The style in this example tells the browser to display a 14 pixels Verdana font on the screen.
However, if the page is printed, the text will be in 20 pixels Verdana font, and in a red color.</p>
<p><b>See it yourself !</b> Print this page (or open Print Preview), and you will see
that the text will be displayed in a larger font size, and in red color.</p>

</body>
</html>

CSS Attr / Atribut Selector

Hal ini dimungkinkan untuk gaya elemen HTML yang memiliki atribut tertentu atau nilai atribut.

CSS [atribut] selector

The [atribut] selector digunakan untuk memilih elemen dengan atribut tertentu.
Contoh berikut memilih semua elemen <a> dengan atribut target:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="http://www.nomor1.com">NOMOR1</a>
<a href="http://www.aturkeuangan.com" target="_blank">Atur Keuangan</a>
<a href="http://www.traveltalks.co.id" target="_top">Travel Talks</a>

<p><b>Note:</b>For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

CSS [atribut = value] selector

The [atribut = value] selector digunakan untuk memilih elemen dengan atribut tertentu dan nilai.
Contoh berikut memilih semua elemen <a> dengan target = "_ blank" atribut:
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="http://www.nomor1.com">NOMOR1</a>
<a href="http://www.aturkeuangan.com" target="_blank">Atur Keuangan</a>
<a href="http://www.traveltalks.co.id" target="_top">Travel Talks</a>

<p><b>Note:</b>For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

CSS [atribut ~ = value] selector

Pada [atribut ~ = nilai] selector digunakan untuk memilih elemen dengan nilai atribut yang mengandung kata tertentu.
Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar dipisahkan dengan spasi dari kata-kata, salah satunya adalah "bunga":
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>

<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>
Contoh di atas akan cocok dengan elemen title = "bunga", title = "bunga musim panas", dan title = "bunga baru", tapi tidak title = "my-bunga" atau title = "bunga".

CSS [atribut | = value] selector

Pada [atribut | = value] selector digunakan untuk memilih elemen dengan atribut tertentu dimulai dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":
Catatan: Nilai harus seluruh kata, baik sendiri, seperti class = "top", atau diikuti dengan tanda hubung (-), seperti class = "top-teks"!
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

CSS [atribut ^ = value] selector

Pada [atribut ^ = nilai] selector digunakan untuk memilih elemen yang nilainya atribut dimulai dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":
Catatan: Nilai tidak harus seluruh kata!
<!DOCTYPE html<
<html<
<head<
<style<
[class^="top"] {
background: yellow;
}
</style<
</head<
<body<

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p><b>Note</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body<
</html<

CSS [atribut $ = value] selector

Pada [atribut $ = value] selector digunakan untuk memilih elemen yang nilainya atribut berakhir dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berakhir dengan "test":
Catatan: Nilai tidak harus seluruh kata!
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

CSS [atribut * = nilai] selector

Pada [atribut * = nilai] pemilih digunakan untuk memilih elemen yang nilainya atribut berisi nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi "te":
Catatan: Nilai tidak harus seluruh kata!
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Styling Bentuk form

Penyeleksi atribut dapat berguna untuk bentuk styling tanpa kelas atau ID:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>

</body>
</html>

CSS 3

CSS 3 merupakan pengembangan versi css terbaru.

CSS Border

Dengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan untuk kotak, dan menggunakan gambar sebagai perbatasan - tanpa menggunakan program desain, seperti Photoshop.
Dalam bab ini Anda akan belajar tentang sifat-sifat perbatasan berikut:
border-radius
box-shadow
border-image
<!DOCTYPE html>
<html>
<head>
<style>
.border-radiusdiv {
border: 2px solid #a1a1a1;
padding: 10px 40px; 
background: #dddddd;
width: 300px;
border-radius: 25px;
}


.box-shadowdiv {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}


.border-imagediv {
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
}

#round { 
-webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 30 round;
}

#stretch {
-webkit-border-image: url(border.png) 30 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div class="border-radiusdiv"></div>

<div class="box-sahdowdiv"></div>

<div id="round" class="border-imagediv">Here, the image is tiled (repeated) to fill the area.</div>
<br>
<div id="stretch" class="border-imagediv">Here, the image is stretched to fill the area.</div>

<p>Here is the image that is used:</p>
<img src="border.png">

</body>
</html>

CSS Backgrounds

CSS3 berisi beberapa properti latar belakang baru, yang memungkinkan kontrol yang lebih besar dari elemen latar belakang.
Dalam bab ini Anda akan belajar tentang sifat-sifat latar belakang berikut:
background-size
background-origin
Anda juga akan belajar bagaimana menggunakan beberapa gambar latar belakang.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</body>
</html>

CSS Gradient

CSS3 gradien membiarkan Anda menampilkan transisi halus antara dua atau lebih warna tertentu.
Sebelumnya, Anda harus menggunakan gambar untuk efek ini. Namun, dengan menggunakan gradien CSS3 Anda dapat mengurangi waktu download dan penggunaan bandwidth. Selain itu, unsur-unsur dengan gradien terlihat lebih baik ketika diperbesar, karena gradien yang dihasilkan oleh browser.
CSS3 mendefinisikan dua jenis gradien:
- Linear Gradien (turun / naik / kiri / kanan / diagonal)
- Gradien radial (didefinisikan oleh pusat mereka)
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

CSS Text Effects

Dalam bab ini Anda akan belajar tentang sifat-sifat teks berikut:
text-shadow
word-wrap
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
}


p.test {
width: 11em; 
border: 1px solid #000000;
word-wrap: break-word;
}

</style>
</head>
<body>
<h1>Text-shadow effect!</h1>

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

CSS Fonts

Font web memungkinkan Web Designer untuk menggunakan font yang tidak diinstal pada komputer pengguna. Ketika Anda menemukan/membeli font yang Anda ingin menggunakan, hanya mencakup file font pada server web Anda, dan itu akan didownload secara otomatis ke pengguna bila diperlukan.

Format Font yang perlu diketahui

  1. Font TrueType (TTF)

    TrueType adalah font standar di akhir tahun 1980an, yang dikembangkan oleh Apple dan Microsoft. TrueType adalah format font yang paling umum untuk Mac OS dan Microsoft Windows sistem operasi.
  2. Font OpenType (OTF)

    OpenType adalah format font komputer scalable. Dibangun pada TrueType, dan adalah merek dagang terdaftar dari Microsoft. OpenType font yang digunakan umumnya hari pada platform komputer besar.
  3. Web Open Font Format (WOFF)

    WOFF adalah format font untuk digunakan dalam halaman web. Ini dikembangkan di 2009, dan sekarang sebuah Rekomendasi W3C. WOFF adalah pada dasarnya OpenType atau TrueType dengan kompresi dan metadata tambahan.Tujuannya adalah untuk mendukung font distribusi dari server untuk klien melalui jaringan dengan kendala-kendala bandwidth.
  4. SVG font/bentuk

    SVG font memungkinkan SVG untuk digunakan sebagai mesin terbang ketika menampilkan teks. Spesifikasi SVG 1.1 mendefinisikan modul font yang memungkinkan penciptaan font dalam dokumen SVG. Anda juga dapat menerapkan CSS ke dokumen SVG, dan @font-face dapat diterapkan untuk teks dalam dokumen SVG.
  5. Font Embedded OpenType (EOT)

    EOT font yang bentuk kompak OpenType font dirancang oleh Microsoft untuk digunakan sebagai embedded font pada halaman web. 
<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
font-family: myFirstFont;
src: url(Amaranth-Regular.otf);
}

div{
font-family:myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

CSS 2D Transform

Pada 2D transform kita dapat memodifikasi bentuk, ukuran dan posisi sebuah element. Semua browser utama men-support fungsi ini, IE9 dengan property -ms- , Firefox dengan property -moz-, Chrome & Safari dengan property -webkit- kemudian Opera dengan property -o-.
Beberapa syntax 2d transform :
  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

translate()

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

rotate()

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>


</body>
</html>

scale()

<!DOCTYPE html>
<html>
<head>
<style>

div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
margin: 100px;
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4); /* Standard syntax */
}

</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

skew()

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
transform: skew(30deg,20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

matrix()

<!DOCTYPE html>
<html>
<head>
<style>

div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Standard syntax */
}

</style>
</head>
<body>



<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>


</body>
</html>

CSS 3D Transform

CSS3 memungkinkan Anda untuk memformat elemen Anda menggunakan transformasi 3D.
Dalam bab ini Anda akan belajar tentang beberapa metode transformasi 3D:
rotateX ()
rotateY ()
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg); /* Standard syntax */
}
</style>
</head>
<body>

<div>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}

div#div2 {
-webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
transform: rotateY(130deg); /* Standard syntax */
}
</style>
</head>
<body>

<div>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</div>

</body>
</html>

CSS Transition

Transisi CSS3 efek yang memungkinkan elemen secara bertahap berubah dari satu gaya yang lain.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

CSS Animation

Sebuah animasi memungkinkan elemen secara bertahap berubah dari satu gaya yang lain.
Anda dapat mengubah banyak properti yang Anda inginkan, sebanyak yang Anda inginkan.
Anda dapat menentukan kapan perubahan akan terjadi dalam persen, atau Anda dapat menggunakan kata kunci "dari" dan "untuk" (yang mewakili 0% dan 100%).
0% merupakan awal animasi, 100% adalah ketika animasi selesai.
<!DOCTYPE html>
<html>
<head>
<style>
.div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

/* Standard syntax */
@keyframes myfirst {
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

</style>
</head>
<body>

<div ></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

</style>
</head>
<body>

<div></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div ></div>

</body>
</html>

CSS Multiple Columns

Dalam bab ini Anda akan belajar tentang beberapa properti kolom berikut:
  • column-count
  • column-gap
  • column-rule
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}


.newspaper1 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}


.newspaper2 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;
}

</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

<div class="newspaper1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>


<div class="newspaper2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>


</body>
</html>

CSS User Interface

alam bab ini Anda akan belajar tentang mengikuti sifat-sifat antarmuka pengguna:
  • resize
  • box-sizing
  • outline-offset
<!DOCTYPE html>
<html>
<head>
<style>
div1 {
border: 2px solid;
padding: 10px 40px; 
width: 300px;
resize: both;
overflow: auto;
}


div.container {
width: 30em;
border: 1em solid;
}

div.box
{
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box;
width: 50%;
border: 1em solid red;
float: left;
}

</style>
</head>
<body>

<div class="div1">The resize property specifies whether or not an element is resizable by the user.</div>

<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>

</body>
</html>

SUMBER:http://sanl1509.nom1.in/sanl1509

Nilai artikelnya:

Tags

Post a Comment

0 Comments
Google