Ardy Putra Utama (CSS)

Examples in Each Chapter
Input:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>
</body>
</html>
Output :
Analisa : Di css bisa diubah background, font, dan lain lain
CSS Syntax
Input:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Output :
Analisa : aturan dalam memakai css adalah dengan p{}
CSS Comments
Input:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Output :
Analisa : CSS juga bisa menggunakan komentar dan tidak akan ditampilkan.
The CSS element Selector

Input:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output :
Analisa : menggunakan p{} maka paragraf selanjutnya memakai aturan tersebut
The CSS id Selector

Input:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output :
Analisa : dengan menggunakan #para1 maka akan langsung spesifik dan yang lainnya tidak terpengaruh
The CSS class Selector

Input:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Output :
Analisa : Dengan menggunakan <h1> dan <p> dengan menulis class maka akan mengikuti aturannya
Input:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Output :
Analisa : dengan memakai p.center maka header tidak mengikuti aturan

Input:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Output :
Analisa : dengan menambahkan p.large kita bisa mengatur syntax nya menjadi besar
The CSS Universal Selector

Input:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>

<p>And me!</p>
</body>
</html>
Output :
Analisa : Dengan * {} maka syntax berlaku pada semua element
The CSS Grouping Selector

Input:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
</body>
</html>
Output :
Analisa : dengan memilih kode yang diinginkan , maka akan mengikuti syntax yang diinginkan
CSS HOW-TO
External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"

href="mystyle.css">
</head>
<body>
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
Analisis: Dengan external style sheet, Anda dapat mengubah tampilan seluruh situs web dengan
mengubah hanya satu file. Setiap halaman HTML harus menyertakan referensi ke file style sheet
eksternal di dalam elemen <link>, di dalam bagian kepala HTML. Gaya eksternal ditentukan dalam
elemen <link>, di dalam bagian <head> dari halaman HTML:
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
h1 {
color: maroon;
margin-left: 40px;
</style>
</head>
<body>
<h1>Ini Adalah Heading</h1>
</body>
</html>
Analisis: Internal style sheet dapat digunakan jika satu halaman HTML tunggal memiliki gaya yang unik.
Gaya internal didefinisikan di dalam elemen <style>, di dalam bagian kepala dari halaman HTML:
Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Ini Adalah Heading</h1>
<p style="color:red;">Ini adalah paragraf.</p>
</body>
</html>
Analisis: Gaya inline dapat digunakan untuk menerapkan gaya unik untuk elemen tunggal. Untuk
menggunakan gaya inline, tambahkan atribut gaya ke elemen yang relevan. Atribut style dapat berisi
properti CSS apa pun.
Multiple Style Sheets
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
</style>
</head>
<body>
</body>
</html>
Analisis: Jika beberapa properti telah ditentukan untuk elemen yang sama di style sheet yang berbeda,
nilai dari sheet style read terakhir akan digunakan.
Cascading Order
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
</body>
</html>
Analisis; Jika ada lebih dari satu gaya yang digunakan, maka page akan memproritaskan gaya inline
terlebih dahulu. Lalu gaya eksternal dan internal, dan yang terakhir gaya default browser.
CSS COLORS
CSS Color Names

CSS Color Names
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-
color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Analisis: Dalam CSS, warna dapat ditentukan dengan menggunakan nama warna. Nama warna yang bisa
digunakan yaitu merah tomat, jingga, biru muda, hijau laut, abu-abu, biru, violet, dan abu-abu muda.
CSS Background Color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
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.
</p>
</body>
</html>
Analisis: Anda dapat mengatur warna latar belakang untuk elemen HTML. Warna yang digunakan bisa
menggunakan nama warna langsung.
CSS Text Color
<!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>
Analisis: Anda dapat mengatur warna. Warna yang digunakan bisa menggunakan nama warna langsung.
CSS Border Color
<!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>
Analisis: Anda dapat mengatur warna border. Warna yang digunakan bisa menggunakan nama warna
langsung.
CSS Color Values
<!DOCTYPE html>
<html>
<body>
<p>Warna ini sama seperti warna "merah tomat":</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>Warna ini sama seperti warna "merah tomat", tapi 50% transparan:</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>
</body>
</html>
Analisis: Dalam CSS, warna juga dapat ditentukan menggunakan nilai RGB (red green blue), nilai HEX
(#rrggbb), nilai HSL (hue, saturation, lightness), nilai RGBA(RGB + Alpha), dan nilai HSLA (HSL +
Alpha). Hasil yang dikeluarkan bisa juga sama dengan nama warna.
CSS BACKGROUNDS
<!DOCTYPE html>
<html>
<head>
<style>
body {
</style>
</head>
<body>
<p>This page has a light blue background color!</p>
</body>
</html>
 PERINTAH INI BERTUJUAN UNTUK MEMBERIKAN WARNA PADA

BACKGROUND. KITA DAPAT MEMILIH WARNA DASAR DENGAN
MENULISKANN NAMA WARNA, HEX, ATAU RGBNYA.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: pink;
}
div {
}
p {
background-color: purple;
}
</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>
 PERINTAH INI BERTUJUAN UNTUK MEMBERIKAN WARNA YANG BERBEDA

PADA BACKGROUND ELEMEN <h1>, <p>, DAN <div> KITA DAPAT MEMILIH
WARNA DASAR DENGAN MENULISKANN NAMA WARNA, HEX, ATAU
RGBNYA.
<!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>
 PERINTAH INI BERTUJUAN UNTUK MENGGUNAK IMAGE/GAMBAR SEBAGAI

BACKGROUND.
<!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>
 PERINTAH INI BERTUJUAN UNTUK MENGGUNAK IMAGE/GAMBAR SEBAGAI

BACKGROUND. NAMUN DENGAN PEMILIHAN IMAGE YANG SEPERTI INI,
TULISAN AKAN SULIT DIBACA.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<p>Strange background image...</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the
reader!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the
text.</p>
<p>In this example we have also added a margin on the right side, so the
background image will never disturb the text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image

should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the

browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

 PERINTAH INI BERTUJUAN AGAR GAMBAR/BACKGROUND DAPAT IKUT
BERGERAK SAAT KITA MEN- SCROLL KEBAWAH. JADI
GAMBAR/BACKGROUND AKAN BERUBAH DARI POSISI AWALNYA/AKAN
TERUS BERGERAK.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should

scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the

 PERINTAH INI BERTUJUAN AGAR GAMBAR/BACKGROUND TIDAK IKUT
<!DOCTYPE BERGERAK
html> SAAT KITA MEN- SCROLL KEBAWAH. JADI
<html> GAMBAR/BACKGROUND AKAN TETAP BERADA DIPOSISINYA.
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the

background properties in one declaration.</p>
CSS Borders
CSS Border Style
Input:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Output :
Analisa : dengan bermacam macam jenis border, kita bisa memakainya dengan memanggil border
tersebut
CSS Margins
Margin - Individual Sides
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px,
and a left margin of 80px.</div>
</body>
</html>
Output :
Analisa : kita juga bisa mengatur margin sesuai dengan apa yang kita inginkan
Margin - Shorthand Property
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 4 values</h2>
<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a
left margin of 100px.</div>
<hr>
</body>
</html>
Output :
Analisa : kita juga bisa mengatur bottom margin sesuai apa yang kita inputkan
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px 50px 75px;
}
</style>
</head>
<body>
<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of
75px.</div>
<hr>
</body>
</html>
Output :
Analisa : ini adalah contoh mengatur margin hanya dengan 3 values
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px 50px;
}
</style>
</head>
<body>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
Output :
Analisa : contoh margin hanya dengan 2 values
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right margin of 25px.</div>
<hr>
</body>
</html>
Output :
Analisa : Ini adalah contoh margins dengan 1 values
The auto Value

Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Use of margin:auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The
element will then take up the specified width, and the remaining space will be split equally between the
left and right margins:</p>
<div>
This div will be horizontally centered because it has margin: auto;
</div>
</body>
</html>
Output :
Analisa : Kita juga bisa mengatur ukuran margin dengan ukuran auto
The inherit Value

Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>

