-->
Mengenal Css Atau Cascading Style Sheets

Mengenal Css Atau Cascading Style Sheets

belajar komputer

CSS ialah kependekan dari Cascading Style Sheets. Berupa kode-kode yang akan menyebabkan bagaimana tampilan halaman web di browser nantinya.

 gambar. berguru komputer 1

CSS bertujuan untuk mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Bagian-bagian menyerupai colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga "styles".

CSS yang sudah didefinisikan, yang akan memberitahukan browser bagaimana suatu halaman web akan ditampilkan. Saat memakai CSS, kita tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen secara berulang-ulang. Setelah kita menciptakan sebuah definisi CSS, kita sanggup menyimpan isyarat tersebut sekali saja dan sanggup kembali menggunakannya jikalau diperlukan.

Kode isyarat CSS di tulis di antara tag <style> … </style> yang disisipkan diantara tag HTML <head> … </head>

Berikut penulisannya:

<html>
<head><title>belajar komputer dasar CSS</title>
<style>
… css nya disini
</style>
</head>
<body>

</body>
</html>

Ada beberapa bentuk penulisan css:

Bentuk 1:

tulisan_miring {
font-family: Arial, Verdana, ‘Times New Roman’;
font-size: 18px;
font-style: italic;
}

Artinya: kita menciptakan css untuk memformat teks dengan nama tulisan_miring dimana pengaturannya ialah jenis karakter yang digunakan ialah Arial, jikalau tidak ada Arial maka yang digunakan ialah Verdana, dst, dengan size fontnya ialah 18 pixel, serta style fontnya ialah italic atau teks miring.

Cara pemakaian css pada teks:

<html>
<head><title>belajar komputer dasar CSS</title>
<style>
tulisan_miring {
font-family: Arial, Verdana, ‘Times New Roman’;
font-size: 18px;
font-style: italic;
}
</style>
</head>
<body>

<tulisan_miring>
Semua teks disini akan tercetak miring <br>
Semua teks disini akan tercetak miring <br>
Semua teks disini akan tercetak miring <br>
Semua teks disini akan tercetak miring <br>
Semua teks disini akan tercetak miring <br>
</tulisan_miring>

</body>
</html>

kesannya di browser:


 gambar. berguru komputer 1


 Bentuk 2, dengan memberi tanda titik . pada awal tulisan_miring:

.tulisan_miring {
        font-family: Arial, Verdana, 'Times New Roman';
        font-size: 18px;
        font-style: italic;
        }

Artinya sama dengan diatas, untuk pemakaiannya CSS ini dipanggil dengan perintah div class="" menyerupai dibawah ini:

<div class="tulisan_miring">
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
</div>

Hasilnya sama menyerupai diatas pada gambar. berguru komputer 1


Bentuk 3, dengan menunjukkan tanda pagar # pada tulisan_miring:

#tulisan_miring {
        font-family: Arial, Verdana, 'Times New Roman';
        font-size: 12px;
        font-style: italic;
        }

Artinya sama dengan diatas, untuk pemakaiannya CSS ini dipanggil dengan perintah div id="" menyerupai dibawah ini:

<div id="tulisan_miring">
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
Semua teks disini akan tercetak miring. <br>
</div>

Hasilnya sama menyerupai diatas pada gambar. berguru komputer 1

Semoga bermanfaat, amin.

Baca juga: