 SAYA BUAT MAKALAH INI UNTUK MEMENUHI TUGAS

PELAJARAN PWPB

MATERI CSS
 NAMA : WINIAWATI ‘XI RPL 1’

1. Font Styling
Properti font-style kebanyakan digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai :
1) normal - Teks ditampilkan secara normal
2) italic - Teks ditampilkan dengan huruf miring
3) oblique - Teksnya "condong" (miring sangat mirip dengan miring,
tetapi kurang didukung).
Contoh kode :
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
 font-style: oblique;
}
2. Background
Properti ini digunakan untuk menentukan efek latar belakang elemen.
Macam macam properti latar belakang CSS :
background-color
Properti background-color menentukan warna latar belakang sebuah
elemen.
Contoh kode :
 body {
  background-color: lightblue;
}

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

background-image
Properti background-image menentukan gambar untuk digunakan sebagai
latar belakang elemen. Secara default, gambar diulang sehingga menutupi
seluruh elemen.
Contoh kode :
body {
  background-image:url("paper.gif");
}
background-repeat
Secara default, properti background-image mengulang gambar secara
horizontal dan vertikal.
Beberapa gambar harus diulang hanya secara horizontal atau vertikal.
Contoh kode :
 body {
  background-image:url("gradient_bg.png");
}
Jika gambar di atas hanya berulang secara horizontal (background-repeat:
repeat-x;), latar belakang akan terlihat lebih baik :
body {
  background-image:url("gradient_bg.png");
  background-repeat: repeat-x;
}
background-attachment
Menspesifikasikan properti apakah gambar latar belakang harus gulir atau
perbaikan (tidak akan gulir dengan sisa halaman):
Tentukan bahwa gambar latar belakang harus bergulir dengan sisa
halaman.
Contoh kode :
body {
  background-image:url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
background-Shorthand property
Untuk mempersingkat kode, memungkinkan juga untuk menentukan
semua properti latar belakang dalam satu properti. Ini disebut properti
steno.
Gunakan properti shorthand untuk mengecek properti latar belakang
dalam satu deklarasi.
Contoh kode :
 body {
  background: #ffffff url("img_tree.png")
no-repeat right top;
}

3. Pseudo Class
Kelas semu digunakan untuk menentukan keadaan khusus dari suatu
elemen.
Misalnya, ini dapat digunakan untuk:
• Mendesain elemen saat pengguna mengarahkan mouse ke atasnya
• Tautan tautan belum dikunjungi
• Gaya pada sebuah elemen saat mendapatkan fokus
Sintaks dari pseudo-class :
selector:pseudo-class {
  property: value;
}
Kelas Jangka Pseudo
Tautan dapat diakses dengan berbagai cara :
/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */

 a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}
• Pseudo-Elements
Elemen semu CSS digunakan untuk pembantuan gaya bagian tertentu
dari sebuah elemen.
Misalnya, ini dapat digunakan untuk:
• Style pada huruf pertama, atau baris, dari sebuah elemen
• Sisipkan konten sebelum, atau setelah, konten elemen
Sintaksis
Sintaks dari pseudo-elemen:
selector::pseudo-element { 
  property: value; 
}
Elemen semu :: baris pertama
The first-linepseudo-elemen digunakan tinjauan untuk review Menambah
gaya khusus tinjauan untuk review Baris Pertama Dari Teks.
Contoh berikut memformat baris pertama teks di semua elemen <p>:
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
4. Text Styling
Pemformatan Teks
Teks ini diberi gaya dengan beberapa properti pemformatan teks. Judul
menggunakan properti text-align, text-transform, dan color. Paragraf
diberi indentasi, disejajarkan, dan spasi antar karakter ditentukan. Garis
bawah penghapusan dari link berwarna.
Macam-macam text styling :
• Text Color
Color Properti digunakan untuk review mengatur warna Teks. Warna
ditentukan oleh:
° nama warna - seperti "merah"
° nilai HEX - seperti "# ff0000"
° nilai RGB - seperti "rgb (255,0,0)"
Warna teks default untuk halaman ditentukan di pemilih isi.
Contoh kode :
body {
  color: blue;
}

h1 {
  color: green;
}

Contoh properti untuk background-color dan color properti

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
   color: white;
}
• Text Alignment
Properti digunakan untuk review mengatur penyelarasan horisontal Teks.
Sebuah teks bisa diratakan kiri atau kanan, di tengah, atau diratakan.

Contoh berikut teks rata tengah, dan kiri dan kanan (perataan kiri adalah
default jika arah teks kiri-ke-kanan, dan perataan kanan default jika arah
teks kanan-ke-kiri) :

Contoh kode :

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Setiap baris diregangkan sehingga setiap baris memiliki lebar yang sama,
serta margin kanan dan kiri lurus. Contoh