<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>
Output :
Analisa : kita bisa memakai inherit value agar otomatis menjadi left margin
Margin Collapse
Input:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of
20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due
to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
Output :
Analisa : dengan mengatur margins, margins bisa dibawah paragraf

CSS Padding
CSS Padding
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div>This element has a padding of 70px.</div>
</body>
</html>
Output :
Analisa : CSS juga bisa menginput padding dengan ukuran ynag ditentukan
Padding - Individual Sides

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right

padding of 30px, a bottom padding of 50px, and a left
padding of 80px.</div>
</body>
</html>
Output :
Analisa : kita juga mengatur padding dengan 4 values
Padding - Shorthand Property

Input :
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>

padding of 50px, a bottom padding of 75px, and a left
</body>
</html>
Output :
Analisa : ini adalah contoh padding dengan 4 values
Input :
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px 50px 75px;
}
</style>
</head>
<body>

and left padding of 50px, and a bottom padding of
75px.</div>
</body>
</html>
Output :
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px 50px;
}
</style>
</head>
<body>
<div>This div element has a top and bottom padding of 25px,

and a right and left padding of 50px.</div>
</body>
</html>
Output :
Shorthand property (1 value)

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right

</body>
</html>
Output :
Padding and Element Width

Input :
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>

<br>
<div class="ex2">The width of this div is 350px, even

though it is defined as 300px in the CSS.</div>
</body>
</html>
Output :
Analisa :
Kita bisa menggunnakan padding dengan element width
Input :
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>

<br>
<div class="ex2">The width of this div remains at 300px, in

spite of the 50px of total left and right padding, because
of the box-sizing: border-box property.
</div>
</body>
</html>
Output :
CSS Height and Width

CSS height/width Examples
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 200px and a width of 50%:</p>
<div></div>
</body>
</html>
Output :
Analisa : kita juga bisa mengatur warna dan ukuran di CSS

Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<p>This div element has a height of 100px and a width of 500px:</p>
<div></div>
</body>
</html>
Output :
Setting max-width
Input:
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>

<p>This div element has a height of 100px and a max-width of 500px:</p>
<div></div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Output :
Analisa : kita juga bisa mengatur width sampai max yang kita tentukan
CSS Box Model

The CSS Box Model
Input :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps

around every HTML element. It consists of: borders,
padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a

50px padding, 20px margin and a 15px green border. 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>
Output :
Analisa :
Pada CSS Box Model, konsep dimana setiap element yang terdapat pada halaman web
diproses sebagai kotak (box). Masing-masing HTML ini terdiri dari 4 lapisan, yaitu
konten (isi), padding, border, dan margin. Keempat lapisan inilah yang membangun
CSS Box Model.
Width and Height of an Element

Input :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img
src="file:///C:/Users/NURHIDAYAH/Downloads/download.jpg"
width="350" height="263" alt="mawar">
<div>The picture above is 350px wide. The total width of
this element is also 350px.</div>
</body>
</html>
Output :
Analisa :
Fungsi width and heigith pada CSS Box Model adalah untuk mengatur lebar dan tinggi
area konten.
CSS Outline
CSS Outline
 Listing program
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:green;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>PENS ialah </h2>
<p class="dotted">Politeknik Elektronika Negeri

Surabaya</p>
<p class="dashed">Politeknik Elektronika Negeri

Surabaya</p>
<p class="solid">Politeknik Elektronika Negeri

Surabaya</p>
<p class="double">Politeknik Elektronika Negeri

Surabaya</p>
<p class="groove">Politeknik Elektronika Negeri

Output :
Analisa
Untuk menentukan pola bingkai yang diinginkan input <p class =”(pola yang diinginkan)
CSS Outline Style

