My blog dewi citra kurnia: April 2016

CSS TUTORIALS PART 2

1. CSS Dimension

Height-Width

Penjelasan :

Properti CSS dimension digunkan untuk mengatur tinggi dan lebar dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

img.normal {

height: auto;

}

img.big {

height: 120px;

}

p.ex {

height: 100px;

width: 100px;

}

</style>

</head>

<body>

<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.

This is some text in a paragraph. This is some text in a paragraph.

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

</body>

</html>

Hasil :

Max Height

Penjelasan :

Properti max height digunkan untuk mengatur tinggi maksimal dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p {

max-height: 50px;

background-color: yellow;

overflow: auto;

}

</style>

</head>

<body>

<p>The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px.</p>

</body>

</html>

Hasil :

Max Width

Penjelasan :

Properti max width digunakan untuk mengatur lebar maksimal dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p {

max-width: 100px;

background-color: pink;

}

</style>

</head>

<body>

<p>The maximum width of this paragraph is set to 100px.</p>

</body>

</html>

Hasil :

Min Height

Penjelasan :

Properti min height digunakan untuk mengatur tinggi minimal dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p {

min-height: 100px;

background-color: violet;

}

</style>

</head>

<body>

<p>The minimum height of this paragraph is set to 100px.</p>

</body>

</html>

Hasil :

Min Width

Penjelasan :

Properti min width digunakan untuk mengatur lebar minimal dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p {

min-width: 150px;

background-color: lightgreen;

}

</style>

</head>

<body>

<p>The minimum width of this paragraph is set to 150px.</p>

</body>

</html>

Hasil :

2. CSS Display

Penjelasan :

Properti display menentukan jika/bagaimana sebuah elemen ditunjukkan, dan property visibility menentukan jika sebuah elemen harus diperlihatkan atau disembunyikan.

Hiding an element-visibility:hidden

Penjelasan :

Hidding sebuah elemen dapat diselesaikan dengan pengaturan property display “none” atau “hidden”. Visibility:hidden digunakan untuk menyembunyikan elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

h1.hidden {

visibility: hidden;

}

</style>

</head>

<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>

<p>Notice that the hidden heading still takes up space.</p>

</body>

</html>

Hasil :

CSS Display- Block and Inline Element

Penjelasan :

Elemen block adalah sebuah elemen yang mengambil kemungkinan dapat digunakan dengan lebar secara penuh dan mempunyai pemecah baris sebelum dan sesudahnya.

Contoh dari elemen block, yaitu : <h1>, <p>, <li>, <div>.

Elemen inline hanya mengambil selebar yang diperlukan. Contoh dar elemen inline, yaitu : <span>, <a>.

Changing How an Element is Displayed

Penjelasan :

Changing elemen inline untuk sebuah elemen block dan dapat digunaknan untuk membuat halaman terlihat specific dan masih mengikuti standar web.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

li {

display: inline;

}

</style>

</head>

<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>

<li><a href="../js/default.html" target="_blank">JavaScript</a></li>

</ul>

</body>

</html>

Hasil :

3. CSS Positioning

Penjelasan :

Properti CSS positioning digunakan untuk posisi sebuah elemen dan juga dapat menempatkan sebuah elemen lain dibelakang dan menentukkan apa yang seharusnya terjadi ketika konten elemen terlalu besar.

Elemen-elemen tersebut dapat diposisikan dengan property top, bottom, left, dan right.

Static Positioning

Penjelasan :

Elemen HTML memposisikan statis secara default. Posisi statis selalu diposisikan menurut arus normal dari halaman.

Fixed Posotioning

Penjelasan :

Sebuah elemen dengan posisi tetap ditempatkan relative untuk jendela browser dan tidak akan berpindah jika jendela digerakkan.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p.pos_fixed {

position: fixed;

top: 30px;

right: 5px;

color: blue;

}

</style>

</head>

<body>

<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p>

<p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p><p>Dewi Citra Kurnia</p>

<p class="pos_fixed">Some positioned text.</p>

</body>

</html>

Hasil :

Relative Positioning

