Cascading Style Sheet (CSS)
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS 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 markup 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.
Css1.html
<html>
<head>
<title>Contoh Pertama</title>
<style type="text/css"> body {background-color: yellow}
h1 {background-color: red}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraf</p>
</body>
</html>
Css2.html
<HTML>
<HEAD>
<TITLE>Percobaan CSS : menulis langsung pada tag html </TITLE> </HEAD>
<BODY style="color: blue">
<P style="text-align: center; text-transform: uppercase;
color: red;font-weight: bold"> Pemrograman</P> Internet 1
</BODY>
</HTML>
Css3.html
<html>
<head>
<style type="text/css">
body
{
background-image:url(PATH/img.jpg');
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Css4.html
<html>
<head>
<title>kotak dengan css</title>
</head>
<style type="text/css">
.kotak
{
border:2px solid; border-color:black; height:100px; width:600px;
}
</style>
<body>
<div class=kotak></div>
</body>
</html>
Css5.html
<html>
<head>
<style type="text/css">
body
{
background-image:
url(PATH/img.jpg');
background-repeat: no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
</body>
</html>
Selesai. Program di atas merupakan contoh dalam eksekusi CSS. Selamat mencoba! Semoga bermanfaat.
Css1.html
<html>
<head>
<title>Contoh Pertama</title>
<style type="text/css"> body {background-color: yellow}
h1 {background-color: red}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraf</p>
</body>
</html>
Css2.html
<HTML>
<HEAD>
<TITLE>Percobaan CSS : menulis langsung pada tag html </TITLE> </HEAD>
<BODY style="color: blue">
<P style="text-align: center; text-transform: uppercase;
color: red;font-weight: bold"> Pemrograman</P> Internet 1
</BODY>
</HTML>
Css3.html
<html>
<head>
<style type="text/css">
body
{
background-image:url(PATH/img.jpg');
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Css4.html
<html>
<head>
<title>kotak dengan css</title>
</head>
<style type="text/css">
.kotak
{
border:2px solid; border-color:black; height:100px; width:600px;
}
</style>
<body>
<div class=kotak></div>
</body>
</html>
Css5.html
<html>
<head>
<style type="text/css">
body
{
background-image:
url(PATH/img.jpg');
background-repeat: no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
</body>
</html>
Selesai. Program di atas merupakan contoh dalam eksekusi CSS. Selamat mencoba! Semoga bermanfaat.
Semoga artikel Cascading Style Sheet (CSS) bermanfaat bagi Anda. Jika kamu suka dengan artikel Cascading Style Sheet (CSS) ini, like dan bagikan ketemanmu.
Post a Comment