CSS Outline Color
Input :
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
outline-style: solid;
outline-color: red;
p.ex2 {
outline-style: double;
Output :
Analisa :
Untuk memberikan warna maka input p.ex { , lalu bagian apa yang akan diberi warna: (pilihan warna).
Input :
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid yellow;
outline-color: invert;
</style>
</head>
<body>
<h2>PENS adalah</h2>
<p class="ex1">Politeknik Elektronika Negeri Surabaya</p>
</body>
</html>
Output :
Analisa :
Untuk memberikan warna maka input p.ex { , lalu bagian apa yang akan diberi warna: (pilihan warna).
Input :
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
outline-color: invert;
</style>
</head>
<body>
<h2>Using outline-color:invert</h2>
<p class="ex1">A solid invert outline.</p>
</body>
</html>
Output :
Analisa :
Warna juga bisa didalam kotak
CSS Outline Width

Input:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
outline-color: red;
outline-width: thin;
p.ex2 {
outline-color: red;
outline-width: medium;
}
p.ex3 {
outline-color: red;
outline-width: thick;
p.ex4 {
outline-color: red;
outline-width: 4px;
}</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>
</body>
</html>
Output :
Analisa : Outline juga bisa diatur ketebalan nya
CSS Outline - Shorthand property

Input:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h2>The outline Property</h2>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>

</body>
</html>
Output :
Analisa : Outline juga bisa diatur warna dan pola
CSS Outline Offset

Input:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 30px;
outline: 1px solid red;
outline-offset: 15px;
</style>
</head>
<body>
<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>
</body>
</html>
Output :
Analisa : outline juga bisa diatur offset
Input:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 30px;
background:yellow;
outline: 1px solid red;
outline-offset: 15px;
</style>
</head>
<body>
<h2>The outline-offset Property</h2>

<p>This paragraph has an outline of 15px outside the border edge.</p>
</body>
</html>
Output :
Analisa : kita juga bisa mengatur warna didalam outline
CSS Align Elements

Code
<!DOCTYPE html>
<html>
<head>
<style>
.center{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>

<p>To Horizontally center a block
elements (like div), use margin: auto;
</p>
<div class="center">
<p><b>Note: </b>Using margin: auto
will not work in IE8, unless a
!DOCTYPE is declared.</p>
</div>
</body>
</html>
Output
Penjelasan
Untuk merapikan element berada di tengah
CSS Align Text

Code
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<p>This text is centered.</p>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat teks ditengah.
CSS Align Center Image
Code
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="C:\Users\ASUS\Desktop\paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
Output
Penjelasan
Untuk membuat gambar berada di tengah.
CSS Left & Right Position
Code
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<p>An example of how to right align elements with the position property:</p>
<div class="right">
<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>
</div>
</body>
</html>
Output
Penjelasan
Untuk memosisikan div elemen di kanan atau kiri
CSS Left & Right Float
Code
!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<p>An example of how to right align elements with the float property:</p>
<div class="right">
<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>
</div>
</body>
</html>
Output
Penjelasan
Untuk memosisikan div elemen di kanan/kiri dengan float
CSS The clearfix hack
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image is taller than the element containing it, and it is floated, so it
overflows outside of its container:</p>
<div>
<img class="img1" src="C:\Users\ASUS\Desktop\paris.jpg" alt="Paris" width="170" height="170">
Disamping ini adalah gambar dari Paris. Paris terletak di Perancis, dan merupakan sebuah kota yang
indah.
</div>
<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this
problem:</p>
<div class="clearfix">
<img class="img2" src="C:\Users\ASUS\Desktop\paris.jpg" alt="Paris" width="170" height="170">
Disamping ini adalah gambar dari Paris. Paris terletak di Perancis, dan merupakan sebuah kota yang
indah.
</div>
</body>
</html>
Output
Penjelasan
Untuk memperbaiki elemen yang melebihi dari yang ditentukan.
CSS Center Vertically Padding
Code
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
}
</style>
</head>
<body>
<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>
<p>I am vertically centered.</p>
</div>
</body>
</html>
Output
Penjelasan
Untuk memosisikan di tengah dengan padding
CSS Center Vertically dengan Line Height
Code
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property
to center the div element:</p>
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Output
Penjelasan
Memosisikan div elemen dengan ketinggian garis.
CSS Center Vertically using Transform&Position
Code
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use positioning and the transform property to vertically and horizontally
center the div element:</p>
<p>I am vertically and horizontally centered.</p>
</div>
<p>Note: The transform property is not supported in IE8 and earlier versions.</p>
</body>
</html>
Output
Penjelasan
Memosisikan div elemen dengan mentransformasikannya secara horizontal dan vertical
CSS Box Model
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px
green border. 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>
Output
Penjelasan
Pada CSS Box Model, konsep dimana setiap element yang terdapat pada halaman web
diproses sebagai kotak (box). Masing-masing HTML ini terdiri dari 4 lapisan, yaitu konten
(isi), padding, border, dan margin. Keempat lapisan inilah yang membangun CSS Box
Model.
CSS Box Model Width & Height of an Element
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="file:///C:/Users/NURHIDAYAH/Downloads/download.jpg" width="350"

height="263" alt="mawar">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
Output
Penjelasan
Fungsi width and heigith pada CSS Box Model adalah untuk mengatur lebar dan tinggi area
konten.
CSS Basic Dropdown
Code
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Output
Penjelasan
Membuat basic dropdown yang akan muncul apabila suatu kalimat yang sudah ditentukan
ditunjuk oleh kursor.
CSS Dropdown Menu

Code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
Output
Penjelasan
Membuat menu dropdown yang memiliki beberapa pilihan.
CSS Right-aligned Dropdown content.
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
z-index: 1;
}
color: black;
padding: 12px 16px;
display: block;
}
Code
.dropdown-content a:hover {background-color: #f1f1f1;}
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Aligned Dropdown Content</h2>

<p>Determine whether the dropdown content should go from left to
right or right to left with the left and right properties.</p>
<div class="dropdown" style="float:left;">

<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
</div>
</div>
<div class="dropdown" style="float:right;">

<button class="dropbtn">Right</button>
</div>
</div>
</body>
</html>
Output
Penjelasan
Membuat menu dropdown dengan alinea kanan/kiri.
CSS Dropdown Image
Code
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>
<div class="dropdown">
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Beautiful Cinque Terre</div>
</div>
</div>
</body>
</html>
Output
Penjelasan
Membuat dropdown pada gambar dan memunculkan gambar.
CSS Dropdown Navigation Bar
Code
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn {

background-color: red;
}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Output
Penjelasan
Membuat dropdown pada navigation bar
CSS Float Right
Code
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the
paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-

left:15px;">
Pineapple pen</p>
</body>
</html>
Output
Penjelasan
Untuk melayangkan elemen di kanan
CSS Float Left
Code
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>In this example, the image will float to the left in the paragraph, and the text in the
paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-
right:15px;">
Apple pen.</p>
</body>
</html>
Output
Penjelasan
Untuk melayangkan elemen di kiri
CSS No float
Code
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<p>In this example, the image will be displayed just where it occurs in the text (float: none;).</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;">

Booooom.</p>
</body>
</html>
Output
Penjelasan
Untuk tidak melayangkan gambar.
CSS The Clear Property
Code
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
}
.div2 {
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
}
.div4 {
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to
the left, the text in div2 flows around div1.</div>
<br><br>
<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left"
clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>
Output
Penjelasan
Untuk memberikan kejelasan agar 2 div elemen tidak bertabrakan
CSS Float The clearfix hack
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum...
</div>
<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this
problem:</p>
interdum...
</div>
</body>
</html>
Output
Penjelasan
Untuk memperbaiki gambar yang melayangnya tidak beraturan menjadi teratur.
CSS Float with/without clearfix
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 5px;
}
.img1 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<div>
<h2>Without Clearfix</h2>
interdum...
</div>
<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>
<h2>With Clearfix</h2>
interdum...
</div>
</body>
</html>
Output
Penjelasan
Menjelaskan perbedaan apabila div elemen yang melayang tidak diperbaiki
CSS Float Grid Boxes
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>
<div class="box" style="background-color:#bbb">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ccc">
</div>
<div class="box" style="background-color:#ddd">
</div>
</div>
<p>Note that we also use the clearfix hack to take care of the layout flow, and that add the box-
sizing property to make sure that the box doesn't break due to extra padding. Try to remove this
code to see the effect.</p>
</body>
</html>
Output
Penjelasan
Untuk membuat kotak dengan grid
CSS Float Image Side by Side
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>

<p>Float images side by side:</p>
<div class="img-container">
<img src="img_5terre.jpg" alt="Italy" style="width:100%">
</div>
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
<p>Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-
sizing property to make sure that the image container doesn't break due to extra padding. Try to
remove this code to see the effect.</p>
</body>
</html>
Output
Penjelasan
Untuk menampilkan gambar yang melayang dan gambarnya terletak disamping gambar lainnya.
CSS Float Equal Height Boxes
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
}
.box {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Equal Height Boxes</h2>
<p>Floating boxes with equal heights:</p>
<div class="box" style="background-color:#bbb">
<h2>Box 1</h2>
<p>Some content, some content, some content</p>
</div>
<div class="box" style="background-color:#ccc">
<h2>Box 2</h2>
</div>
</div>
<p>This example not very flexible. It is ok to use CSS height if you can guarantee that the boxes will
always have the same amount of content in them, but that's not always the case. If you try the
example above on a mobile phone (or resize the browser window), you will see that the second
box's content will be displayed outside of the box.</p>
<p>Go back to the tutorial and find another solution, if this is not what you want.</p>
</body>
</html>
Output
Penjelasan
Untuk membuat dua kotak dengan tinggi yang sama dan menempel
CSS Float Flexbox
Code
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div class="box">Box 1 - This is some text to make sure that the content gets really tall. This is some
text to make sure that the content gets really tall.</div>
<div class="box">Box 2 - My height will follow Box 1.</div>
</div>
<p>Try to resize the browser window to see the flexible layout.</p>

<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
Output
Penjelasan
Untuk membuat kotak yang fleksibel
CSS Float Navigation Menu
Code
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
}
.active {
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">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>
</body>
</html>
Output
Penjelasan
Untuk membuat menu navigasi
CSS Float
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="column content">

<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>
<p>You will learn more about web layout and responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat contoh layout tampilan web
CSS Font Family

Code
<!DOCTYPE html>
<html>
<head>
<style>
Output
Penjelasan
Untuk menuliskan font dapat menggunakan font-family dengan memberi tipe font yang diinginkan.lalu
diberikan keterangan “class” / “sansseriff” untuk ditampilkan dalam bentuk paragraph.
CSS Font Style
Code
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
p.italic {
font-style: italic;
p.oblique {
font-style: oblique;
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Output
Penjelasan
Untuk bentuk tipe penulisan dapat menggunakan font-style dengan memberi tipe font yang diinginkan tidak
lupa diberi class . Sehingga pada penulisan di tags paragraf kita dapat menuliskan tipe font yang ditulis
sebelumnya,
CSS Set Font Size with Pixels
Code
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
h2 {
font-size: 30px;
p{
font-size: 14px;
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is another paragraph.</p>

Output
</body>
</html>
Penjelasan
Dalam css kita dapat menggunakan pixels untuk ukuran, dengan menggunakan font size lalu diberi dengan
ukuran pixel yang ingin ditampilkan penulisan dengan menuliskan huruf p untuk paragraph atau h untuk
heading kemudian diberi {} untuk menampilkan tulisan . Urutan penulisan perlu diperhatikan jika
menggunakan lebih dari 1.
CSS Set fonts with Em

Code
<!DOCTYPE html>
<html>
<head>
<style>
Output
Penjelasan
Selain menggunakan pixel kita dapat menggunakan em. Em adalah bentuk pixel yang di re-size sehingga lebih
kecil untuk penulisan karena em = pixels/16. Penulisan syntax sama seperti sebelumnya yaitu menggunakan
p/h lalu diberi {} dan font size.
CSS Font using combination percent and Em

Code
<!DOCTYPE html>
<html>
<head>
<style>
Output
Penjelasan
Kita juga dapat menggunakan persentase untuk format penulisan yang digunakan dapat menggunakan h
untuk heading , p untuk tulisan paragraph dan h untuk heading lalu {} dengan font-size dan ukuran persentase
nya.
CSS Font Weight

Code
<!DOCTYPE html>
<html>
<head>
<style>
Output
Penjelasan
Kita dapat menggunakan weight dimana tampilan seperti tebal atau tipisnya suatu tulisan. Untuk penulisan
syntax karena paragraph maka p lalu diberi keterangan seperti thick,light dsb kemudian pada isi {} diberi font-
weight dengan keterangan sesuai pada keterangan setelah p.
CSS Responsive Font Sizes
Code
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see

how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the

text. 10vw will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport

width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
Output
Penjelasan
Penggunaan vw atau viewport width adalah untuk menampilkan text sesuai ukuran tampilan pada windows
namun tampilan tidak berubah saat skala kita rubah berbeda dengan tulisan yang lain karena penulisan sudah
disesuaikan semisal 10% dari tampilan windows. Untuk syntax menggunakann font-size seperti sebelum-
sebelumnya.
CSS Font Variant
Code
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
p.small {
font-variant: small-caps;
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
Output </body>
</html>
Penjelasan
Untuk font variant tujuannya adalah menampilkan tulisan dengan tipe font yang diinginkan . Dalam hal ini ,
apabila kita memberi tipe font – caps maka tulisan yang awalnya huruf kecil menjadi huruf balok/besar. Untuk
syntax penulisan mengguanakn font-variant : lalu diberi keterangan font yang diinginkan seperti penulisan
font weight.
CSS Awesome Icons
Code
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

</head>
<body>
<p>Some Font Awesome icons:</p>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<p>Styled Font Awesome icons (size and color):</p>

<i class="fas fa-laptop" style="font-size:24px;color:yellow"></i>
<i class="fas fa-cloud" style="font-size:36px;color:green"></i>
<i class="fas fa-cat" style="font-size:48px;color:red;"></i>
<i class="fas fa-baby" style="font-size:60px;color:blue;"></i>
</body>
</html>
Output
Penjelasan
Untuk menampilkan ikon
CSS Bootstrap Icon
Code
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">
<p>Some Bootstrap icons:</p>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>
Output <p>Styled Bootstrap icons (size and color):</p>

<i class="glyphicon glyphicon-glass" style="font-size:24px;color:green"></i>
<i class="glyphicon glyphicon-lamp" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-phone" style="font-size:60px;color:blue;"></i>
</body>
</html>
Penjelasan
Untuk menampilkan ikon dari Bootstrap
CSS Google Icons

Code
<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size and color):</p>

<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">laptop</i>
<i class="material-icons" style="font-size:60px;color:blue;">watch</i>
</body>
</html>
Output
Penjelasan
Untuk menampilkan ikon dari google.
CSS Syling Links
Code
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</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>
Output
Penjelasan
link untuk unvisited, :visited efek untuk setelah diklik, :hover ketika mouse di atas link,
:active ketika mouse mengklik.
CSS Links
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>

link</a></b></p>
</body>
</html>
Code
Output
Penjelasan
gunakan tag a pada style untuk menambah efek pada link
CSS Link Text Decoration

Code
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
}
a:visited {
}
a:hover {
text-decoration: underline;
}
a:active {
}
</style>
</head>
<body>

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>
Output
Penjelasan
urutannya adalah :link, :visited, :hover, :active
CSS Bacgorund Color
Code
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>

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>
Output
Penjelasan
mengatur warna background link dengan atribut background-color pada tag a.
CSS Advance Link Buttons
Code
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
}
a:hover, a:active {
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
Output
Penjelasan
kita bisa menampilkan link seperti tombol dengan css
Override The Default Display Value
Listing Program
<!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="/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>
</body>
</html>
Output
Penjelasan
Untuk menampilkan navigasi menu secara horizontal
Block
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>Kalimat setelah ini akan ber-</span> <span>pindah tempat</span>
</body>
</html>
Output
Penjelasan
<span> digunakan untuk memindahkan kalimat menjadi dibawahnya.
Display : none
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Judul yang terlihat</h1>

<h1 class="hidden"> Judul yang tidak terlihat</h1>
<p>Perhatikan bahwa judul yang memiliki stylle display: none tidak ditampilkan</p>
</body>
</html>
Output
Penjelasan
Display : none digunakan style untuk tidak menampilkan apapun
Hidden
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
h1.sembunyi {
visibility: hidden;
}
</style>
</head>
<body>

<h1 class="sembunyi">Judul yang disembunyikan</h1>
<p>Perhatikan bahwa judul yang disembunyikan masih memakan ruang</p>
</body>
</html>
Output
Penjelasna
Hidden digunakan ketika ingin menyembunyikan sesuatu dan Nampak masih di tempat.
CSS Layout – Inline Block
Listing Program
Output
Penjelasan
nilai inline-blok properti tampilan membuatnya lebih mudah dibaca.
Using inline-block to Create Navigation Links
Listing Program
Output
Penjelasan
nilai inline-blok properti tampilan membuatnya lebih mudah dibaca.
CSS Image Gallery File

Listing Program
Output
Penjelasan
Untuk membuat sebuah album foto
Different List Item Maker
Listing Program
<!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>Example of 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>
Analisa: Program diatas merupakan
program yang mendesain untuk
membuat beberapa type list.
Contohnya seperti yang ada di samping
ini. List nya ada bulat, kotak, huruf
romawi, dan juga abc.
An Image As the List Item Maker

Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Analisa: Program di atas merupakan program
yang mendesain untuk list itemnya. Program
diatas menggunakan image untuk list itemnya.
Position the List Item Makers

Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>

<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the
seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water
over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to
Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The
drink's name refers to two of its original ingredients, which were kola nuts (a
source of caffeine) and coca leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the
seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water
over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to
Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The
drink's name refers to two of its original ingredients, which were kola nuts (a
source of caffeine) and coca leaves</li>
</ul>
</body>
Output
Analisa: program di atas merupakan program yang mendesain list. Program tersebut
membedakan anatar posisi list, yang satu outside dan yang satu inside. Yang inside listnya
agak menjorok ke dalam.
Remove Default Setting

Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Default list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Remove bullets, margin and padding:</p>

<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Analisa: program di atas merupakan program
untuk mendesain list. Program tersebut
menampilkan cara menghapus list. Output dari
program tersebut yang pertama ada list item
nya dan yang kedua tidak ada.
List – Shorthand Property

Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Analisa: Program di atas merupakan program mendesain

list. Program tersebut menginputkan gambar untuk list
itemnya.
Styling List With Color
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Output
Analisa: Program di atas merupakan program mendesain list itemnya. Program tersebut
menampilkan dua type list item yang berbeda, yang pertama ada 123 dan yang kedua ada titik.
Keuda output terdapat background warna berbeda.
CSS Max Width Files

Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
}
div.ex2 {
max-width:500px;
margin: auto;
}
</style>
</head>
<body>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the
difference between
the two divs!</p>
</body>
</html>
Output
CSS Opacity Transparency Images

Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an
element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>

<img src="tgs1.jpg" alt="Forest" width="400"
height="300">
</body>
</html>
Output
Penjelasan :Untuk mentasparenkan bidang. Semakin tinggi nilai, semakin tasparent

Transparet Hover Effect
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<p>The opacity property is often used together with the :hover selector to
change the opacity on mouse-over:</p>
<img src="tgs1.jpg" alt="Forest" width="170" height="100">
<img src="tgs2.jpg" alt="Mountains" width="170" height="100">
<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>
Output
Penjelasan : Hover digunakan untuk mengubah opacity menjadi lebih terang menggunakan
pointer mouse
Esample Explained’
Code
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<p>The opacity property is often used together with the :hover selector to change
the opacity on mouse-over:</p>
<img src="tgs1.jpg" alt="Forest" width="170" height="100">
<img src="tgs2.jpg" alt="Mountains" width="170" height="100">
<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>
Output
Penjelasan : Fungsi reserved hover merupakan kebalikan dari hover, mengubah gambar
berwarna terang menjadi tasparant menggunakan pointer
Transparent Box
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #FF007F;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</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"><p>opacity 0.1</p></div>

<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Output
Penjelasan :Menerapkan opacity pada box

Transparency using RGBA
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
}
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
}
div.third {
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>

<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using
the opacity property.</p>
</body>
</html>
Output
Penjelasan : Menerapkan opacity pada box yang menggunakan RGBA
Text in Transparent Box
Code
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(tgs1.jpg) repeat;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Dan Jakarta Muram Kehilanganmu</p>
</div>
</div>
Output
</body>
</html>
Penjelasan : Menulis pada background yang bergambar dan memiliki bodir, serta pada
bagian box diberi opacity
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
}
</style>
</head>
<body>
<div>This element has a padding of 70px.</div>
</body>
</html>
Individual sides
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>