Penjelasan :

Sebuah elemen dengan posisi relative diposisikan relative untuk posisi normalnya.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

h2.pos_left {

position: relative;

left: -20px;

}

h2.pos_right {

position: relative;

left: 20px;

}

</style>

</head>

<body>

<h2>Heading with no position</h2>

<h2 class="pos_left">This heading is moved left according to its normal position</h2>

<h2 class="pos_right">This heading is moved right according to its normal position</h2>

<p>Relative positioning moves an element RELATIVE to its original position.</p>

<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>

<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>

</body>

</html>

Hasil :

Absolute Positioning

Penjelasan :

Sebuah elemen dengan posisi absolute diposisikan relative untk elemen pertama yang mempunyai posisi lain daripada statis.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

position: absolute;

left: 100px;

top: 150px;

}

</style>

</head>

<body>

<h2>This heading has an absolute position</h2>

<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>

</body>

</html>

Hasil :

Overlapping Positioning

Penjelasan :

Ketika elemen diposisikan diluar arus normal, elemen-elemen tersebut dapat melengkapi elemen-elemen yang lain. Properti z-index menentukan perintah yang berisi sebuah elemen (dimana elemen seharusnya ditempatkan di depan, belakang, atau lainnya).

Script :

<!DOCTYPE html>

<html>

<head>

<style>

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>

</html>

Hasil :

4. CSS Floating

Penjelasan :

Dengan CSS float, sebuah elemen dapat didorong ke kiri atau kanan dan mununjukkan elemen lain untuk membungkus disekitarnya. Float sering digunakan dengan gambar, tetapi itu juga sangat berguna ketika sedang bekerja dengan layout.

How Element Float

Penjelasan :

Elemen diapungkan secara horizontal, artinya sebuah elemen hanya dapat diapungkan ke kiri atau kanan, tidak ke atas atau bawah. Elemen float akan memindahkan sejauh mungkin ke kiri atau kanan.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: right;

}

</style>

</head>

<body>

<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>

Dewi Citra Kurnia. Dewi Citra Kurnia. Dewi Citra Kurnia.

</p>

</body>

</html>

Hasil :

Floating Elements Next to Each Other

Penjelasan :

Jika menempatkan beberapa elemen floating setelah masing-masing, mereka akan mengapung selanjutnya ke masing-masing jika ada ruangan.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

.thumbnail {

float: left;

width: 110px;

height: 90px;

margin: 5px;

}

</style>

</head>

<body>

<h3>Image Gallery</h3>

<p>Try to resize the browser-window to see what happens when the images do not have enough room.</p>

</body>

</html>

Hasil :

Turning Off Float – Using Clear

Penjelasan :

Elemen-elemen setelah elemen float akan mengalir disekitarnya. Untuk menghindarinya, gunakan property clear. Properti clear menentukan dimana sisi dari elemen-elemen floating lain ditunjukkan.

Script :

<!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>

<h3 class="text_line">Second row</h3>

</body>

</html>

Hasil :

5. CSS Align

Aligning Block Elements

Penjelasan :

Elemen block adalah sebuah elemen yang mengambil kemungkinan dapat digunakan dengan lebar secara penuh dan mempunyai pemecah baris sebelum dan sesudahnya.

Contoh untuk elemen block, yaitu : <h1>, <p>, <div>.

Center Aligning using the Margin Property

Penjelasan :

Elemen blok dapat dibariskan ditengah dengan pengaturan margin kiri dan kanan menggunakan auto.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

.center {

margin-left: auto;

margin-right: auto;

width: 70%;

background-color: #b0e0e6;

}

</style>

</head>

<body>

<p>Dewi Citra Kurnia. 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>

<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>

</body>

</html>

Hasil :

Left and Right Aligning Using the Position Property

Penjelasan :

Satu metode dari elemen aligning adalah menggunakan posisi absolute.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

.right {

position: absolute;

right: 0px;

width: 300px;

background-color: #b0e0c6;

}

</style>

</head>

<body>

<p>Dewi Citra Kurnia. 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>

</body>

</html>

Hasil :

