Jobsheet 15 CSS Font

Materi Web Programmer | Pengenalan CSS
JOBSHEET #15 Pengantar CSS <meta charset="UTF-8">

<title>Belajar CSS</title>
//font-family.html
<style>
<!DOCTYPE html> body { font-size: 14px; }
<html> h1 { font-size: 2em; }
<head> h2 { font-size: 1.8em; }
<meta charset="UTF-8"> h3 { font-size: 1.6em; }
<title>Belajar CSS</title> p { font-size: 1.2em; }
<style> </style>
p.arial{ </head>
font-family: Arial, Helvetica, sans- <body>
serif; <h1>Belajar CSS</h1>
} <h2>Tentang Typography</h2>
p.times{ <h3>Property font-size</h3>
font-family: "Times New Roman", Georgi <p>Sebuah paragraf sederhana</p>
a, serif; </body>
} </html>
p.sans-serif{
font-family: sans-serif; //fontcolor.html
} <!DOCTYPE html>
p.serif{ <html>
font-family: serif; <head>
} <meta charset="UTF-8">
p.monospace{ <title>Belajar CSS</title>
font-family: monospace; <style>
} p { font-size: 24px; }
p.cursive{ p.satu {color: #AABBCC; }
font-family: cursive; p.dua {color: #ABC; }
} p.tiga {color: #112233; }
p.fantasy{ p.empat {color: #123; }
font-family: fantasy; p.lima {color: #FF00FF; }
} p.enam {color: #F0F; }
</style> </style>
</head> </head>
<body> <body>
<p class="arial">Paragraf dengan jenis <p class='satu'>Paragraf dengan warna
font Arial</p> teks #AABBCC</p>
<p class="times">Paragraf dengan jenis <p class='dua'>Paragraf dengan warna t
font Times New Roman</p> eks #ABC</p>
<p class="sans-serif">Paragraf dengan <p class='tiga'>Paragraf dengan warna
jenis sans-serif</p> teks #112233</p>
<p class="serif">Paragraf dengan jenis <p class='empat'>Paragraf dengan warna
serif</p> teks #123</p>
<p class="monospace">Paragraf dengan j <p class='lima'>Paragraf dengan warna
enis monospace</p> teks #FF00FF</p>
<p class="cursive">Paragraf dengan jen <p class='enam'>Paragraf dengan warna
is font cursive</p> teks #F0F</p>
<p class="fantasy">Paragraf dengan jen </body>
is font fantasy</p> </html>
</body>
</body> //boxmodel.html
</html> <!DOCTYPE html>
<html>
//fontsize.html <head>
<!DOCTYPE html> <meta charset="UTF-8">
<html> <title>Belajar CSS</title>
<head> <style>
1
h3 { <style>
width: 300px; * {
height: 100px; margin: 0;
background-color: yellow; padding: 0;
} }
p { div.container {
width: 800px; margin: 0 auto;
height: 150px; width: 800px;
background-color: aqua; height: 500px;
} border: 2px solid green;
</style> background: url('bg_grid.png');
</head> }
<body> p {
<h3>Belajar Box Model</h3> background-color: yellow;
<p>Sebuah paragraf sederhana</p> }
</body> .box{
</html> width: 150px;
height:450px;
//borderradius.html padding: 10px;
<!DOCTYPE html> border: 5px solid green;
<html> margin: 10px;
<head> float: left;
<meta charset="UTF-8"> background-color: GreenYellow;
<title>Belajar CSS</title> text-align: center;
<style> }
div{ </style>
width: 100px; </head>
height: 100px; <body>
margin: 20px; <div class="container">
background-color: green; <div class="box"><p>Box Pertama</p></
color: white; div>
line-height: 100px; <div class="box"><p>Box Kedua</p></
text-align: center; div>
float: left; <div class="box"><p>Box Ketiga</p></
} div>
.satu { border-radius: 10px; } <div class="box"><p>Box Keempat</p></
.dua { border-radius: 10px 5px; } div>
.tiga { border-radius: 5px 10px 15px; </div>
} </body>
.empat { border-radius: 5px 10px 15px </html>
20px; }
</style> //layout.html
</head> <html>
<body> <head>
<div class="satu">Box 1</div> <meta charset="UTF-8">
<div class="dua">Box 2</div> <title>Belajar CSS</title>
<div class="tiga">Box 3</div> <style>
<div class="empat">Box 4</div> * {
</body> margin: 0;
</html> padding: 0;
}
//cssproject.html div.container {
<!DOCTYPE html> margin: 0 auto;
<html> width: 800px;
<head> height: 500px;
<meta charset="UTF-8"> border: 2px solid green;
<title>Belajar CSS</title> }
2
p { .satu { background-color: blanchedAlmo

background-color: yellow; nd;}
} .dua { background-color: #777799;}
.box1{ .tiga { background-color: rgb
width: 150px; (153,102,153);}
height:450px; .empat { background-color: rgba(0, 0,
padding: 10px; 0, 0.8);}
border: 5px solid green; .lima { background-color: hsla(170, 50
margin: 10px; %, 45%, 1);}
float: left; .enam { background-color: transparen
background-color: GreenYellow; t;}
text-align: center; </style>
border-radius: 20px; </head>
} <body>
.box2{ <div class="satu">Box Pertama</div>
width: 550px; <div class="dua">Box Kedua</div>
height:450px; <div class="tiga">Box Ketiga</div>
padding: 10px; <div class="empat">Box Keempat</div>
border: 5px solid green; <div class="lima">Box Kelima</div>
margin: 10px; <div class="enam">Box Keenam</div>
float: left; </body>
background-color: GreenYellow; </html>
text-align: center;
border-radius: 20px; //floatpos.html
} <!DOCTYPE html>
</style> <html>
</head> <head>
<body> <meta charset="UTF-8">
<div class="container"> <title>Belajar CSS</title>
<div class="box1"><p>Box Pertama</ <style>
p></div> .container {
<div class="box2"><p>Box Kedua</p></ width: 960px;
div> background-color: rgb(231, 232, 226);
</div> margin: 0 auto;
</body> }
</html> .satu {
width: 200px;
//cssbackground.html height: 300px;
<!DOCTYPE html> background-color: #FF1A00;
<html> float: left;
<head> }
<meta charset="UTF-8"> .dua{
<title>Belajar CSS</title> width: 560px;
<style> height: 300px;
div { background-color: #008C00;
width: 400px; float: left;
height: 80px; }
margin: 10px; .tiga{
text-align: center; width: 200px;
line-height: 80px; height: 300px;
font-size: 20px; background-color: #4096EE;
float: left; float: left;
} }
body { </style>
background-color: PaleGreen; </head>
} <body>
<div class="container">
3
<div class="satu"></div> </html>

<div class="dua"></div>
<div class="tiga"></div> //formattabel.html
</div> <!DOCTYPE html>
</body> <html>
</html> <head>
<meta charset="UTF-8">
//menu.html <title>Belajar CSS</title>
<!DOCTYPE html> <style>
<html> .container {
<head> width: 720px;
<meta charset="UTF-8"> margin: 0 auto;
<title>Belajar CSS</title> }
<style> table {
.container { border-collapse:collapse;
width: 900px; border-spacing:0;
margin: 0 auto; font-size:18px;
} }
ul { table th {
list-style: none; padding:10px;
padding: 0; color:#fff;
margin: 0; background-color:#2A72BA;
} border-top:1px black solid;
li a { border-bottom:1px black solid;
display: block; }
background-color: #198C13; table td {
color: white; padding:10px;
text-decoration: none; border-top:1px black solid;
font-size: 20px; border-bottom:1px black solid;
height: 30px; }
line-height: 30px; tr:nth-child(even) {
padding: 5px 20px; background-color: #DFEBF8;
border-left: 2px solid #FFF; }
float: left; </style>
} </head>
li a:hover { <body>
background-color: #0AED0A; <div class="container" >
color: black; <table border=1>
} <tr>
</style> <th>No</th><th>Nama</th><th>Umur</
</head> th><th>Tempat Lahir</th>
<body> </tr>
<div class="container"> <tr>
<ul> <td>1.</td><td>Andi Susanto</td><td>21
<li><a href="belajar_html.html">Belaja Tahun</td><td>Semarang</td>
r HTML</a></li> </tr>
<li><a href="belajar_css.html">Belajar <tr>
CSS</a></li> <td>2.</td><td>Joko Hermawan</
<li><a href="belajar_php.html">Belajar td><td>25 Tahun</td><td>Jakarta</td>
PHP</a></li> </tr>
<li><a href="belajar_js.html">Belajar <tr>
JavaScript</a></li> <td>3.</td><td>Santri Putria</
<li><a href="belajar_mysql.html">Belaj td><td>17 Tahun</td><td>Bandung</td>
ar MySQL</a></li> </tr>
</ul> <tr>
</div> <td>4.</td><td>Joni Manurung</
</body> td><td>19 Tahun</td><td>Medan</td>
4
</tr>
</table>
</div>
</body>
</html>

Jobsheet 15 CSS Font

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Jobsheet 15 CSS Font

Caricato da

Copyright:

Formati disponibili

Materi Web Programmer | Pengenalan CSS

JOBSHEET #15 Pengantar CSS <meta charset="UTF-8">

p { .satu { background-color: blanchedAlmo

<div class="satu"></div> </html>

Potrebbero piacerti anche