padding of 30px, a bottom padding of 50px, and a left padding
of 80px.</div>
</body>
</html>
Shorthand property (4 values)

<!DOCTYPE html>
<html>
<head>
<style>
div {
}
</style>
</head>
<body>

padding of 50px, a bottom padding of 75px, and a left padding
of 100px.</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px 50px 75px;
}
</style>
</head>
<body>
<div>This div element has a top padding of 25px, a right and

left padding of 50px, and a bottom padding of 75px.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px 50px;
}
</style>
</head>
<body>
<div>This div element has a top and bottom padding of 25px,

and a right and left padding of 50px.</div>
</body>
</html>
Shorthand property (1 value)

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right

</body>
</html>
Padding and element width

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
}
div.ex2 {
width: 300px;
padding: 25px;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>

<br>
<div class="ex2">The width of this div is 350px, even though

it is defined as 300px in the CSS.</div>
</body>
</html>
Padding and element width with box-sizing
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
}
div.ex2 {
width: 300px;
padding: 25px;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>

<br>
<div class="ex2">The width of this div remains at 300px, in

spite of the 50px of total left and right padding, because of
the box-sizing: border-box property.
</div>
</body>
</html>
Override The Default Display Value
Listing Program
<!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="/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>
</body>
</html>
Output
Penjelasan
Untuk menampilkan navigasi menu secara horizontal
Block
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>Kalimat setelah ini akan ber-</span> <span>pindah tempat</span>
</body>
</html>
Output
Penjelasan
<span> digunakan untuk memindahkan kalimat menjadi dibawahnya.
Display : none
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>

<h1 class="hidden"> Judul yang tidak terlihat</h1>
<p>Perhatikan bahwa judul yang memiliki stylle display: none tidak ditampilkan</p>
</body>
</html>
Output
Penjelasan
Display : none digunakan style untuk tidak menampilkan apapun
Hidden
Listing Program
<!DOCTYPE html>
<html>
<head>
<style>
h1.sembunyi {
visibility: hidden;
}
</style>
</head>
<body>

<h1 class="sembunyi">Judul yang disembunyikan</h1>
<p>Perhatikan bahwa judul yang disembunyikan masih memakan ruang</p>
</body>
</html>
Output
Penjelasna
Hidden digunakan ketika ingin menyembunyikan sesuatu dan Nampak masih di tempat.
Anchor Pseudo-Classes
head>
<style>
/* link yang tidak dikunjungi */
a:link {
color: red;
}
/* link yang dikunjungi */

a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* link yang dipilih */

a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">ini adalah link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS defin
ition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in ord
er to be effective.</p>
Penjelasan : untuk membedakan antar link dengan warna berdasarkan kegunaannya
Pseudo-classes and CSS Classes

<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>
</body>
Penjelasan : untukk menghighlight suatu link

Hover on <div>
head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>arahkan mouse ke bawah untuk mengganti warna:</p>
<div>arahkan mouse disini</div>
</body>
Penjelasan : untuk mengganti warna suatu background bila ditunjukk dengan pointer
Simple Tooltip Hover
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>ini adalah beberapa text.</p>

<p>ini adalah beberapa text.</p>
<p><b>catatan:</b> untuk :first-
child bkerja di IE8 dan lebih awal, a DOCTYPE harus dideklarasikan.</p>
</body>
Penjelasan : untuk membuat kalimat awal menjadi warna biru

Match the first <p> element
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p><b>Note:</b> For :first-
child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
Penjelasan : untuk membuat kata dtrong pertama pada setiap paragraph menjadi berwarna
biru
Match the first <i> element in all <p> elements
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>

<p><b>Note:</b> For :first-
child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
Penjelasan : untuk membuat kata strong di pargaraf awal menjadi berwarna biru
Match all <i> elements in all first child <p> elements
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>beberapa text <q lang="no">sebuah quote di paragraph</q> berapa text.</p>

<p>dicontoh ini, :lang mendefinisikan tanda quotation untuk elemen q dengan l
ang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is spe
cified.</p>
</body>
Penjelasan : untuk memberi suat quotation dalam text dengan menginisialisasi quote itu
The ::first-line Pseudo-element

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
</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>
Output:
Analisa : pseudo effect digunakan untuk menggunakan special efek di text
The ::first-letter Pseudo-element
Input :
<!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>
Output
Analisa : Pseudo effect juga bisa digunakan 1 huruf
Pseudo element and CSS classes
Input :
<!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>
Output:
Analisa: Pseudo juga bisa digabung elementnya dengan CSS
Multiple Pseudo Elements
Input:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
p::first-line {
color: #0000ff;
</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>
Output:
Analisa : Pesudo juga bisa digabungkan dengan beberapa elementnya
CSS - The ::before Pseudo-element
Input:
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
Output:
Analisa: penggunaan ::before digunakan untuk membuat apa yang akan kita insert sebelum pseudo
element
CSS - The ::after Pseudo-element

Input:
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
</style>
</head>
<body>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
Output:
Analisa: penggunaan ::after digunakan untuk membuat apa yang akan kita insert setelah pseudo
element
CSS - The ::selection Pseudo-element
Input:
<!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>
<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>
Output:
Analisa:
Penggunaan ::selection digunakan jika kita selection/block maka warna akan berubah
CSS Tables
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {

border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
text-align: left;
color: white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Output
Analisa
Kita juga dapat membuat table dalam css. Tag yang digunakan untuk membuat table pada css
sama dengan HTML seperti tag TH, TD, TR dan lainnya.
Tables Border
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<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>
Output
Analisa
Kita dapat mengatur border dari suatu table dengan menggunakan property border dan
memasukkan valuenya.
Collapse Table Borders
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
}
table, td, th {
}
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<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>
<p><b>Note:</b> If a !DOCTYPE is not specified, the border-

collapse property can produce unexpected results
in IE8 and earlier versions.</p>
</body>
</html>
Output
Output
Analisa
Dalam CSS, warna dari table dapat diatur. Namun, tidak semua browser mensupport html5 sehingga
hasil dari table yang diformat dengan CSS dapat berbeda.
Single Table Border

Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
}
</style>
</head>
<body>
<h2>Single Border Around The Table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
Output<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Output
Analisa
Dalam CSS, table yang dibuat dapat memiliki 1 border saya. Untuk membuatnya dapat diigunakan
border collapse.
Table Width and Weight
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>

<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
Analisa
Dalam CSS, table yang dibuat dapat diatur tinggi dan lebarnya. Untuk membuatnya dapat
diigunakan property width dan weight.
Horizontal Alighment
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in
th or td:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
Analisa
Kita dapat mengatur pertaaan dari text yang ada didalam table dengan menggunakan
property text alignment.
Vertical Alighment
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in
th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
Analisa
Kita dapat mengatur pertaaan dari text yang ada didalam table secara dengan
menggunakan property vertical alignment.
Table Padding
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>The padding Property</h2>

<p>This property adds space between the border and the content in a table.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
Analisa
Cell padding digunakan untuk mengatur jarak antara text dengan sisi horizontal dan vertical
table.
Horizontal Deviders
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>

<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
Output
Analisa
Horizontal table deviders adalah sebuah table yang tidak memiliki border disisi kanan dan
kirinya. Tabel ini hanya memiliki border dibagian bawahnya.
Hoverable Table
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
Output
Analisa
Hoverable Table akan membuat table memiliki effect ketika mouse melewati table tersebut.
Stripped Tables
Sorce Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
Output
Analisa
Stripped table digunakan untuk membuat table dengan warna yang berselang seling. Style
table seperti ini akan memudahkan pembaca dalam membaca isi table.
Table Color
Sorce Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
Output
Analisa
Warna pada table CSS dapat diganti. Untuk member warna pada table digunakan property
tr.
Responsive Table
Sorce Code
<!DOCTYPE html>
<html>
<head>
<style>
table {
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
Output
Analisa
Responsive table adalah table yang dapat diseger view nya apabila jendela dari browser
tidak cukup. Untuk membuat responsive table dapat menggunakan property overflow dan
value auto.
Text color
Script
<style>
body {
color: red;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>ini heading</h1>
<p>This is an ordinary paragraph. Notice
that this text is blue. The default text
color for a page is defined in the body
selector.</p>
Output
Analisa : Dalam css ini kita tidak menggunakan file tersendiri yang dihubungkan melalui link,
namun kita menggunakan elemen style, dalam file css ini terdapat body dan h1 yang diberi
style, yaitu dengan style color yang akan merubah warna dari teks yang terdapat di
dalamnya. Untuk nilai dari color sendiri dapat berupa nama dari sebuah warna, kode hex,
ataupun rgb.
Text align
Script
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned

center, left and right.</p>
Output
Analisa : Kemudian di sini terdapat text-align yang berfungsi untuk merubah poisisi dari
suatu teks, nilai dari text-align sendiri adalah left, right, dan center, dan semuanya mewakili
di mana nantinya teks akan berada.
Text align
Script
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned

center, left and right.</p>
Output
Analisa : Kemudian di sini terdapat text-align yang berfungsi untuk merubah poisisi dari
suatu teks, nilai dari text-align sendiri adalah left, right, dan center, dan semuanya mewakili
di mana nantinya teks akan berada.
Script
<style>
div {
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines so that each

line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since.
'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.'
</div>
Output
Analisa : Kita juga dapat memberi nilai justify pada text-align sehingga setiap baris
mempunyai lebar yang sama.
Text decoration
Script
<style>
a {
}
</style>
</head>
<body>
<p>A link with no underline: <a

href="https://www.w3schools.com">W3Schoo
ls.com</a></p>
Output
Analisa : Elemen text-decoration digunakan untuk memberikan atau menghilangkan

dekorasi dari teks, dalam script tersebut nilai dari text-decoration adalah none yang
bermakna bahwa dekorasi pada teks akan hilang.
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
}
</style>
</head>
<body>

Script
Output
Analisa : Ada juga nilai lain dari text-decoration yaitu overline yang akan memunculkan garis
di atas text, line-through yang akan memunculkan garis di tengah teks (dari ujung kiri ke
kanan), dan juga terdapat underline yang memunculkan garis di bawah teks.
Text transformation
Script
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some

text.</p>
<p class="lowercase">This is some
text.</p>
<p class="capitalize">This is some
text.</p>
Output
Analisa : Elemen text-transform digunakan untuk membuat uppercase, lowercase, atau

capitalizae, uppercase membuat seluruh teks menjadi huruf kapital, sedangkan lowercase
sebaliknya, dan capitalize membuat semua huruf di depan menjadi huruf kapital.
Text indentation
Script
<style>
p {
text-indent: 30px;
}
</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. '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>
Output
Analisa : elemen ini berguna untuk menentukan seberapa menjoroknya awal suatu kalimat
ke arah dalam. Semakin besar dari elemen text-indet, maka akan semakin menjorok ke
dalam.
Letter spacing
Script
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>

Output
Analisa : elemen letter-spacing bertujuan untuk menentukan jarak antar karakter di suatu
teks.
Line height
Script
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard
line-height.<br>
The default line height in most browsers
is about 110% to 120%.<br>
</p>
<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>
Output
Analisa : elemen line-height berfungsi untuk menentukan jarak antar baris, ukuran line-
height standar adalah 110% hingga 120%.
Text direction
Script
p.ex1 {
direction: rtl;
}
</style>
</head>
<body>
<p>This is the default text

direction.</p>
<p class="ex1"><bdo dir="rtl">This is
right-to-left text direction.</bdo></p>
Output
Analisa : elemen direction dapat digunakan untuk menentukan arah dari suatu teks yang
kita buat, dalam tag <style> sendiri, kita menggunakan direction dengan nilai rtl yang berarti
right to left, dan otomatis teks akan berpindah ke kanan dan menuju ke kiri, sedangkan
pada html, terdapat tag <bdo> dengan atribut dir yang menunjukkan urutan penulisan yang
dimulai dari kanan ke kiri.
Word spacing
Script
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>

Output
Analisa : elemen word-spacing digunakan untuk menentukan space di setiap kata.
Text shadow
Script
<style>
h1 {
text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and
earlier do not support the text-shadow
property.</p>
Output
Analisa : elemen ini berguna untuk memberikan shadow atau bayangan pada teks, dengan
nilai yang merepresentasikan (x y warna), jadi shadow di sumbu x dan y berapa ukurannya
beserta warnanya.
Image Sprites Simple Example
Code
<!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" width="1" height="1"><br><br>

<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>
Output
Penjelasan
Untuk menampilkan gambar yang simple
Image Sprites – Create Navigation List
Code
<!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>
Output
Penjelasan
Untuk menggunakan gambar sebagai navigasi link
Image Spirtes Hover
Code
<!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>
Output
Penjelasan
Untuk menggunakan gambar sebagai navigasi link dengan efek hover
Attr selector
Code
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">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>
Output
Penjelasna
Untuk memberikan tanda dengan menargetkan atribut lewat selector
Attr slector value

Code
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">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>
Output
Penjelasan
Menggunakan attr selector dengan memberi nilai blank
Attr selector value specific
Code
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
}
</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">
</body>
</html>
Output
Penjelasan
Untuk memberi value pada selector spesifik
Attr selector attr|=value
Code
<!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>
Output
Penjelasan
Menggunakan attr|= selector
Attr^= value selector
Code
<!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>
Output
Penjelasan
Menggunakan attr^=value
Attr$=value selector
Code
<!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>
Output
Penjelasan
Menggunakan attr$=value
Attr*=value selector
Code
<!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>
Output
Penjelasan
Menggunakan attr*=value selector
Styling Forms
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
}
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>
Output
Penjelasan
Contoh penerapan
Forms
Code
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=submit] {
width: 100%;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">

</form>
</div>
</body>
</html>
Output
Penjelasan
Membuat form isian
Styling input
Code
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<p>A full-width input field:</p>
<form>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Output
Penjelasan
Membuat dengan width property
Forms Padded inputs
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
}
</style>
</head>
<body>
<p>Padded text fields:</p>
<form>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Output
Penjelasan
Ruang teks yang diberi padding
Forms border input
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border-radius: 4px;
}
</style>
</head>
<body>
<p>Text fields with borders:</p>
<form>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Output
Penjelasan
Memberi border pada textfield
Colored input
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<p>Colored text fields:</p>
<form>
<input type="text" id="fname" name="fname" value="John">
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Output
Penjelasan
Menambah warna pada text field
Focused input 1
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #555;
outline: none;
}
input[type=text]:focus {
}
</style>
</head>
<body>
<p>In this example, we use the :focus selector to add a background color to the text field
when it gets focused (clicked on):</p>
<form>
</form>
</body>
</html>
Output
Penjelasan
Akan muncul warna ketika text fields nya ditekan
Focused input 2
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
border: 3px solid #555;
}
</style>
</head>
<body>
<p>In this example, we use the :focus selector to add a black border color to the text field
when it gets focused (clicked on):</p>
<p>Note that we have added the CSS transition property to animate the border color (takes
0.5 seconds to change the color on focus).</p>
<form>
</form>
</body>
</html>
Output
Penjelasan
Text fields akan memiliki respon menebalkan border ketika textfields ditekan
Input icon/image
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Output
Penjelasan
Memberi icon dan gambar pada text field
Animated icon
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
border-radius: 4px;
font-size: 16px;
background-image: url('searchicon.png');
background-position: 10px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
width: 100%;
}
</style>
</head>
<body>
<p>Animated search input:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Output
Penjelasan
Ketika text fields ditekan akan bergerak
Styling text areas
Code
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
border-radius: 4px;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>
<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized
(disable the "grabber" in the bottom right corner):</p>
<form>
<textarea>Some text...</textarea>
</form>
</body>
</html>
Output
Penjelasan
Untuk memodifikasi textfields agar ukurannya tidak dapat diubah
Styling Select Menus
Code
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<p>A styled select menu.</p>
<form>
<option value="au">Australia</option>
<option value="ca">Canada</option>
</select>
</form>
</body>
</html>
Output
Penjelasan
Untuk memodifikasi menu pilihan
Styling Input buttons
Code
<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
border: none;
color: white;
padding: 16px 32px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Styled input buttons.</p>
<input type="button" value="Button">

