CSS 2103187008

LAPORAN
PRAKTEK DESAIN PEMROGRAMAN WEB

“CSS MODUL 3”
Disusun oleh:
LOVENDI ARDHANA MAHENDRA ADI (2103187008)
PROGRAM STUDI TEKNIK INFORMATIKA

DEPARTEMEN TEKNIK INFORMATIKA dan KOMPUTER
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

2018/2019
A.DASAR TEORI
Pengenalan CSS
CSS merupakan singkatan dari Cascading Style Sheets yaitu suatu bahasa
lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang
ditulis dalam bahasa markah. Penggunaan yang paling umum dari CSS adalah
untuk memformat halaman web yang ditulis dengan HTML,yang menggunakan
Style untuk menampilkan elemen-elemen HTML. Style mendefinisikan
bagaimana elemen-elemen HTML ditampilkan di browser. CSS dapat digunakan
pada satu atau lebih halaman HTML. Untuk mendefinisikan Style beberapa
halaman HTML, biasanya CSS disimpan didalam satu file tersendiri di luar file
HTML. Hal ini memudahkan web desainer untuk melakukan perubahan style.
Sehingga untuk merubah tampilan beberapa halaman HTML cukup dengan
merubah satu file CSS. CSS biasanya digunakan oleh penulis maupun pembaca
halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek
tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi
dokumen (yang ditulis dengan HTML atau bahasa markah lainnya) dengan
presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat
meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol
terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur
isi.
Menurut penulisannya CSS dapat dibagi menjadi 3 jenis, yaitu :

1. Internal Style Sheet
CSS didefinisikan di dalam file HTML, yaitu dalam elemen <head>
2. External Style sheet
CSS didefinisikan di dalam satu file tersendiri di luar file HTML
3. Inline Style Sheet
CSS didefinisikan di dalam setiap elemen/tag HTML
Sintaks CSS terdiri atas tiga bagian, yaitu : selector, property, dan value selector
{property: value}
Selector merupakan tag yang ingin diberikan style atau tag HTML yang
akan didefinisikan (body,h1,link,dll). Property merupakan atribut yang ingin
didefinisikan atau yang akan diubah dan value merupakan nilai dari atribut.
Antara property dan value dipisahkan oleh tanda titik dua (:).
Contoh :Body { color: black}
Jika value terdiri atas beberapa kata, maka value tersebut diapit dengan tanda
kutip (“ “)
Contoh : P {font-family: “sans serif”}
Cara mendeklarasikan kelompok : (tanda koma serta &)
a. H1, H2 {color : green};
b. H3, H4 & H5 {color : red};
Cara menuliskan komentar :
a. Menggunakan tanda : /* ….. */
b. Menggunakan tanda : 
</div>

</body>
</html>
Adjacent Sibling Selector
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
}
</style>
</head>
<body>
<div>
</div>

</body>
</html>
General Sibling Selector
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
}
</style>
</head>
<body>
<p>Paragraph 1.</p>
<div>
<code>Some code.</code>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
27. CSS PSEUDO-CLASS

Penjelasan: digunakan untuk mendefinisikan keadaan khusus suatu elemen.
Anchor Pseudo-classes
<!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>

</body>
</html>
Pseudo-classes and CSS Classes
<!DOCTYPE html>
<html>
<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>
</html>
Hover on <div>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
Simple Tooltip Hover
<!DOCTYPE html>
<html>
<head>
<style>
p{
display: none;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over me to show the p element

<p>Tada! Here I am!</p>
</div>
</body>
</html>
Match the first <p> element
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>

<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE
must be declared.</p>
</body>
</html>
Match the first <i> element in all <p> elements
<!DOCTYPE html>
<html>
<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>

</body>
</html>
Match all <i> elements in all first child <p> elements
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
</body>
</html>
CSS - The :lang Pseudo-class
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

<p>In this example, :lang defines the quotation marks for q elements with
lang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is
specified.</p>
</body>
</html>
28. CSS PSEUDO-ELEMENT
Penjelasan: Digunakan untuk menata bagian-bagian tertentu dari suatu elemen.
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>
The ::first-letter Pseudo-element
<!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>
Pseudo-elements and CSS Classes
<!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>
Multiple Pseudo-elements
<!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>
CSS - The ::before Pseudo-element
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<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>
CSS - The ::after Pseudo-element
<!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>
CSS - The ::selection Pseudo-element
<!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>
29. CSS OPACITY
Penjelasan: Untuk mengatur ketebalan/transparansi suatu element.
Transparent Image
<!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="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Transparent Hover Effect
<!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="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" 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>
Example explained
<!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="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" 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>
Transparent Box
<!DOCTYPE html>
<html>
<head>
<style>
div {
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>
Transparency using RGBA
<!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>
Text in Transparent Box
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.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>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
30. CSS NAVIGATION BAR

Penjelasan: Untuk memudahkan navigasi list web.
Navigation Bar = List of Links
<!DOCTYPE html>
<html>
<body>
<ul>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be
URLs.</p>
</body>
</html>
Sekarang mari kita hilangkan peluru dan margin serta padding dari daftar:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default
padding and margin.</p>
<ul>
</ul>
</body>
</html>
Vertical Navigation Bar
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
Anda juga dapat mengatur lebar <ul>, dan menghapus lebar <a>, karena
mereka akan mengambil lebar penuh yang tersedia saat ditampilkan sebagai
elemen blok. Ini akan menghasilkan hasil yang sama dengan contoh kami
sebelumnya:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
Vertical Navigation Bar Examples
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
/* Change the link color on hover */

li a:hover {
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
</ul>
</body>
</html>
Active/Current Navigation Link

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
color: white;
}
li a:hover:not(.active) {
color: white;
}
</style>
</head>
<body>

<p>In this example, we create an "active" class with a green background color
and a white text. The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
</ul>
</body>
</html>
Center Links & Add Borders
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
color: white;
}
color: white;
}
</style>
</head>
<body>

