Scribd
Carica
1 visualizzazioni19 pagine

Laporan CSS

Il documento descrive l'utilizzo di CSS per formattare elementi di una pagina web come paragrafi, link e liste. Vengono illustrate tecniche come embedded styles, linked styles, inline styles e style sheets per posizionare e formattare il testo.

Caricato da

Eka Setiawati
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
1 visualizzazioni19 pagine

Laporan CSS

Il documento descrive l'utilizzo di CSS per formattare elementi di una pagina web come paragrafi, link e liste. Vengono illustrate tecniche come embedded styles, linked styles, inline styles e style sheets per posizionare e formattare il testo.

Caricato da

Eka Setiawati
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 19

NAMA : MELSA SAFITRI

KELAS : 11 PPLG 2

LAPORAN CSS

BAB I

1. EMBEDDED STYLES

<html>
<head>
<title>Embedded Styles</title>
<style type="text/css">
body {
background: black;
color: white;
}

h2 {
color: yellow;
border-bottom: 1px solid white;
}

</style>
</head>
<body>
<h2>Demo Embedded Styles</h2>

<p>Halaman ini adalah halaman yang sudah saya atur dengan menggunakan css</p>

</body>
</html>
2. LINKED STYLES
STYLE.CSS

body {
background: black;
color: white;

}
SAMPLE.HTML

<html>
<head>
<title>Linked Styles</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h2>Demo Memberi Link Style</h2>

<p>Ini adalah Body</p>

</body>
</html>

3. INLINE STYLES
CSS INLINE

<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<h2>Demo Inline Styles</h2>

<p style="color: red; text-decoration: underline;">


Contoh paragraf yang menggunakan style. </p>

<p>Contoh paragraf yang tidak menggunakan style.</p>


</body>
</html>

BAB II

1. STYLE SHEET
INLINE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline</title>
</head>
<body>
<!-- menerapkan embedded style pada paragraf -->
<p style="color:red; font-style:italic">

<!-- menerapkan embedded style pada paragraf -->


<p style="color:blue; font-weight:bold">
Halaman ini merupakan halaman inline yang menggunakan style sheet
<p>
Ini paragraf ketiga

</body>

</html>
EMBEDDED

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded Style</title>
<style type="text/css">
<!--
P{
color: red;
font-style: italic;
}
-->
</style>

</head>
<body>
<p>
Ini paragraf pertama

<p>
Halaman ini merupakan halaman embedded yang menggunakan sheet!
<p>
Ini paragraf ketiga

</body>

</html>
LINKED

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linked Style</title>

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

</head>
<body>
<p class="style1">
Ini paragraf pertama

<p id="style2">
Halaman ini merupakan halaman linked yang menggunakan style sheet!
<p class="style1">
Ini paragraf ketiga

</body>
</html>

2. TIPOGRAFI
STYLE FONT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Font</title>

<style type="text/css">
<!--
.style_font {
font-family: Georgia;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
color: red;
line-height: 36px;
}
-->
</style>

</head>

<body>
<p class="style_font">
Halaman ini merupakan halaman stylefont yang menggunakan tipografi!
<p>
Halaman ini merupakan halaman stylefont yang menggunakan tipografi!

</body>
</html>

INITIAL CAP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initial Cap</title>

<style type="text/css">
<!--

p:first-letter {
font-size: 3em;
background-color: black;
color: white;
}
-->
</style>

</head>

<body>
<p>
Halaman ini merupakan halaman initialcap yang menggunakan tipografi!

</body>
</html>

3. ELEMEN-ELEMEN HALAMAN
BORDER

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border</title>

<style type="text/css">
<!--
.border1 {
border: 1px solid red;
}

.border2 {
border: 1px dashed red;
}

.border3 {
border: 1px dotted red;
}
-->

</style>

</head>

<body>
<p class="border1">
Halaman ini adalah halaman yang sudah saya atur dengan menggunakan css
<p class="border2">
Halaman ini adalah halaman yang sudah saya atur dengan menggunakan
css</p>
<p class="border3">
Halaman ini adalah halaman yang sudah saya atur dengan menggunakan
css</p>
</body>
</html>