Crossbrowser Compatibility Issues

Penjelasan :

Ketika elemen aligning sepert ini, itu adalah ide bagus untuk memperkenalkan margin dan padding untuk elemen <body>. Ini untuk menghindari perbedaan dalam browser yang berbeda.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

padding: 0;

}

.container {

position: relative;

width: 100%;

}

.right {

position: absolute;

right: 0px;

width: 300px;

background-color: #b0e0e6;

}

</style>

</head>

<body>

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

</div>

</body>

</html>

Hasil :

Left and Right Aligning Using th Float Property

Penjelasan :

Satu metode elemen aligning adalah menggunakan property float.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

.right {

float: right;

width: 300px;

background-color: #b0e0e6;

}

</style>

</head>

<body>

<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>

</body>

</html>

Hasil :

6. CSS Combinators

Penjelasan :

Selector CSS dapat berisi lebih dari satu selector simple. Diantara selector simple, kita dapat memasukkan sebuah kombinator. Ada empat kombinator berbeda dalam CSS, yaitu :

a. Descendant selector

b. Child selector

c. Adjacent sibling selector

d. General Sibling selector

Descendant Selector

Penjelasan :

Selector descendant mencocokkan semua elemen keturunan dari elemen tetap.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

div p {

background-color: violet;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div (Dewi Citra Kurnia).</p>

<p>Paragraph 2 in the div (Dewi Citra Kurnia).</p>

<span><p>Paragraph 3 in the div (Dewi Citra Kurnia).</p></span>

</div>

<p>Paragraph 4. Not in a div (Dewi Citra Kurnia).</p>

<p>Paragraph 5. Not in a div (Dewi Citra Kurnia).</p>

</body>

</html>

Hasil :

Child Selector

Penjelasan :

Selector child menampilkan semua elemen adalah anak-anak langsung dari elemen tetap.

Berikut contoh menampilkan semua elemen <p> adalah anak-anak langsung dari elemen <div>.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

div > p {

background-color: violet;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div (Dewi Citra Kurnia).</p>

<p>Paragraph 2 in the div (Dewi Citra Kurnia).</p>

<span><p>Paragraph 3 in the div (Dewi Citra Kurnia).</p></span>

</div>

<p>Paragraph 4. Not in a div (Dewi Citra Kurnia).</p>

<p>Paragraph 5. Not in a div (Dewi Citra Kurnia).</p>

</body>

</html>

Hasil :

Adjacent Sibling Selector

Penjelasan :

Selector adjacent sibling menampilkan semua elemen saudara yang berdekatan dari elemen tetap. Elemen saudara harus mempunyai kesamaan dengan elemen parent dan berdekatan, artinya mengikuti dengan segera.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

div + p {

background-color: violet;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div (Dewi Citra Kurnia).</p>

<p>Paragraph 2 in the div (Dewi Citra Kurnia).</p>

</div>

<p>Paragraph 3. Not in a div (Dewi Citra Kurnia).</p>

<p>Paragraph 4. Not in a div (Dewi Citra Kurnia).</p>

</body>

</html>

Hasil :

General Sibling Selector

Penjelasan :

Selector general sibling menampilkan semua elemen saudara-saudara dari elemen tetap.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

div ~ p {

background-color: violet;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div (Dewi Citra Kurnia).</p>

<p>Paragraph 2 in the div (Dewi Citra Kurnia).</p>

</div>

<p>Paragraph 3. Not in a div (Dewi Citra Kurnia).</p>

<p>Paragraph 4. Not in a div (Dewi Citra Kurnia).</p>

</body>

</html>

Hasil :

7. CSS Pseudo-Class

Penjelasan :

Pseudo class digunakan untuk mendefinisikan pernyataan khusus dari sebuah elemen.

Contohnya :

- Style sebuah elemen ketika pengguna mouse di atas link

- Style sebuah elemen link ketika dikunjungi dan belum dikunjungi secara berbeda.

Anchor Pseudo-Classes

Penjelasan :

Link dapat ditunjukkan dengan cara yang berbeda, yaitu :

- a: link – link, yang normal belum dikunjungi

- a: visited – link pengguna telah dikunjungi

- a: hover – link ketika pengguna mouse di atasnya

- a: active- link saat itu diklik

Script :

<!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>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>

Hasil :

Pseudo-Classes and CSS Classes

Penjelasan :

Pseudo class dapat dikombinasikan dengan CSS class. Ketika sedang mendekatkan kursor pada link, itu akan merubah warnanya.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

a.highlight:hover {

color: #ff0000;

}

</style>

</head>

<body>

<p><a class="highlight" href="css_syntax.html">CSS Syntax</a></p>

<p><a href="default.html">CSS Tutorial</a></p>

</body>

</html>

Hasil :

CSS – the first-child pseudo-class

Penjelasan :

Firsst-child pseudo-class mencocokkan sebuah elemen tetap adalah anak pertama dari elemen lain.

Match the first <p> element

Penjelasan :

Berikut contohnya, selector mencocokkan beberapa elemen <p> adalah anak pertama dari beberapa elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p:first-child {

color: blue;

}

</style>

</head>

<body>

<p>Dewi Citra Kurnia.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>

</html>

Hasil :

Match the first <i> element in all <p> elements

Penjelasan :

Berikut contohnya, selector mencocokkan elemen <i> pertama dalam semua elemen <p>.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p i:first-child {

color: blue;

}

</style>

</head>

<body>

<p>Dewi Citra Kurnia. I am a <i>strong</i> woman. I am a <i>strong</i> woman.</p>

<p>I am a <i>strong</i> woman. I am a <i>strong</i> woman.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>

</html>

Hasil :

Match all <i> element in all first child <p> elements

Penjelasan :

Berikut contohnya, selector mencocokkan semua elemen <i> dalam elemen <p> adalah anak pertama dari elemen yang lain.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p:first-child i {

color: blue;

}

</style>

</head>

<body>

<p>Dewi Citra Kurnia. I am a <i>strong</i> woman. I am a <i>strong</i> woman.</p>

<p>I am a <i>strong</i> woman. I am a <i>strong</i> woman.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>

</html>

Hasil :

8. CSS Pseudo-Element

Penjelasan :

CSS pseudo elemen digunakan untuk style bagian yang ditentukan dari sebuah elemen. Contohnya, itu dapat digunakan untuk style huruf pertama atau baris dari sebuah elemen dan menambah konten sebelum atau sesudah dari sebuah elemen.

The ::first-line Pseudo-element

Penjelasan :

The ::first-line Pseudo-element digunakan untuk menambah sebuah style khusus untuk baris pertama dari sebuah teks. The ::first-line Pseudo-element hanya bisa digunakan untuk elemen-elemen block.

Berikut property yang digunakan untuk The ::first-line Pseudo-element, yaitu :

- Properti font

- Properti color

- Properti background

- Word-spacing

- Letter-spacing

- Text-decoration

- Vertical-align

- Text-transform

- Line-height

- Clear

Script :

<!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>

Hasil :

The ::first-letter Pseudo-element

Penjelasan :

The ::first-letter Pseudo-element digunakan untuk menambah sebuah style khusus untuk huruf pertama dari sebuah teks. The ::first-huruf Pseudo-element hanya bisa digunakan untuk elemen-elemen block.

Berikut property yang digunakan untuk The ::first-letter Pseudo-element, yaitu :

- Properti font

- Properti color

- Properti background

- Properti margin

- Properti padding

- Properti border

- Text-decoration

- Vertical-align (hanya jika “float” adalah “none”)

- Text-transform

- Line-height

- Clear

- Float

Script :

<!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>

Hasil :

Pseudo-element and CSS Classes

Penjelasan :

Pseudo elemen dapat dikombinasikan dengan CSS class. Contoh di bawah ini akan menunjukkan huruf pertama dari sebuah paragraf dengan class=”intro”, dalam merah dan ukuran lebih luas.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p.intro::first-letter {

color: #ff0000;

font-size:200%;

}

</style>

</head>

<body>

<p class="intro">This is an introduction.</p>

<p>This is a paragraph with some text. A bit more text even.</p>

</body>

</html>

Hasil :

Multiple Pseudo-element

Penjelasan :

Beberapa elemen pseudo dapat juga dikombinasikan. Berikut contohnya, huruf pertama dari paragraf akan menjadi merah dalam ukuran huruf xx-large. Sisa dari baris pertama akan menjadi biru dan dalam huruf kecil. Sisa dari paragraf akan menjadi warna dan ukuran huruf default.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

p::first-letter {

color: #ff0000;

font-size: xx-large;

}

p::first-line {

color: #0000ff;

font-variant: small-caps;

}

</style>

</head>

<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>

</html>

Hasil :

CSS - The ::before Pseudo-element

Penjelasan :

CSS - The ::before Pseudo-element dapat digunakan untuk menambah beberapa konten sebelum konten dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

h1::before {

content: url([wallcoo.com]_015_4.jpg);

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The ::before pseudo-element inserts content before an element.</p>

<h1>This is a heading</h1>

<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>

</html>

Hasil :

CSS - The ::after Pseudo-element

Penjelasan :

CSS - The ::after Pseudo-element dapat digunakan untuk menambah beberapa konten setelah konten dari sebuah elemen.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

h1::after {

content: url([wallcoo.com]_015_4.jpg);

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The ::after pseudo-element inserts content after an element.</p>

<h1>This is a heading</h1>

<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>

</html>

Hasil :

CSS - The ::selection Pseudo-element

Penjelasan :

CSS - The ::selection Pseudo-element mencocokkan bagian dari sebuah elemen yang ditampilkan oleh pengguna. Berikut property CSS yang dapat digunakan untuk ::selection, yaitu : color, background, kursor dan outline.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

::-moz-selection { /* Code for Firefox */

color: red;

background: yellow;

}

::selection {

color: red;

background: yellow;

}

</style>

</head>

<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>

<div>This is some text in a div element.</div>

<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>

<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>

</body>

</html>

Hasil :

9. CSS Navigation Bar

Navigation Bar = List of Links

Penjelasan :

Navigation bar membutuhkan HTML standar sebagai dasar. Dalam contoh di bawah ini, kita akan membangun navigation bar dari daftar HTML standar. Navigation bar pada dasarnya adalah sebuah daftar dar link, jadi kegunaan elemen <ul> dan <li> membuat arti sempurna.

Script :

<!DOCTYPE html>

<html>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>

</html>

Hasil :

Vertical Navigation Bar

Penjelasan :

Untuk membangun vertical navigation bar kita hanya membutuhkan style elemen <a> .

Script :

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

a {

display: block;

width: 60px;

background-color: #ddeedd;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>A background color is added to the links to show the link area.</p>

<p>Notice that the whole link area is clickable, not just the text.</p>

</body>

</html>

Hasil :

Horizontal Navigation Bar

Penjelasan :

Ada dua cara untuk menciptakan horizontal navigation bar sengan menggunakan item daftar inline dan floating. Kedua metode tersebut bekerja dengan baik, tetapi jika kamu ingin link dengan ukuran yang sama, kamu harus menggunakan metode floating.

Inline List Item

Penjelasan :

Satu cara untuk membangun horizontal navigation bar adalah dengan menentukan elemen <li> sebagai inline.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li {

display: inline;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Hasil :

Floating List Item

Penjelasan :

Dalam contoh di atas, link mempunyai lebar yang berbeda. Untuk semua link yamg memiliki lebar yang sama, apungkan elemen <li> dan menentukkan lebar untuk elemen <a>.

Script :

<!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="#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.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

Hasil :

10. CSS Image Gallery

Penjelasan :

CSS dapat digunakan untuk menciptakan galeri gambar. Contoh dibawah ini, sebuah gambar dari galeri dapat diklik, dan akan menghasilkan suatu halaman baru yang berisikan apa yang ada dalam link yang dipilih dalam scriptnya.

Script :

<!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>

<div class="desc">Manajemen Informatika 1</div>

</div>

<div class="desc">Manajemen Informatika 1</div>

</div>

</body>

</html>

Hasil :

Hasil setelah klik pada gambar :

11. CSS Images Opacity

Penjelasan :

Menciptakan gambar transparan dengan CSS adalah sangat mudah. Properti CSS opacity adalah bagian dari rekomendasi CSS3.

Example 1 – Creating a Transparent Image

Penjelasan :

Properti CSS3 untuk transparansi adalah bersifat tidak tembus cahaya. Dalam contoh di bawah ini, saya akan menunjukkan bagaiman menciptakan sebuah gambar transparan menggunakan CSS.

Berikut gambar aslinya :

Script :

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.4;

filter: alpha(opacity=40); /* For IE8 and earlier */

}

</style>

</head>

<body>

<h1>Image Transparency</h1>

</body>

</html>

Hasil :

Example 2 – Imagr Transparency – Hover Effect

Penjelasan :

Gambar transparan dengan efek hover adalah jika pengguna mendekatkan atau meletakkan kursor pada gambar tersebut, gambar akan terlihat lebih jelas (gambar asli). Dan jika kursor tersebut dijauhkan dengan gambar tersebut, maka gambar akan terlihat transparan lagi.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.4;

filter: alpha(opacity=40); /* For IE8 and earlier */

}

img:hover {

opacity: 1.0;

filter: alpha(opacity=100); /* For IE8 and earlier */

}

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>

</html>

Hasil :

Hasil jika kursor diletakkan pada gambar tersebut :

Example 3 – Text in Transparent Box

Penjelasan :

Dalam contoh 3 ini, kita dapat menciptakan teks dalam kotak transparan didalam sebuah gambar dengan cara : pertama, kita meciptakan elemen <div> (class =”background”) dengan gambar latar belakang dan sebuah border. kemudian kita menciptakan elemen <div> lain (class =”transbox”) didalam elemen <div> pertama. Elemen <div class =”transbox”> mempunyai sebuah warna latar belakang dan sebuah border – div adalah transparan. Didalam transparan <div>, kita menambahkan beberapa teks didalam elemen <p>.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

div.background

{

background: url([wallcoo.com]_015_4.jpg) repeat;

border: 2px solid black;

}

div.transbox

{

margin: 30px;

background-color: #ffffff;

border: 1px solid black;

opacity:0.6;

filter:alpha(opacity=60); /* For IE8 and earlier */

}

div.transbox p

{

margin: 5%;

font-weight: bold;

color: #000000;

}

</style>

</head>

<p>Ini adalah teks yang diletakkan pada kotak transparan.</p>

</div>

</body>

</html>

Hasil :

12. CSS Image Sprites

Penjelasan :

Image sprite adalah sebuah koleksi gambar yang meletakkan dalam gambar single. Sebuah halaman web dengan beberapa gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan beberapa permintaan. Menggunakan image sprite akan mengurangi nomor dari beberapa permintaan dan mengamankan bandwidth.

Image Sprites – Simple Example

Penjelasan :

Daripada menggunakan tiga gambar pemisah, kita menggunakan gambar single. Dengan CSS, kita hanya dapat menunjukkan bagian dari gambar yang kita butuhkan.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

#home {

width: 46px;

height: 44px;

background: url(twitter.ico) 0 0;

}

#next {

width: 43px;

height: 44px;

background: url(twitter.ico) -91px 0;

}

</style>

</head>

<body>

</body>

</html>

Hasil :

Image Sprites – Create a navigation List

Penjelasan :

Dalam hal ini, kita ingin menggunakan gambar sprite untuk menciptakan sebuah daftar navigasi.

Script :

<!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('facebook.ico') 0 0;

}

#prev {

left: 63px;

width: 43px;

background: url(''facebook.ico') -47px 0;

}

#next {

left: 129px;

width: 43px;

background: url(''facebook.ico') -91px 0;

}

</style>

</head>

<body>

</ul>

</body>

</html>

Hasil :

Hasil jika klik pada gambar tersebut :

Image Sprites – Hover Effect

Penjelasan :

Dalam image sprite, kita dapat menambahkan efek hover untuk daftar navigasi. Selector hover digunakan untuk menampilkan elemen-elemen ketika mouse di atasnya. Selector hover digunakan pada semua elemen, tidak hanya pada link.

Script :

<!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('facebook.ico') -91px 0;

}

#home a:hover {

background: url('facebook.ico') 0 -45px;

}

#prev a:hover {

background: url('facebook.ico') -47px -45px;

}