<input type="reset" value="Reset">
</body>
</html>
Output
Penjelasan
Memodifikasi tombol
Styling Forms
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
}
input[type=text], select, textarea {

width: 100%;
padding: 12px;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
}
input[type=submit] {
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns
stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide,
make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
</div>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
</div>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<label for="country">Country</label>
</div>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
</select>
</div>
</div>
<div class="row">
<label for="subject">Subject</label>
</div>
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div class="row">
</div>
</form>
</div>
</body>
</html>
Output
Penjelasna
Menggabungkan semua materi forms yang sudah dipelajari menjadi satu form
Automatic numbering with counters
Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters:</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>
Output
Penjelasan
Untuk memberi daftar nomor dengan CSS Counters
Nesting Counters
Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>
Output
Penjelasan
Memberi daftar nomor yang bersaarang
Header
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
/* Style the header */

.header {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Header</h1>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat header dengan CSS
NavBar
Code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
{
}
body {
margin: 0;
}
.header {
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */

.topnav {
overflow: hidden;
}
/* Style the topnav links */

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}
/* Change color on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Link</a>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat navigation bar dengan CSS
Content
Code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
{
}
body {
margin: 0;
}

.header {
padding: 20px;
text-align: center;
}

.topnav {
overflow: hidden;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}

.topnav a:hover {
color: black;
}
/* Create three equal columns that floats next to each other */

.column {
float: left;
width: 33.33%;
padding: 15px;
}

.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next
to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
</div>
<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium
urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam
orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<h2>Column</h2>
</div>
<h2>Column</h2>
</div>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat isi konten
Unequal Content
Code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
{
}
body {
margin: 0;
}

.header {
padding: 20px;
text-align: center;
}

.topnav {
overflow: hidden;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}

.topnav a:hover {
color: black;
}
/* Create three unequal columns that floats next to each other */

.column {
float: left;
padding: 10px;
}
/* Left and right column */

.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}

.row:after {
content: "";
display: table;
clear: both;
}
to each other */
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Header</h1>
</div>
</div>
<div class="row">
<div class="column side">
<h2>Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="column middle">

<h2>Main Content</h2>
</div>

<h2>Side</h2>
</div>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat isi konten dengan isi yang berbeda.
Footer
Code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
{
}
body {
margin: 0;
}

.header {
padding: 20px;
text-align: center;
}

.topnav {
overflow: hidden;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}

.topnav a:hover {
color: black;
}
/* Create three unequal columns that floats next to each other */

.column {
float: left;
padding: 10px;
}
/* Left and right column */

.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}