<p>In this example, we center the navigation links and add a border to the
navigation bar.</p>
<ul>
</ul>
</body>
</html>
Full-height Fixed Vertical Navbar

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
width: 25%;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
color: white;
}
color: white;
}
</style>
</head>
<body>
<ul>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">

<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the
side navigation is set to 25% width. If you remove the margin, the sidenav will
overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a
scrollbar when the sidenav is too long (for example if it has over 50 links
inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
Horizontal Navigation Bar
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Floating List Items

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</style>
</head>
<body>
<ul>
</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can

produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole
link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li
elements from going outside of the list.</p>
</body>
</html>
Tambahkan warna latar belakang ke <ul> alih-alih setiap elemen <a> jika
Anda menginginkan warna latar lebar penuh:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the list instead of each link to create a full-
width background color.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li
elements from going outside of the list.</p>
</body>
</html>
Horizontal Navigation Bar Examples
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Active/Current Navigation Link

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Right-Align Links
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>
Border Dividers
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
<li style="float:right"><a href="#about">About</a></li>
</ul>
</body>
</html>
Fixed Navigation Bar

Top
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
<div style="padding:20px;margin-top:30px;background-
color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>

</div>
</body>
</html>
Bottom
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the bottom of the page while
scrolling</h2>

</div>
</body>
</html>
Gray Horizontal Navbar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
}
background-color: #ddd;
}
li a.active {
color: white;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Sticky Navbar
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
}
.active {
}
</style>
</head>
<body>
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its
scroll position.</p>
<p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions
do not support sticky positioning. Safari requires a -webkit- prefix.</p>
voluptatibus.</p>
voluptatibus.</p>
voluptatibus.</p>
voluptatibus.</p>
voluptatibus.</p>
voluptatibus.</p>
voluptatibus.</p>
</body>
</html>
Responsive Topnav
<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0;}
ul.topnav {
margin: 0;
padding: 0;
overflow: hidden;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {

ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li class="right"><a href="#about">About</a></li>
</ul>
<div style="padding:0 16px;">

<h2>Responsive Topnav Example</h2>
<p>This example use media queries to stack the topnav vertically when the
screen size is 600px or less.</p>
<p>You will learn more about media queries and responsive web design later
in our CSS Tutorial.</p>
<h4>Resize the browser window to see the effect.</h4>
</div>
</body>
</html>
Responsive Sidenav
<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0;}
ul.sidenav {
margin: 0;
padding: 0;
width: 25%;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
}
ul.sidenav li a.active {
color: white;
}
ul.sidenav li a:hover:not(.active) {
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}

ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}

}

ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
</ul>
<div class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top
navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less,
which will vertically stack and center the navigation links.</p>
</div>
</body>
</html>
Dropdown Navbar
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn {

}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</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>
31. CSS DROPDOWNS
Penjelasan: digunakan elemen apa pun untuk membuka konten tarik-turun, mis.
elemen <span>, atau <button>.
Basic Dropdown
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
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>
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Dropdown Menu
<!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;
min-width: 160px;
z-index: 1;
}
color: black;
padding: 12px 16px;
display: block;
}
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<button class="dropbtn">Dropdown</button>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site

this would be URLs.</p>
</body>
</html>
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;
}
.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;">
</div>
</div>
<div class="dropdown" style="float:right;">

<button class="dropbtn">Right</button>
</div>
</div>
</body>
</html>
More Examples
<!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>
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
<div class="desc">Beautiful Cinque Terre</div>
</div>
</div>
</body>
</html>
Dropdown Navbar
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn {

}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
display: block;
}
</style>
</head>
<body>
<ul>
<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>
32. CSS IMAGE GALLERY

