Scribd
Carica
5 visualizzazioni9 pagine

Bahan CSS

bahan anggaran parsial perdagangan

Caricato da

rizkyarapentabarus
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 PDF, TXT o leggi online su Scribd
5 visualizzazioni9 pagine

Bahan CSS

bahan anggaran parsial perdagangan

Caricato da

rizkyarapentabarus
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 PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 9

Css1.

html
1. <html>
2. <head>
3. <title>CSS</title>
4. <style type="text/css">
5. .right {
6. text-align: right;
7. color: aquamarine;
8. }
9. .kanan {
10. font-family: Arial, Helvetica, sans-serif;
11. text-align: justify;
12. text-indent: 70px;
13. letter-spacing: 10px;
14.
15. }
16. </style>
17. </head>
18. <body>
19. <p class="right">
20. Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling
berhubungan yang umumnya berada
21. </p>
22. <p class="kanan">
23. wilayah lokal (LAN) melalui alamat Internet yang dikenali sebagai URL.
24. </p>
25. </body>
26. </html>

Css2.html
1. <html>
2. <head>
3. <title>CSS</title>
4. <style type="text/css">
5. #link{
6. color:red;
7. text-decoration:none;
8. }
9. #link:hover{
10. color:purple;
11. font-size:18px;
12. font-family:verdana;
13. }
14. #link:visited{
15. color:green;
16. }
17. </style>
18. </head>
19. <body>
20. <a href="https://id.wikipedia.org/" id="link">Link</a>
21. </body>
22. </html>
Css3.html
1. <html>
2. <head>
3. <title>CSS</title>
4. <style type="text/css">
5. #gambar1{
6. width:200px;
7. height:200px;
8. border:5px solid yellow;
9. border-radius:100%
10. }
11. #gambar2{
12. width:200px;
13. height:200px;
14. border:5px solid yellow;
15. border-radius:0px 190px 0px 190px;
16. }
17. </style>
18. </head>
19. <body>
20. <img src="FIKOM APK.png" id="gambar1">
21. </body>
22. </html>

Css4.html
1. <html>
2.
3. <head>
4. <title>CSS</title>
5. <style type="text/css">
6. form {
7. font-family: verdana;
8. }
9.
10. #teks {
11. border: 1px solid red;
12. border-radius: 5px;
13. font-family: verdana;
14. background-color: #f0f0f0;
15. color: tomato;
16. width: 100%;
17. height: 30px;
18. }
19.
20. #teks:focus {
21. background-color: lightblue;
22. }
23.
24. #tombol {
25. background-color: deepskyblue;
26. border: none;
27. color: white;
28. border-radius: 4px;
29. height: 30px;
30. width: 60px;
31. cursor: pointer;
32. }
33.
34. #tombol:hover {
35. background-color: dodgerblue;
36. font-weight: bold;
37. text-shadow: 1px 1px 1px tomato;
38. }
39. </style>
40. </head>
41.
42. <body>
43. <form>
44. NIM :<br>
45. <input type="text" id="teks"><br>
46. Nama : <br>
47. <input type="text" id="teks"><br><br>
48. <input type="submit" value="Kirim" id="tombol">
49. </form>
50. </body>
51. </html>

Css5.html
1. <html>
2.
3. <head>
4. <title>CSS</title>
5. <style type="text/css">
6. body {
7. background-image: url('gambar.jpg');
8. background-repeat: no-repeat;
9. background-size: cover;
10. padding: 20px;
11. }
12.
13. #paragraf {
14. text-align: justify;
15. text-indent: 40px;
16. font-family: Georgia, 'Times New Roman', Times, serif;
17. line-height: 20px;
18. }
19. </style>
20. </head>
21.
22. <body>
23. <p id="paragraf">
24. Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling
berhubungan yang umumnya berada
25. pada peladen yang sama berisikan kumpulan informasi yang disediakan secara pe
rorangan, kelompok, atau
26. organisasi.[1] Sebuah situs web biasanya ditempatkan setidaknya pada sebuah s
erver web yang dapat diakses
27. melalui jaringan seperti Internet, ataupun jaringan wilayah lokal (LAN) melal
ui alamat Internet yang dikenali
28. sebagai URL. Gabungan atas semua situs yang dapat diakses publik di Internet
disebut pula sebagai World Wide Web
29. atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda
situs Internet umumnya dapat
30. diakses publik secara bebas, pada praktiknya tidak semua situs memberikan keb
ebasan bagi publik untuk
31. mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaf
taran sebagai anggota, atau bahkan
32. meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang
terdapat dalam situs web tersebut,
33. misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan
surel (e-mail), dan lain-lain.
34. Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, menghorma
ti privasi, atau karena tujuan
35. komersial tertentu.
36. </p>
37. </body>
38.
39. </html>

