Dasar-dasar CSS
FunTechSec - CSS singkatan dari Cascading Style Sheets. Secara bahasa berarti lembaran gaya yang mengalir ke bawah. Kamu akan kebayang dengan istilah ini setelah nanti tau penggunaan dan bentuknya. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk mendeskripsikan penampilan sebuah dokumen markup. CSS selalu digunakan bersamaan dengan HTML, meskipun kita dapat juga menggunakannya untuk mengatur style dokumen markup lain seperti XML, SVG dan XUL. Agar lebih terbayang, coba perhatikan tiga dokumen HTML di bawah ini dan lihat perbedaan tampilannya.
CSS biasanya disimpan di dalam sebuah file berekstensi .css dan
disematkan di dalam dokumen HTML untuk memberikan style pada halaman
tersebut. Meski demikian, kita tetap dapat menambahkan sintaks CSS
langsung di dalam dokumen HTML, di dalam tag
<style></style> untuk
mengakomodir penerapan style yang hanya digunakan di
dalam dokumen tersebut. Kita juga dapat menyematkan sintaks CSS langsung
di dalam atribut style pada suatu tag HTML untuk menerapkan style yang hanya digunakan pada tag itu saja.
Dokumen yang disematkan file style.css :
<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Contoh HTML dengan CSS</h1>
<p>funtech-sec dot tk</p>
</body>
</html>
<html>
<head>
<title>HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Contoh HTML dengan CSS</h1>
<p>funtech-sec dot tk</p>
</body>
</html>
Dokumen dengan CSS di dalamnya :
<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
</head>
<body>
<h1 style="text-align:center; color:lightsteelblue;">Contoh HTML dengan CSS</h1>
<p>funtech-sec dot tk</p>
</body>
</html>
<html>
<head>
<title>HTML dengan CSS</title>
</head>
<body>
<h1 style="text-align:center; color:lightsteelblue;">Contoh HTML dengan CSS</h1>
<p>funtech-sec dot tk</p>
</body>
</html>
Sintaks CSS
h1 { text-align: left; color: blue; }
h1-> selector-
{ text-align: left; color: blue; }-> deklarasi style -
text-align-> property left-> value-
color-> property -
blue-> value
ID Selector
Elemen pada halaman dengan ID yang diberikan (pada halaman HTML yang diberikan, kamu hanya boleh memiliki satu elemen per ID).
#my-id
Memilih <p id="my-id"> atau <a id="my-id">
Memilih <p id="my-id"> atau <a id="my-id">
Satu atau lebih elemen pada halaman dengan kelas yang ditentukan (banyak class instances yang dapat muncul di sebuah halaman).
Memilih<p class="my-class"> dan <a class="my-class">
Attribute selector
Satu atau lebih elemen pada halaman dengan atribut yang ditentukan.
Memilih <img src="myimage.png"> namun tidak memilih <img>
Pseudo-class selector
Satu atau lebih elemen yang ditentukan, namun hanya ketika elemen tersebut sedang berada pada state tertentu, seperti sedang di-hover.
a:hover
Memilih <a>, namun hanya ketika mouse pointer sedang meng-hover link.
Memilih <a>, namun hanya ketika mouse pointer sedang meng-hover link.
Dan masih banyak lagi Sintaks-sintaks CSS lainnya, mungkin untuk saat ini sampai disini dulu pengetikan artikel ini.
Sekian pengetikan dari artikel ini,
mohon maaf bila ada salah pengetikan atau lainnya, semoga artikel ini
bermanfaat, Terimakasih.
0 Response to "Dasar-dasar CSS"
Post a Comment