Loading...
Internet

CSS

Definisi CSS – Singkatan dari “Cascading Style Sheet.” cascading style sheet yang digunakan untuk memformat tata letak halaman Web. Mereka dapat digunakan untuk menentukan gaya teks, ukuran tabel, dan aspek lain dari halaman Web yang sebelumnya hanya bisa didefinisikan dalam sebuah halaman HTML.

CSS membantu pengembang Web menciptakan tampilan seragam di beberapa halaman dari sebuah situs Web. Daripada mendefinisikan gaya tabel masing-masing dan setiap blok dari teks dalam halaman HTML tersebut, gaya yang biasa digunakan perlu didefinisikan hanya sekali dalam dokumen CSS. Setelah gaya didefinisikan dalam cascading style sheet, dapat digunakan oleh setiap halaman direferensikan dari file CSS. Plus, CSS membuatnya mudah untuk mengubah gaya di beberapa halaman sekaligus. Misalnya, seorang pengembang Web mungkin ingin meningkatkan ukuran teks default dari 10pt menjadi 12pt untuk lima puluh halaman dari sebuah situs Web. Jika semua halaman direferensikan dari file CSS yang sama, maka ukuran teks hanya perlu diubah pada style sheet dan semua halaman akan menampilkan teks yang lebih besar.

Sementara CSS sangat bagus untuk menciptakan gaya teks, akan sangat membantu untuk memformat aspek lain dari tata letak halaman web juga. Misalnya, CSS dapat digunakan untuk mendefinisikan padding tabel, gaya, ketebalan, dan warna border tabel, dan padding sekitar gambar atau elemen lainnya. CSS memberikan pengembang Web kontrol yang tepat agar halaman Web terlihat lebih baik. Inilah sebabnya mengapa kebanyakan halaman Web saat ini menggabungkan Cascading style sheet.

Contoh Kode CSS

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

p.five {
border-style: double;
border-width: 15px;
}

p.six {
border-style: double;
border-width: thick;
}

p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class=”one”>Some text.</p>
<p class=”two”>Some text.</p>
<p class=”three”>Some text.</p>
<p class=”four”>Some text.</p>
<p class=”five”>Some text.</p>
<p class=”six”>Some text.</p>
<p class=”seven”>Some text.</p>

<p><b>Note:</b> The “border-width” property does not work if it is used alone.
Always specify the “border-style” property to set the borders first.</p>

</body>
</html>

Tagged
Leave a Reply

Your email address will not be published. Required fields are marked *