.row:after {
content: "";
display: table;
clear: both;
}
to each other */
.column.side, .column.middle {
width: 100%;
}
}
/* Style the footer */

.footer {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Header</h1>
</div>
</div>
<div class="row">
<h2>Side</h2>
</div>
<div class="column middle">

<h2>Main Content</h2>
</div>

<h2>Side</h2>
</div>
</div>
<p>Footer</p>
</div>
</body>
</html>
Output
Penjelasan
Untuk membuat footer
Responsive Web Layout
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}

.topnav {
overflow: hidden;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}

.topnav a:hover {
color: black;
}
/* Create two unequal columns that floats next to each other */

/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */

.card {
padding: 20px;
margin-top: 20px;
}

.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<h1>My Website</h1>
</div>
<a href="#" style="float:right">Link</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<h2>Footer</h2>
</div>
</body>
</html>
Output
Penjelasan
Membuat layout website yang responsive
Height/Width example
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
}
</style>
</head>
<body>
<p>This div element has a height of 200px and a width of 50%:</p>

<div></div>
</body>
</html>
Output
Penjelasan
Mengatur lebar dan tinggi sebuah elemen
Setting max-width
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>

<p>This div element has a height of 100px and a max-width of 500px:</p>
<div></div>
</body>
</html>
Output
Penjelasan
Mengatur lebar maksimum sebuuah elemen
Element Selector
Code
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>