#next a:hover {

background: url('facebook.ico') -91px -45px;

}

</style>

</head>

<body>

</ul>

</body>

</html>

Hasil :

Hasil jika klik pada gambar tersebut :

13. CSS Media Types

Penjelasan :

Jenis media yang memungkinkan Anda untuk menentukan bagaimana dokumen akan disajikan dalam media yang berbeda. Dokumen dapat ditampilkan berbeda pada layar, di atas kertas, dengan browser aural, dll.

Media Types

Beberapa properti CSS hanya dirancang untuk media tertentu. Sebagai contoh “voice-family” properti dirancang untuk agen pengguna aural. Beberapa sifat lainnya dapat digunakan untuk jenis media yang berbeda. Misalnya, “font-size” properti bisa digunakan untuk kedua layar dan media cetak, tapi mungkin dengan nilai yang berbeda. Sebuah dokumen biasanya membutuhkan lebih besar font-size di layar daripada di atas kertas, dan sans-serif font yang mudah dibaca di layar, sementara serif font yang mudah dibaca di atas kertas.

The @media Rule

Aturan media memungkinkan aturan style yang berbeda untuk media yang berbeda dalam style sheet yang sama.

Gaya dalam contoh di bawah ini memberitahu browser untuk menampilkan 14 piksel font Verdana di layar. Tetapi jika halaman dicetak, maka akan dalam font 20 Times, piksel dan teks berwarna merah. Perhatikan bahwa font-weight diatur untuk berani, baik di layar dan di atas kertas.