Penjelasan: Digunakan untuk membuat galeri gambar.
Image Gallery
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
float: left;
width: 180px;
}
div.gallery:hover {
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<a target="_blank" href="img_forest.jpg">
</a>
</div>
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600"
height="400">
</a>
</div>
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600"
height="400">
</a>
</div>
</body>
</html>
Responsive Image Gallery
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
}
div.gallery:hover {
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
*{
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {

.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {

.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>

<div class="responsive">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600"
height="400">
</a>
</div>
</div>
<a target="_blank" href="img_forest.jpg">
</a>
</div>
</div>
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600"
height="400">
</a>
</div>
</div>
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600"
height="400">
</a>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different
screen sizes: for screens larger than 700px wide, it will show four images side
by side, for screens smaller than 700px, it will show two images side by side.
For screens smaller than 500px, the images will stack vertically (100%).</p>
</div>
</body>
</html>
33. CSS IMAGE SPRITES
Penjelasan: Dugunakan untuk meamasukkan gambar ke dalam satu gambar.
Image Sprites - Simple Example
<!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>
Image Sprites - Create a Navigation List
<!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>
Image Sprites - Hover Effect
<!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>
34. CSS ATTR SELECTORS
Penjelasan: Digunakan untuk memilih elemen dengan atribut yang ditentukan.
CSS [attribute] Selector
<!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>
CSS [attribute="value"] Selector
<!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>
CSS [attribute~="value"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<p>All images with the title attribute containing the word "flower" get a
yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">

<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
CSS [attribute|="value"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and

earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [attribute^="value"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and

earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [attribute*="value"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Styling Forms
<!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>
35. CSS FORMS

Penjelasan: Digunkan untuk membuat forms pengisisan data.
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
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>
Styling Input Fields
<!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>
Padded Inputs
<!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>
Bordered Inputs
<!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>
</form>
</body>
</html>
Jika Anda hanya ingin batas bawah, gunakan properti batas bawah:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<p>Text fields with only a bottom border:</p>
<form>
</form>
</body>
</html>
Colored Inputs
<!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>
Focused Inputs
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
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>
<!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;
}
}
</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>
Input with icon/image
<!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>
Animated Search Input
<!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>
Styling Textareas
<!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>
Styling Select Menus
<!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>
Styling Input Buttons
<!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>
Responsive Form
<!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 */
.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>
<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>
36. CSS COUNTERS
Penjelasan: Digunakan untuk menghitung konten menurut beberapa kali
digunakan.
Automatic Numbering With Counters
<!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>
Nesting Counters
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
h1 {
counter-reset: subsection;
}
h1::before {
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>

specified.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ol {
}
li::before {
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>

specified.</p>
</body>
</html>
37. CSS WEBSITE LAYOUT
Penjelasan: Untuk membuat layout website (headers, menus, content and a
footer).
Header
<!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>
Navigation Bar
<!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 {
color: black;
}
</style>
</head>
<body>
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Link</a>
</div>
</body>
</html>
Content
<!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>
Unequal Columns
<!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;
}
.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>
Footer
<!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;
}
.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>
Responsive Website Layout
<!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 stack on top of each other instead of next to each other */
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</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>

CSS 2103187008

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

CSS 2103187008

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

PRAKTEK DESAIN PEMROGRAMAN WEB

LOVENDI ARDHANA MAHENDRA ADI (2103187008)

PROGRAM STUDI TEKNIK INFORMATIKA

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

Menurut penulisannya CSS dapat dibagi menjadi 3 jenis, yaitu :

2. External Style sheet

CSS didefinisikan di dalam satu file tersendiri di luar file HTML

3. Inline Style Sheet

CSS didefinisikan di dalam setiap elemen/tag HTML

Contoh :Body { color: black}

Contoh : P {font-family: “sans serif”}

Cara mendeklarasikan kelompok : (tanda koma serta &)

a. H1, H2 {color : green};

b. H3, H4 & H5 {color : red};

Cara menuliskan komentar :

a. Menggunakan tanda : /* ….. */

b. Menggunakan tanda : <!-- - - >

a. Em: untuk menentukan ukuran yang pecahan atau desimal.

b. Ex: digunakan untuk menentukan ukuran yang sifatnya vertikal.

c. Px:menentukan ukuran yang bersifat pixel(layar monitor) seperti ukuran huruf.

<h1>My First CSS Example</h1>

Penjelasan: CSS adalah bahasa yang menggambarkan gaya dokumen HTML.

CSS Demo - One HTML Page - Multiple Styles

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

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

Penjelasan: id selector menggunakan atribut id dari elemen HTML untuk memilih

The class Selector

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

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

Penjelasan: Memilih elemen dengan atribut kelas tertentu.

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

Penjelasan: Untuk memilih grup, pisahkan setiap pemilih dengan koma.

Internal Style Sheet

Penjelasan: digunakan jika satu halaman memiliki gaya yang unik.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Penjelasan: digunakan untuk menerapkan gaya unik untuk elemen tunggal.

<h1>Multiple Styles Will Cascade into One</h1>

Penjelasan: style=”background-color” Untuk membuat nama background color.

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

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

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

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

Penjelasan: <h1 style="color:Tomato umtuk mambuat text color.

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

Penjelasan: style="border:2px untuk membuat border color.

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

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

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

Penjelasan: background-color:rgb(255, 99, 71) umtuk membuat value color

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

<p>In HTML, you can specify colors using RGB values.</p>

Penjelasan: Untuk menentukan intesitas warna tiap tipe.

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

<p>In HTML, you can specify colors using Hex values.</p>

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

<p>In HTML, you can specify colors using HSL values.</p>

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

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

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

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

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