CSS - Pendahuluan_20241113_094744_0000.pdf

CSS merupakan singkatan dari Cascading Style Sheet.
Bahasa ini merupakan bahasa kedua yang harus dipelajari saat ingin
membuat sebuah website.
CSSadalahbahasayangdigunakanuntukmembuatdesaindihalaman
website.
APA ITU CSS ?
PWPB – XI RPL
SMK Negeri 1
Jatiroto

FRONT-
END
DEVELOP
ER
akan membuat
halaman web
berdasarkan
desain dari
desainer.

WEBSITE
Tanpa
menggunakan CSS,
kita tidak mungkin
akan bisa membuat
web berdasarkan
desain yang
ditentukan desainer.

TanpaCSS
CSSPADAHALAMANWEBSITE
Dengan
CSS
PWPB – XI RPL
SMK Negeri 1
Jatiroto

CSS
CASSCADING STYLE SHEET
Aturan yang digunakan untuk menampilkan elemen / tag HTML (warna , jenis
huruf dll)
Dibuat terpisah dengan HTML
bertujuan untuk memisahkan konten dan style
1 CSS dapat digunakan untuk banyak halaman
1 halaman HTML dapat terlihat berbeda jika menggunakan CSS yang berbeda
pula

CSS
1 CSS DAPAT DIGUNAKAN UNTUK BANYAK HALAMAN

CSS
sebuah bahasa untuk mengatur
tampilan web sehingga terlihat lebih
menarik dan indah.
Dengan CSS, kita dapat mengatur
layout (tata letak), warna, font, garis,
background, animasi, dan lain-lain.

Selector
Kunci untuk memilih HTML yang mau kita atur
dengan CSS.
STRUKTUR KODE CSS

Blok Deklarasi
Tempat kita menuliskan atribut CSS yang akan diberikan ke
selector.
Artinya, kita akan mengatur ukuran font dari tag <p> sebesar
13pt dan memberikan warna backround royalblue.
Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu
ditutup dengan }.
STRUKTURKODECSS

Properti dan nilainya
Atribut atau sekumpulan aturan yang diberikan kepada elemen yang dipilih.
Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat
satu properti, boleh tidak menggunakan titik koma.
Properti harus ditulis di dalam blok deklarasi.
STRUKTURKODECSS

Ada 3 cara untuk menulis CSS di HTML antara lain:
CARAMENULISCSS
InternalCSS Eksternal CSS
InlineCSS

InternalCSSadalahkodeCSSyangditulisdidalamtag<style>.
Internal CSS juga dikenal dengan sebutan Embeded CSS. Tag
<style> biasanya ditulis di dalam tag <head>.
Bisa juga ditulis di dalam <body>, namun lebih banyak ditulis di
dalam
<head>.
INTERNALCSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.
Eksternal CSS ditulis disebuah file khusus yang berekstensi .css. Sebagai
contoh, saya akan membuat sebuah file bernama style.css.
Danuntukmemanggilfilecsstersebut.Kitamenggunakantagdibawahini:
EKSTERNAL CSS

EKSTERNAL CSS
index.html
style.css

Inline CSS adalah kode CSS yang ditulis langsung pada
atribut elemen HTML.
Setiap elemen HTML memiliki atribut style, di sana lah
inline CSS ditulis.
Catatan: Penulisan Inline CSS ini tidak direkomendasikan
karena setiap elemen HTML harus diberi atribut.
I N L I N E C S S

CSS
INLINE STYLE CSS
<h1 style = “color : blue;”>SMK NEGERI 1 JATIROTO
INTERNAL STYLE CSS
<style>
h1 {color : blue;}
</style>
EXTERNAL STYLE CSS
h1 {color : blue;}

CSS - Pendahuluan_20241113_094744_0000.pdf

More Related Content

Similar to CSS - Pendahuluan_20241113_094744_0000.pdf

Recently uploaded

CSS - Pendahuluan_20241113_094744_0000.pdf