Pernah meliat Code seperti yang di atas? kalau belum nama code seperti itu adalah CSS.
CSS adalah singkatan dari Cascading Style Sheets
Kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Untuk dapat belajar CSS sebaiknya harus memahami HTML.
Keuntungan kita bila menggunakan CSS adalah
Lebih Praktis
Mempersingkat kode HTML
Mempermudah pembuatan tampilan halaman HTML
Sintak CSS terdiri dari : selector, property, value
Selector : bagian yang akan diatur/diformat
Property : bagian dari Selector yang akan diatur
Value : Nilai dari pengaturannya
Contoh :
h1 { color: red }
Contoh HTMl yang ber isi CSS
<html>
<head>
<style type="text/css">
h1{color:red}
</style>
</head>
<body>
<h1>Heading 1</h1>
</body>
</html>
<head>
<style type="text/css">
h1{color:red}
</style>
</head>
<body>
<h1>Heading 1</h1>
</body>
</html>
Bila anda mempraktekkanya maka akan tampak Tulisan ‘Heading 1’ Berwarna merah.
h1 maksudnya apa yang akan di modifikasi pada text yang meggunakan tag h1
h1 maksudnya apa yang akan di modifikasi pada text yang meggunakan tag h1
Contoh berikut ini menggunakan tag h1 untuk beberapa text.
<html>
<head>
<style type="text/css">
h1, h2, h3{color:red}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</body>
</html>
<head>
<style type="text/css">
h1, h2, h3{color:red}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</body>
</html>
Contoh berikutnya apabila anda ingin menambahkan Property pada Text yang meggunakan h1
<html>
<head>
<style type="text/css">
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</body>
</html>
<head>
<style type="text/css">
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</body>
</html>
Penjelasan
h1,h2,h3 { = Tag tag
color:red; = Warna
font-family:arial; = Jenis Font yang di gunakan
font-size:150%; = Ukuran font
}
color:red; = Warna
font-family:arial; = Jenis Font yang di gunakan
font-size:150%; = Ukuran font
}
=======================================================
Q : Di contohkan menggunakan h1, bisa yang lain?
A : Bisa saja sesuai kebutuhan namun harus ingat, bila a jangan A, case sensitive
A : Bisa saja sesuai kebutuhan namun harus ingat, bila a jangan A, case sensitive
Q : Bagaimana bila ingin membedaka style antara h1, h2 dst
A : mudah saja , pisahkan dia, contoh
<style type="text/css">
h1 {
color:red;
font-family:arial;
font-size:150%;
}
h2,h3 {
color:black;
font-family:times new roman;
font-size:50%;
}
</style>
bila dalam kasus ini sebaiknya menggunakan External CSS karena mempermudah user dalam pembuatanya(di jelaskan di bawah)
Q : Susah/Ribet?
A : Kalau sudah biasa pasti bisa, bisa karena biasa XD
A : mudah saja , pisahkan dia, contoh
<style type="text/css">
h1 {
color:red;
font-family:arial;
font-size:150%;
}
h2,h3 {
color:black;
font-family:times new roman;
font-size:50%;
}
</style>
bila dalam kasus ini sebaiknya menggunakan External CSS karena mempermudah user dalam pembuatanya(di jelaskan di bawah)
Q : Susah/Ribet?
A : Kalau sudah biasa pasti bisa, bisa karena biasa XD
=======================================================
Bila anda ingin menambahkan komentar di dalam coding CSS maupun HTMl anca cukup mengetikkan seperti ini
/* Komentar anda disini */
Anda bisa meletaakanya dimanapun karena ketika proses load/pembacaaan line seperti ini akan di lewati.
Secara umum ada beberapa cara menambahkan kode CSS ke dalam dokumen HTML yaitu :
1. Inline CSS
2. Embedded CSS
3. External CSS
4. Import CSS
Inline CSS
Contoh
<html>
<head>
</head>
<body>
<p style="color:blue">
Ini adalah sebuah paragraf.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="color:blue">
Ini adalah sebuah paragraf.
</p>
</body>
</html>
Di sini CC ada pada line <p style="color:blue">, css di ketikkan langsung pada setiap text yang ingin di berikan CSS, banyak kekuranganya dalam Inline CSS, coba bayangkan bila textnya banyak dan dibuat tidak ingin sama satu dengan yang lainya, perlu berapa line css kah?
Embedded CSS
Contoh
<html>
<head>
<style type="text/css">
p{
color:blue;
}
</style>
</head>
<body>
<p>Ini adalah sebuah paragraf.</p>
</body>
</html>
<head>
<style type="text/css">
p{
color:blue;
}
</style>
</head>
<body>
<p>Ini adalah sebuah paragraf.</p>
</body>
</html>
Di sini CSS di letakkan di awal Coding(code) dan bila diperlukan akan di panggil melalu tag yang di sesuaikan, di contoh menggunakan <p> Text </p>. CSS jenis ini cocok di gunakan bila hanya untuk 1 Halaman File. Bila ingin menggunakanya anda hanya harus memperbanyak penggunaan tag <p> [misalkan sesuai contoh] namun bila ingin menggunakanya pada halaman lain anda harus mengetiknya lagi atau mengcopynya saja.
External CSS
Contoh
/* style-1.css */
p {
font-family: arial;
font-size: small;
text-decoration:underline;
}
h1 {
color: red;
}
p {
font-family: arial;
font-size: small;
text-decoration:underline;
}
h1 {
color: red;
}
Note : di buat dalam File CSS, di save dengan extensi .*css
Bila ingin menggunakan/memanggil SCC yang kita save tadi kuta Cuma perlu memanggilnya .
<html>
<head>
<link rel="stylesheet" href="style-1.css" type="text/css">
</head>
<body>
<h1>Judul Paragraf</h1>
<p>Ini adalah sebuah paragraf.</p>
</body>
</html>
<head>
<link rel="stylesheet" href="style-1.css" type="text/css">
</head>
<body>
<h1>Judul Paragraf</h1>
<p>Ini adalah sebuah paragraf.</p>
</body>
</html>
External CSS merupakan Primadonanya jenis CSS yang ada, kebanyakan para Proggramer menggunakan External CSS karea simple, sekalia buat untuk semuanya.Jadi kita hanya perlu membuat 1 kali dan me loadnya berkali kali tampa perlu susah susah.
Import CSS
Kita juga dapat juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.