Css6.html
1. <html>
2.
3. <head>
4. <title>Link Button</title>
5. <style type="text/css">
6. h1 {
7. font-size: 20px;
8. font-family: Verdana, Geneva, Tahoma, sans-serif;
9. color: lawngreen;
10. text-align: center;
11. }
12.
13. #link {
14. font-family: Arial, Helvetica, sans-serif;
15. background-color: #f44336;
16. padding: 14px 25px;
17. color: white;
18. text-align: center;
19. text-decoration: none;
20. border-radius: 5px;
21. display: inline-block;
22. }
23.
24.
25. #link:hover {
26. background-color: seagreen;
27. }
28. </style>
29. </head>
30.
31. <body>
32. <h1>Membuat Button Dengan Link</h1>
33. <a href="https://id.wikipedia.org/" id="link">Link</a>
34. </body>
35. </html>

Css7.html
1. <html>
2.
3. <head>
4. <title>Thumbnail Image</title>
5. <style type="text/css">
6. .gambar {
7. border: 1px solid #ddd;
8. border-radius: 4px;
9. padding: 5px;
10. width: 600px;
11. }
12.
13. .gambar:hover {
14. box-shadow: 0 0 5px 1px tomato;
15. }
16. </style>
17. </head>
18.
19. <body>
20. <img src="gambar.jpg" class="gambar">
21. </body>
22. </html>

Css8.html
1. <html>
2.
3. <head>
4. <style>
5. .container {
6. position: relative;
7. width: 50%;
8. }
9.
10. .image {
11. display: block;
12. width: 100%;
13. height: auto;
14. }
15.
16. .overlay {
17. position: absolute;
18. bottom: 0;
19. left: 0;
20. right: 0;
21. background-color: #008CBA;
22. overflow: hidden;
23. width: 100%;
24. height: 0;
25. transition: .5s ease;
26. }
27.
28. .container:hover .overlay {
29. height: 100%;
30. }
31. s
32. .text {
33. white-space: nowrap;
34. color: white;
35. font-size: 20px;
36. position: absolute;
37. overflow: hidden;
38. top: 50%;
39. left: 50%;
40. transform: translate(-50%, -50%);
41. -ms-transform: translate(-50%, -50%);
42. }
43. </style>
44. </head>
45.
46. <body>
47.
48. <h2>Slide in Overlay from the Bottom</h2>
49.
50. <div class="container">
51. <img src="gambar.jpg" class="image">
52. <div class="overlay">
53. <div class="text">Hello World</div>
54. </div>
55. </div>
56.
57. </body>
58. </html>

Css9.html
1. <html>
2.
3. <head>
4. <style type="text/css">
5. table,
6. td,
7. th {
8. border: 1px solid #ddd;
9. text-align: left;
10. }
11.
12. table {
13. border-collapse: collapse;
14. width: 100%;
15. }
16.
17.
18. th,
19. td {
20. padding: 15px;
21. }
22. </style>
23. </head>
24.
25. <body>
26. <h2>The padding Property</h2>
27. <p>This property adds space between the border and the content in a table.</p>
28.
29. <table>
30. <tr>
31. <th>Firstname</th>
32. <th>Lastname</th>
33. <th>Savings</th>
34. </tr>
35. <tr>
36. <td>Peter</td>
37. <td>Griffin</td>
38. <td>$100</td>
39. </tr>
40. <tr>
41. <td>Lois</td>
42. <td>Griffin</td>
43. <td>$150</td>
44. </tr>
45. <tr>
46. <td>Joe</td>
47. <td>Swanson</td>
48. <td>$300</td>
49. </tr>
50. <tr>
51. <td>Cleveland</td>
52. <td>Brown</td>
53. <td>$250</td>
54. </tr>
55. </table>
56.
57. </body>
58.
59. </html>

