Pertemuan 13

Kode Dasar CSS
Pada bagian ini yang dipelajari adalah properi-properti css yang paling sering
digunakan dalam merubah tampilan halaman website.
Color
Konsep pewarnaan ini sama dengan materi pertemuan 6, silahkan buka materi
pertemuan 6. Perbedaanya adalah penggunaan warna di sini menggunakan sitaks css
bukan dengan elemen dan atribut html.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</body>
</html>
Contoh 2 :
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Contoh 3 :
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71,
0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%,
0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using
RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color
values.</p>
</body>
</html>
Background (Warna)
Background dalam css berguna untuk memberikan efek latar belakang pada elemen
html. Anda dapat menambahkan backround gambar atau warna kedalam elemen
html. Perlu diingat bahwa kode ini bekerja apabila elemen tersebut memiliki tinggi
dan lebar.
Kode 1 : Background-color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Contoh 2 :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>

<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Contoh 3 : opacity
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Boxes</h1>
<p>When using the opacity property to add transparency to the background of

an element, all of its child elements become transparent as well. This can
make the text inside a fully transparent element hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
</div>
<div class="third">
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
Contoh 4 :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
}
div.third {
}
</style>
</head>
<body>
<h1>Transparent Boxes 2</h1>
<p>Result with opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
</div>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>Result with rgba():</p>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div>
<h1>default</h1>
</div>
<p>Notice how the text gets transparent as well as the background color
when using the opacity property.</p>
</body>
</html>
Background (Gambar)
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<p>This page has an image as the background!</p>
</body>
</html>
Contoh 2 : kombinasi yang buruk antara gambar dan tulisan

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
Contoh 3 : background ke elemen lain

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<p>This paragraph has an image as the background!</p>
</body>
</html>

Pertemuan 13

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 13

Diunggah oleh

Hak Cipta:

Format Tersedia

Kode Dasar CSS

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<p>This page has a light blue background color!</p>

<h1>CSS background-color example!</h1>

<p>When using the opacity property to add transparency to the background of

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<p>Result with rgba():</p>

<p>This page has an image as the background!</p>

Contoh 2 : kombinasi yang buruk antara gambar dan tulisan

Contoh 3 : background ke elemen lain

<p>This paragraph has an image as the background!</p>

Anda mungkin juga menyukai