PADDING
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding</title>

<style type="text/css">
<!--
.border1 {
border: 1px solid red;
padding: 10px;
}

.border2 {
border: 1px solid red;
padding: 20px 10px 5px 40px;
}

-->
</style>
</head>
<body>
<p class="border1">
Halaman ini merupakan elemen elemen halaman yang sudah saya atur oleh
padding.
<p class="border2">
Halaman ini merupakan elemen elemen halaman yang sudah saya atur oleh
padding.

</body>
</html>

4. LINK
LINK 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Link</title>

<style type="text/css">
<!--
.link_none {
text-decoration: none;
}
-->

</style>
</head>

<body>

<a href="link2.html">Link Normal</a> <br />


<a href="link2.html" class="link_none">Link tanpa garis bawah</a>

</body>
</html>

5. LIST

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style List</title>

<style type="text/css">
<!--
#leftmenu ul {
width: 200px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display; block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
-->
</style>

</head>
<body>

List Normal
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>

<hr />
Style List

<div id="leftmenu">
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
</ul>
</div>

</body>
</html>
6. MENGGUNAKAN DIVISION
UKURAN AREA

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
<title>Ukuran Division</title>
<style type="text/css">
<!--
.box1 {
width: 200px;
height: 50px;
background: grey;
border: 1px solid red;

.box2 {
margin: 10px;
padding: 10px;
width: 400px;
height: 100px;
border: 1px solid red;
}
-->
</style>
</head>
<body>

<div class="box1">
Paragraf ini di dalam tag &lt;div&gt;
</div>

<div class="box2">
Halaman ini merupakan halaman ukuran area
yang sudah di atur menggunakan Division!
</div>
</body>

</html>

MENGGUNAKAN FORMAT FONT

POSISI AREA 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
<title>Posisi Division</title>
<style type="text/css">
<!--
.box1 {
float: left;
width: 200px;
height: 50px;
background: grey;
border: 1px solid red;

.box2 {
float: right;
padding: 10px;
width: 300px;
height: 100px;
border: 1px solid red;
}
-->
</style>
</head>

<body>

<div class="box1">
Paragraf ini di dalam tag &lt;div&gt;
</div>

<div class="box2">
Halaman ini merupakan halaman ukuran area
yang sudah di atur menggunakan Division!
</div>
</body>

</html>

POSISI AREA2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
<title>Posisi Division</title>
<style type="text/css">
<!--
.box1 {
float: left;
width: 200px;
height: 50px;
background: grey;
border: 1px solid red;

.box2 {
float: right;
padding: 10px;
width: 300px;
height: 100px;
border: 1px solid red;
}

.box3 {
/* me-reset pengaturan float left maupun right */
clear: both;
float: left;
width: 200px;
height: 50px;
background: grey;
border: 1px solid red;
}
-->
</style>
</head>

<body>

<div class="box1">
Paragraf ini di dalam tag &lt;div&gt;
</div>
<div class="box2">
Halaman ini merupakan halaman ukuran area
yang sudah di atur menggunakan Division!
</div>

<div class="box1">
Paragraf ini di dalam tag &lt;div&gt;
</div>

</body>

</html>

7. MEMBUAT KERANGKA

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Wrapper</title>
<style type="text/css">
<!--
#wrapper {
margin: auto;
width: 700px;
border: 1px solid red;
}
-->
</style>
</head>
<body>

<div id="wrapper">
<p>
Paragraf ini di dalam tag &lt;divgt;
<p>
Halaman ini merupakan halaman wrapper
yang merupakan bagian dari membuat kerangka

</div>

</body>
</html>

8. DESAIN LAYOUT
STYLE

#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}

#header {
height: 80px;
border: 1px solid blue;
}

#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}

#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}

LAYOUT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
Content
</div>
</div>

<div id="footer">
Footer
</div>
</div>

</body>
</html>

SEKIAN TERIMAKASIH 

Potrebbero piacerti anche