Css10.html
1. <html>
2.
3. <head>
4. <style type="text/css">
5. table {
6. border-collapse: collapse;
7. width: 100%;
8. }
9.
10. th,
11. td {
12. padding: 8px;
13. text-align: left;
14. border-bottom: 1px solid #ddd;
15. }
16. </style>
17. </head>
18.
19. <body>
20. <h2>Bordered Table Dividers</h2>
21. <table>
22. <tr>
23. <th>Firstname</th>
24. <th>Lastname</th>
25. <th>Savings</th>
26. </tr>
27. <tr>
28. <td>Peter</td>
29. <td>Griffin</td>
30. <td>$100</td>
31. </tr>
32. <tr>
33. <td>Lois</td>
34. <td>Griffin</td>
35. <td>$150</td>
36. </tr>
37. <tr>
38. <td>Joe</td>
39. <td>Swanson</td>
40. <td>$300</td>
41. </tr>
42. <tr>
43. <td>Cleveland</td>
44. <td>Brown</td>
45. <td>$250</td>
46. </tr>
47. </table>
48.
49. </body>
50.
51. </html>

Css11.html
1. <html>
2.
3. <head>
4. <style type="text/css">
5. table {
6. border-collapse: collapse;
7. width: 100%;
8. }
9.
10. th,
11. td {
12. padding: 8px;
13. text-align: left;
14. border-bottom: 1px solid #ddd;
15. }
16.
17. tr:hover {
18. background-color: #f5f5f5;
19. }
20. </style>
21. </head>
22.
23. <body>
24.
25. <h2>Hoverable Table</h2>
26. <table>
27. <tr>
28. <th>First Name</th>
29. <th>Last Name</th>
30. <th>Points</th>
31. </tr>
32. <tr>
33. <td>Peter</td>
34. <td>Griffin</td>
35. <td>$100</td>
36. </tr>
37. <tr>
38. <td>Lois</td>
39. <td>Griffin</td>
40. <td>$150</td>
41. </tr>
42. <tr>
43. <td>Joe</td>
44. <td>Swanson</td>
45. <td>$300</td>
46. </tr>
47. <tr>
48. <td>Cleveland</td>
49. <td>Brown</td>
50. <td>$250</td>
51. </tr>
52. </table>
53.
54. </body>
55.
56. </html>

Css12.html
1. <html>
2.
3. <head>
4. <style type="text/css">
5. table {
6. border-collapse: collapse;
7. width: 100%;
8. }
9.
10. th,
11. td {
12. text-align: left;
13. padding: 8px;
14. }
15.
16. tr:nth-child(even) {
17. background-color: #f2f2f2;
18. }
19. </style>
20. </head>
21.
22. <body>
23. <h2>Striped Table</h2>
24.
25. <table>
26. <tr>
27. <th>First Name</th>
28. <th>Last Name</th>
29. <th>Points</th>
30. </tr>
31. <tr>
32. <td>Peter</td>
33. <td>Griffin</td>
34. <td>$100</td>
35. </tr>
36. <tr>
37. <td>Lois</td>
38. <td>Griffin</td>
39. <td>$150</td>
40. </tr>
41. <tr>
42. <td>Joe</td>
43. <td>Swanson</td>
44. <td>$300</td>
45. </tr>
46. </table>
47.
48. </body>
49.
50. </html>

Css13.html
1. <html>
2.
3. <head>
4. <style>
5. table {
6. border-collapse: collapse;
7. width: 100%;
8. }
9.
10. th,
11. td {
12. text-align: left;
13. padding: 8px;
14. }
15.
16. tr:nth-child(even) {
17. background-color: #f2f2f2
18. }
19.
20. th {
21. background-color: #4CAF50;
22. color: white;
23. }
24. </style>
25. </head>
26.
27. <body>
28.
29. <h2>Colored Table Header</h2>
30. <table>
31. <tr>
32. <th>Firstname</th>
33. <th>Lastname</th>
34. <th>Savings</th>
35. </tr>
36. <tr>
37. <td>Peter</td>
38. <td>Griffin</td>
39. <td>$100</td>
40. </tr>
41. <tr>
42. <td>Lois</td>
43. <td>Griffin</td>
44. <td>$150</td>
45. </tr>
46. <tr>
47. <td>Joe</td>
48. <td>Swanson</td>
49. <td>$300</td>
50. </tr>
51. <tr>
52. <td>Cleveland</td>
53. <td>Brown</td>
54. <td>$250</td>
55. </tr>
56. </table>
57. </body>
58.
59. </html>

Potrebbero piacerti anche