div {
  text-align: justify;
}
• Text Decoration
Properti ini digunakan set untuk review atau Menghapus Dekorasi dari
Teks.
Nilai text-decoration: none;ini sering digunakan untuk menghilangkan
garis bawah dari tautan:
Contoh kode :
a {
  text-decoration: none;
}
Nilai lainnya text-decoration digunakan untuk menghias text
Contoh kode :
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

• Text Transformation
Properti ini digunakan untuk review menentukan besar dan huruf Kecil
hearts Teks.
Ini dapat digunakan untuk mengubah semuanya menjadi huruf besar atau
kecil, atau menggunakan huruf besar untuk huruf pertama dari setiap
kata:
Contoh kode :
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
• Text Spacing
Teks ini ada beberapa macam di antaranya :
1) Indentasi Teks
Properti ini digunakan untuk review menentukan indentasi baris pertama
dari teks
Contoh kode :
p {
  text-indent: 50px;
}
2) Spasi Huruf
Properti ini digunakan untuk review menentukan ruang antara karakter
hearts Teks.
Contoh berikut menunjukkan cara menambah atau mengurangi spasi
antar karakter
Contoh kode :
h1 {
  letter-spacing: 3px;
 }

h2 {
  letter-spacing: -3px;
}
3) Tinggi garis
Properti ini digunakan untuk review menentukan ruang antara garis
Contoh kode :
p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
4) Spasi Kata
Properti ini digunakan untuk review menentukan ruang antara kata-kata
hearts Sebuah Teks.
Contoh berikut menunjukkan cara menambah atau mengurangi spasi
antar kata:
Contoh kode :
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
5) Ruang Putih
 Menentukan bagaimana putih-ruang di dalam tugasnya.
Contoh ini menunjukkan cara pembungkusan teks di dalam elemen
Contoh kode :
p {
  white-space: nowrap;
}
• Text Shadow
Properti ini menambahkan bayangan untuk review teks.
Dalam penggunaan yang paling sederhana, Anda hanya menentukan
bayangan horizontal (2px) dan bayangan vertikal (2px)
Contoh kode :
h1 {
  text-shadow: 2px 2px;
}
Selanjutnya, tambah warna merah ke bayangan
h1 {
  text-shadow: 2px 2px red;
}
Kemudian, tambahkan efek blur 5px ke bayangan
h1 {
  text-shadow: 2px 2px 5px red;
}

5. Selector
Digunakan untuk "menemukan" (atau memilih) HTML yang ingin Anda
gaya. Kita dapat pemilih pemilih CSS menjadi lima kategori :
1) Selektor sederhana (pilih elemen berdasarkan nama, id, kelas)
 2) Pemilih kombinator (pilih elemen berdasarkan hubungan tertentu
di antara mereka)
3) Pemilih kelas semu (pilih elemen berdasarkan status tertentu)
4) Elemen pemilih semu (pilih dan gaya bagian dari elemen)
5) Atribut selektor (pilih elemen berdasarkan atribut atau nilai atribut)
CSS elemen pemilih
Elemen pemilih memilih elemen HTML berdasarkan nama elemen.
Di sini, semua <p> elemen pada halaman akan diratakan tengah, dengan
warna teks merah.
Contoh kode :
p {
  text-align: center;
  color: red;
}
6. Inheritance
Definisi dan Penggunaan
Kata kunci inherit menentukan bahwa properti harus mewarisi nilainya
dari elemen induknya. Kata kunci warisan dapat digunakan untuk properti
CSS apa pun, dan pada elemen HTML apa pun.
Sintaks CSS nya :
property: inherit;
Setel warna teks untuk <span> elemen menjadi biru, kecuali elemen di
dalamnya dengan class = "extra"
Contoh kode :
span {
    color: blue;
}
 .extra span {
    color: inherit;
}
7. Specificity
Menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2
atau lebih aturan pada sebuah elemen yang sama, maka aturan paling
spesifiklah yang akan dipakai oleh browser.

Nilai specificity pada CSS bisa dihitung sebagai berikut:

• Element Selector, yaitu selector yang berupa tag-tag html, contohnya
div, ul, li, a
nilai specificity = 1 (0,0,1)
• Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya
.menu untuk elemen dengan class="menu"
nilai specificity = 10 (0,1,0)
• ID Selector, yaitu selector yang diawali dengan tanda #, contohnya
#sidebar untuk elemen dengan id="sidebar"
nilai specificity = 100 (1,0,0)

Contoh 1

a { color: red; }
a { color: green; }

Kedua selector tersebut memiliki specificity yang sama, karena itu aturan
yang akan dipakai adalah yang terakhir (paling bawah), sehingga elemen
<a> (link) akan berwarna hijau.

Contoh 2
 #sidebar ul.menu li a { color: red; }
ul.menu li a { color: purple; }
ul li a { color: green; }
li a { color: yellow; }
a { color: teal; }

Kode di atas adalah beberapa aturan CSS untuk sebuah elemen link
(<a>). Kode HTML nya sebagai berikut :

<div id="sidebar">
<h2>Menu</h2>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="guestbook.html"
style="color:silver">Guestbook</a></li>
</ul>
</div>