TUTORIAL CSS - BAB 1 SYNTAX CSS
Belajar pemrograman
Tutorial dari w3schools.com
Bahasa pemrograman CSS
BAB 1 – SYNTAX CSS
Selektor pada CSS sama seperti elemen pada HTML
Setiap pendeklarasian harus mengandung nama properti dan value atau nilai yang keduanya dipisahkan oleh colon (:)
Dan kemudian di akhiri dengan semicolon (;)
Css selector
Digunakan untuk mencari atau memilih elemen HTML berdasarkan nama, id, class, atribut, dll.
Terdapat beberapa macam yaitu:
Element selector
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align : center;
color : red;
}
</style>
</head>
<body>
<p> setiap paragraf akan terkena efek dari style.</p>
<p>seperti ini juga.</p>
</body>
</html>
ID selector
Untuk id selector harus menggunakan awalan tanda #
Untuk nama id-nya tidak boleh diawali dengan angka
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align : center;
color : red;
}
</style>
</head>
<body>
<p id=”para1”> setiap paragraf akan terkena efek dari style.</p>
<p>namun ini tidak akan terkena efek dari style</p>
</body>
</html>
Class selector
Untuk memilih elemen dengan kelas tertentu, tulis class dengan awalan titik (.), lalu di ikuti dengan nama class-nya.
Untuk nama kelas tidak boleh diawali dengam angka.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align : center;
color : red;
}
</style>
</head>
<body>
<h1 class=”center”>heading ini berwarna merah dan rata tengah.</h1>
<p class=”center”> paragraf ini berwarna merah dan rata tengah.</p>
</body>
</html>
Namun jika ingin hanya elemen html tertentu saja yang terkena efek dari class, bisa seperti contoh berikut
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align : center;
color : red;
}
</style>
</head>
<body>
<h1 class=”center”>heading ini tidak akan terkena efek.</h1>
<p class=”center”> paragraf ini berwarna merah dan rata tengah.</p>
</body>
</html>
Dan untuk pemilihan style-nya dapat juga menggunakan dua class atau lebih secara bersamaan, seperti berikut:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align : center;
color : red;
}
p.large {
font-size : 300%;
}
</style>
</head>
<body>
<h1 class=”center”>heading ini tidak bisa terkena efek.</h1>
<p class=”center”> paragraf ini berwarna merah dan rata tengah.</p>
<p class=”center large”>paragraf ini berwarna merah, rata tengah, dan ukuran tulisan yang sangat besar.</p>
</body>
</html>
Grouping selector
Jika kalian memiliki elemen style seperti ini
h1 {
text-align : center;
color : red;
}
h2 {
text-align : center;
color : red;
}
p {
text-align : center;
color : red;
}
Untuk meminimalkan kode, gunakan group selector, dengan tanda koma (,) sebagai tanda pemisah dari setiap selektor, seperti ini
<!DOCTYPE html>
<html>
<head>
<style>
H1, h2, p {
Text-align : center;
Color : red;
}
</style>
</head>
<body>
<h1> ini heading dengan elemen h1 </h1>
<h2>ini heading dengan elemen h2</h2>
<p>ini paragraf</p>
</body>
</html>
Komentar
Posting Komentar