Jenis media lain :

Script :

<!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>

Hasil :

14. CSS Attr Selector

CSS [attribte] selector

Penjelasan :

CSS [attribte] selector digunakan untuk menampilkan elemen dengan atribut tetap.

Script :

<!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="../index.html">w3schools.com</a>

<a href="http://www.disney.com/" target="_blank">disney.com</a>

<a href="http://www.wikipedia.org/" target="_top">wikipedia.org</a>

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

</body>

</html>

Hasil :

CSS [attribte=value] selector

Penjelasan :

CSS [attribte=value] selector digunakan untuk menampilkan elemen dengan atribut tetap dan nilai.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

a[target=_blank] {

background-color: violet;

}

</style>

</head>

<body>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="../index.html">w3schools.com</a>

<a href="http://www.disney.com/" target="_blank">disney.com</a>

<a href="http://www.wikipedia.org/" target="_top">wikipedia.org</a>

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

</body>

</html>

Hasil :

CSS [attribte~=value] selector

Penjelasan :

CSS [attribte~=value] selector digunakan untuk menampilkan elemen dengan nilai elemen yang memuat kata-kata tetap.

Script :

<!DOCTYPE html>

<html>

<head>

<style>

[title~=akun] {

border: 5px solid yellow;

}

</style>

</head>

<body>

<p>All images with the title attribute containing the word "flower" get a yellow border.</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>

Hasil :

CSS [attribte|=value] selector

Penjelasan :

CSS [attribte|=value] selector digunakan untuk menampilkan elemen dengan awalan atribut tetap dengan nilai tetap juga.

Script :

<!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>

Hasil :

CSS [attribte^=value] selector

Penjelasan :

CSS [attribte^=value] selector digunakan untuk menampilkan elemen dimana nilai atribut memulai dengan nilai tetap.

Script :

<!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>

Firstname:<input type="text" name="Name" value="Dewi Citra" size="20">

Lastname:<input type="text" name="Name" value="Kurnia" size="20">

</form>

</body>

</html>

Hasil :

Sabtu, 23 April 2016

CSS TUTORIALS PART 2