<p>And me!</p>
</body>
</html>
Output
Penjelasan
Digunakan untuk menandai suatu elemen yang akan dimodifikasi dengan lewat elemen
style
CSS id Selector
Code
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output
Penjelasan
Menggunakan selector pada id
CSS Class selector
Code
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Output
Penjelasan
Menggunakan selector melalui class
CSS Universal Selector
Code
<!DOCTYPE html>
<html>
<head>
<style>
{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>

<p>And me!</p>
</body>
</html>
Output
Penjelasan
Menggunakan selector dengan universal
Grouping selector
Code
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h2>Smaller heading!</h2>
</body>
</html>
Output
Penjelasan
Menggunakan selector dengan digrup

Ardy Putra Utama (CSS)

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Ardy Putra Utama (CSS)

Diunggah oleh

Hak Cipta:

Format Tersedia

Examples in Each Chapter

<h1>My First CSS Example</h1>

Analisa : Di css bisa diubah background, font, dan lain lain

Analisa : aturan dalam memakai css adalah dengan p{}

The CSS element Selector

<p>Every paragraph will be affected by the style.</p>

Analisa : menggunakan p{} maka paragraf selanjutnya memakai aturan tersebut

The CSS id Selector

<p id="para1">Hello World!</p>

The CSS class Selector

<h1 class="center">Red and center-aligned heading</h1>

<h1 class="center">This heading will not be affected</h1>

Analisa : dengan memakai p.center maka header tidak mengikuti aturan

<h1 class="center">This heading will not be affected</h1>

The CSS Universal Selector

<p>Every element on the page will be affected by the style.</p>

Analisa : Dengan * {} maka syntax berlaku pada semua element

The CSS Grouping Selector

<link rel="stylesheet" type="text/css"

<h1>Ini adalah heading</h1>

<p>Ini adalah paragraf.</p>

<h1>Ini Adalah Heading</h1>

<p>Ini adalah paragraf.</p>

<h1 style="color:blue;text-align:center;">Ini Adalah Heading</h1>

<p style="color:red;">Ini adalah paragraf.</p>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<h1>Ini Adalah Heading</h1>

<p>Ini adalah paragraf.</p>

<link rel="stylesheet" type="text/css" href="mystyle.css">

body {background-color: linen;}

<body style="background-color: lavender">

<h1>Ini Adalah Heading</h1>

<p>Ini adalah paragraf.</p>

CSS Color Names

<h1 style="background-color:DodgerBlue;">Hello World</h1>

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

<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>Warna ini sama seperti warna "merah tomat":</p>

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

<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<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>This page has a light blue background color!</p>

 PERINTAH INI BERTUJUAN UNTUK MEMBERIKAN WARNA PADA

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

 PERINTAH INI BERTUJUAN UNTUK MEMBERIKAN WARNA YANG BERBEDA

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

 PERINTAH INI BERTUJUAN UNTUK MENGGUNAK IMAGE/GAMBAR SEBAGAI

 PERINTAH INI BERTUJUAN UNTUK MENGGUNAK IMAGE/GAMBAR SEBAGAI

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the

<p>The background-image is fixed. Try to scroll down the page.</p>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the

<h2>The border-style Property</h2>

<p class="dotted">A dotted border.</p>

<h2>Using individual margin properties</h2>