MODUL

CASCADING STYLE SHEETS

( CSS )

DISUSUN OLEH :
Ummy Gusti Salamah, S.ST,. MIT

JAKARTA GLOBAL UNIVERSITY

Jl. Boulevard Grand Depok City, Tirtajaya, Kec. Sukmajaya
Kota Depok, Jawa Barat 16412

1
 KATA PENGANTAR

Puji syukur kami panjatkan kepada kehadirat Allah SWT. Yang telah memberikan rahmat dan hidayah-
Nya sehingga kami dapat menyelesaikan tugas Makalah yang berjudul Tutorial Cascading Style Sheets.
Salah satu tujuan dari penulisan makalah ini adalah untuk menambah wawasan tentang Css atau yang
berkepanjangan Cascading Style Sheets.

Saya menyadari bahwa isi laporan ini masih banyak yang harus saya perbaiki dan jauh dari kata
sempurna tetapi saya sudah berusaha sebaik dan semaksimal mungkin sesuai dengan
kemampuan yang saya miliki.
Maka saya saya sangat berharap sekali bahwa pembaca dapat memberikan saran dan juga kritik
di akhir halaman yang sudah saya sediakan. Supaya saya dapat memperbaiki kesalahan saya dan
tidak terulang pada masa yang akan mendatang.
Semoga dengan adanya makalah ini dapat bermanfaat bagi kita semua terutama terhadap
pembacanya.

Bogor, 15 Februari 2021

Ummy Gusti Salamah, S.ST,. MIT

2
 DAFTAR ISI

KATA PENGANTAR ................................................................................................................ 2

DAFTAR ISI ............................................................................................................................... 3
SEJARAH CSS ........................................................................................................................... 4
PERKEMBANGAN CSS ........................................................................................................... 4
1. CSS 1 .............................................................................................................................. 4
..........................................................................................................................................
2. CSS 2 .............................................................................................................................. 4
3. CSS 3 .............................................................................................................................. 5
PENGERTIAN CSS ................................................................................................................... 5
TUTORIAL CSS ........................................................................................................................ 5
 CARA PENULISAN CSS .............................................................................................. 5
 MARGIN DAN PADDING CSS ................................................................................... 10
 MENGATUR FONT ...................................................................................................... 14
 MENGATUR FORMAT TEXT ..................................................................................... 16
 MENGATUR WARNA TEXT ....................................................................................... 17
 MENGATUR FORMAT TEXT CSS ............................................................................. 17
 MENGENAL POSITION CSS ....................................................................................... 19
 MENGUBAH BORDER STYLE ................................................................................... 25
 MENGATUR UKURAN BORDER CSS ...................................................................... 27
 MEMBERI WARNA PADA BORDER ......................................................................... 28
 CARA CEPAT MEMANIPULASI BORDER ............................................................... 31
 MENGUBAH LIST ........................................................................................................ 33
 MENGGUNAKAN FLOAT CSS .................................................................................. 36
 CARA MEMBUAT TABLE DENGAN CSS ................................................................ 37
 CARA MENGGANTI FONT DENGAN MENGGUNAKAN CSS .............................. 42
 MENGATUR HYPERLINK DENGAN CSS ................................................................ 48
PERMASALAHAN DAN SOLUSI ........................................................................................... 50
RINGKASAN MATERI ............................................................................................................ 52
DAFTAR PUSAKA .................................................................................................................. 53
CATATAN ................................................................................................................................. 54

3
 SEJARAH CSS
Awal muncul CSS (Cascading Style Sheet) setelah munculnya SGML (Standard Generalized
Markup Language) pada tahun 1970-an, dan menjadi sebuah teknologi internet yang diresmikan
oleh  W3C (world wide web consortium) pada tahun 1996.Format dasar dari CSS yang biasa
digunakan oleh orang-orang merupakan ide dari Hakon Wium Lie dalam proposalnya yang
berjudul Cascading HTML Style Sheet ( CHSS) pada tahu 1995 pada konferensi W3C (world
wide web consortium) di Chicago, Illinois.
Setelah itu Lie mengembangkan standar dari CSS dengan temannya yang bernama Bert Bos.
Setelah diresmikan oleh W3C tahun 1996, pada tahun tersebut CSS level 1 resmi dipublikasikan
pada bulan Desember. Proyek CSS level 1 ini juga didukung oleh programmer perusahaan
ternama yaitu Microsoft yang bernama Thomas Reardon.
Dalam penetapan CSS level 1 yaitu bertujuan untuk mengurangi tag-tag baru pada Netscape dan
Internet explore, dimana keduanya bersaing mengembangkan tag-tag mereka sendiri untuk
tampilan web.

PERKEMBANGANNYA CSS
1. CSS 1
Pada tanggal 17 Agustus 1996 pada acara World Wide Web Consortium (W3C)
menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web.
Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet
Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri
untuk mengatur tampilan web. CSS 1 mendukung pengaturan tampilan dalam hal :
 Font (Jenis ketebalan)
 Warna
 Teks
 Background
 Text attributes ( misalnya spasi antar baris, kata dan  huruf. )
 Posisi teks
 Gambar
 Table
 Margin
 Border
 Padding

2. CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard
CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua
atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality
kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan
terhadap format dokumen agar bisa ditampilkan di printer. 

4
3. CSS 3
CSS 3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam
mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya
animasi warna dan animasi 3D. Dengan CSS 3 di Design dimudahkan dalam hal
kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media
query. Ada beberapa fitur baru yaitu :
 Multiple background
 Border-radius
 Drop-shadow
 Border-image
 CSS-Math
 CSS Object Model
  Animasi
 Beberapa efek teks
 Beberapa efek pada kotak

PENGERTIAN

 PENGERTIAN
Pengertian CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai dengan
namanya CSS memiliki sifat ”style sheet language” yang berarti bahasa pemrograman
yang di gunakan untuk web design. CSS adalah bahasa pemrograman yang di gunakan
untuk men-design sebuah halaman website, CSS menggunakan penanda yang kita kenal
dengan Id dan Class. Seiring berkembang nya dunia pemrograman dan teknologi, CSS
tidak cuma di gunakan di HTML dan XHTML saja. tapi sudah bisa di gunakan untuk
mendesign tampilan aplikasi android.

TUTORIAL CSS

 CARA PENULISAN CSS

CSS (Cascading Style Sheet) merupakan sebuah bahasa pemrograman web yang
memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari
HTML seperti elemen dan tag. dengan menggunakan CSS kita dapat mengatur ukuran,
warna dan bentuk dari element HTML. Mengganti font, mengatur margin dan mengatur
padding dan banyak lagi yang dapat di lakukan menggunakan CSS untuk mempercantik
atau men-design sebuah halaman website. CSS menggunakan selector (id dan class)
untuk menentukan element yang akan di modifikasi atau yang akan di beri sentuhan css.
jika di ibaratkan HTML sebagai kerangka utama, maka CSS berfungsi sebagai dekorasi
pada kerangka tersebut. Ada tiga teknik metode penulisan CSS, yaitu :

5
1. Inline CSS Style
Teknik penulisan Syntax CSS dengan Inline Style adalah teknik cara penulisan syntax
CSS yang tidak memerlukan selector Id dan Class. Sehingga Syntax CSS di letakkan
atau langsung di sisipkan pada element HTML. syntax CSS di letakkan di dalam
atribut <style> … </style > . Untuk membuat contoh penulisan CSS dengan gaya
inline caranya sediakan sebuah file HTML atau PHP. di sini saya menggunakan
HTML. saya membuat sebuah file dengan nama index.html dan disini saya
menggunakan Code Editor Visual Studio Code. Berikut adalah contoh codingan dari
Inline CSS Style :

Dan Hasilnya Seperti Ini :

6
2. Internal CSS Style
Teknik penulisan Syntax CSS dengan Internal style adalah teknik cara penulisan
Syntax CSS yang di letakkan satu file dengan file html atau file php. Syntax CSS di
letakkan di dalam tag <style> dan biasanya di akhiri dengan tag </style>. biasa nya
tag <style> … </style> di letakkan pada bagian tag <Head> pada HTML.

Perhatikan contoh penulisan Internal CSS Style di atas, Syntax Css Padding berfungsi
untuk mengatur jarak pada sisi dalam element. Pada contoh di atas saya memberikan
jarak 20px atau bisa di sebut juga 20 pixel. CSS memanggil selector Class biasanya
dengan tanda titik ( . ) dan memanggill selector id dengan tanda pagar ( # ). Berikut
adalah hasil dari text codingan Internal CSS Style di atas :

7
3. Ekternal CSS Style
Teknik penulisan Syntax CSS dengan Ekternal Style adalah teknik penulisan yang
memisahkan file css dan html. penggunaan css yang baik adalah menggunakan
teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena
syntax css di simpan pada file css. file css dan html di hubungkan menggunakan text
di bawah ini

<link rel="stylesheet" href="Nama File Css Anda">

Untuk membuat contoh penulisan CSS dengan Ekternal style siapkan satu buah file
html dan satu buah file css. di sini saya membuat sebuah file dengan nama
index.html dan style.css seperti di bawah ini :

Berikut adalah contoh codingan Eksternal CSS Style :

8
Index.html

Style.css

9
 Dan Hasilnya akan seperti gambar di bawah ini :

 MARGIN DAN PADDING CSS

10
Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah
website dengan menggunakan CSS. karena margin dan padding di gunakan untuk
mengatur sisi dalam dari sebuah element dan mengatur sisi luar dari sebuah element.
untuk itu pada perkenalan kali ini saya akan menjelaskan tentang Apa itu Margin? Dan
Apa Itu Padding?.
 Mengenal Margin pada CSS
Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak
antar element. anda bisa menggunakan syntax margin untuk mengaturnya.
terdapat beberapa sisi luar margin yaitu :
a. ‘margin-top’ adalah margin atas yang di tuliskan pada css.
b. ‘margin-bottom’, margin bawah atau jarak luar bagian bawah di tulis di
CSS.
c. ‘margin-left’ sebagai jarak luar sebelah kiri element.
d. ‘margin-right’ adalah sisi luar pada bagian sebelah kanan.
e. Tetapi jika anda hanya menggunakan syntax ‘margin’ saja maka akan
secara otomatis mengatur jarak atas,bawah, kiri dan kanan element.
Berikut ini adalah Contoh Codingan atau penggunaan margin pada Css :

Index.html

Style.css

11
Dan ini adalah hasil dari codingan di atas

12
 Mengenal Padding pada CSS
Padding adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax
padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan
sama seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom. Jenis
padding yaitu :
a) ‘padding-top’ adalah padding atas di tuliskan pada css dengan yang
berarti mengatur sisi dalam sebelah atas sebuah element.
b) ‘padding-bottom’ adalah pading bawah atau jarak dalam bagian bawah di
tulis di CSS.
c) ‘padding-left’ sebagai jarak dalam sebelah kiri element.
d) ‘padding-right’ adalah sisi luar pada bagian sebelah kanan.
e) Jika anda hanya menggunakan syntax ‘padding’ saja maka akan secara
otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian
dalam. berikut ini adalah Contoh penggunaan padding pada CSS
Berikut adalah contoh codingan atau penggunaan margin pada css :
Index.Html

13
Style.Css

Berikut adalah hasil dari codingan di atas :

14
 MENGATUR FONT
Disini saya akan menjelaskan tentang cara melakukan pengaturan font dengan css.
misalnya seperti merubah font, mengatur ukuran font, warna font serta jenis bentuk
font(garis miring, huruf tebal, tulisan miring). Berikut ada beberapa syntax yang
digunakan untuk mengatur font di dalam CSS :
1. font-size digunakan untuk mengatur ukuran font
2. font-weight di gunakan untuk mengatur ketebalan font
3. font-family untuk mengubah jenis font
4. font-style digunakan untuk merubah gaya pada font.
5. font-color digunakan untuk merubah warna font.

Dapat di lihat pada contoh mengatur font dengan css di bawah ini . untuk merubah warna
font bisa menggunakan perintah ‘color’, font-family digunakan untuk merubah jenis font,
font-style digunakan untuk mengatur gaya font, italic,normal dan lainnta. font-size
digunakan untuk mengatur ukuran dari font. dan font-weight digunakan untuk
menentukan lebar dari pada font.

Index.html

15
Style.css

Hasil

16
 MENGATUR FORMAT TEXT
Pada materi yang saya akan berikan saat ini akan menjelaskan tentang penggunaan css
dalam mengatur atau memodifikasi text dengan tujuan agar format text dapat menjadi
seperti yang kita inginkan dan kita butuhkan. Contohnya untuk mengatur text menjadi
justify atau kita kenal dengan sebutan rata kiri rata kanan, mengatur jarak indent text,
mengatur huruf menjadi uppercase atau huruf besar, huruf kecil, warna text dan juga
mengatur dekorasi atau design pada text. silahkan kalian baca penjelasan berikut tentang
mengatur format text yang dapat di lakukan menggunakan CSS. adapun beberata syntax
CSS yang bisa di gunakan untuk mengatur format text diantara nya adalah:
 Color Di gunakan untuk mengatur warna text, value yang dapat di isi berupa
warna atau kode warna.
 Text-align Di gunakan untuk mengatur posisi align pada text atau rata text, value
yang bisa di isi diantaranya adalah center untuk membuat text rata tengah, left
untuk membuat text menjadi rata kiri, right untuk membuat text menjadi rata
kanan dan justify untuk membuat text menjadi rata kanan dan rata kiri.
 Text-decoration Di gunakan untuk mengatur dekorasi text, value nya berupa none
untuk membuat text tidak memiliki dekorasi, overline untuk membuat text
memiliki garis pada bagian atas text, line-through untuk membuat garis yang
mencoreng pada text, dan underline untuk membuat garis pada bawah text(garis
bawah).
 Text-transform Digunakan untuk mengatur huruf kapital pada text, value yang
bisa di gunakan diantaranya adalah uppercase untuk membuat text menjadi huruf
besar, lowercase untuk membuat text menjadi huruf kecil, dan capitalize untuk
membuat huruf awal pada tiap kata menjadi huruf besar.
 Text-indent Digunakan untuk mengatur jarak alinea pada text, value yang bisa
digunakan berupa nilai pixel dan lainnya sesuai kebutuhan.
 Text-spacing Digunakan untuk mengatur jarak antar karakter pada text, value
yang di isi berupa nilai pixel dan lain-lain. Mengatur Format Text Dengan CSS.
 Word-spacing Digunakan untuk mengatur jarak antar kata pada text, value yang
di isi juga berupa nilai pixel.
 Line-height Digunakan untuk mengatur jarak antar baris pada text value yang di
isi berupa nilai.
 Text-shadow Digunakan untuk mengatur efek bayang pada text, value yang di
isikan pertama mengisi nilai untuk jarak kiri kanan, dan kedua mengisi jarak atas
bawah dan yang ketiga mengisi warna. Untuk contoh penulisanya 2px 5px blue.
 Vertical-align Digunakan untuk mengatur align dalam bentuk vertikal pada text
value yang digunakan adalah left untuk membuat text rata kiri, right untuk rata
atas dan center untuk rata tengah

17
 MENGATUR WARNA TEXT
Disini saya ingin memberikan materi tentang mengatur warna pada text. Kalian dapat
mengubahnya melalui CSS dengan mengetik seperti di bawah ini :

.tulisan_satu ( class yang kalian buat)
{
    color: ( masukan warna yang kalian inginkan) ; 
}

 MENGATUR FORMAT TEXT CSS

Berikut adalah contoh codingan tentang mengatur format text dengan menggunakan
CSS :

Index.html

18
Style.css

19
Hasil

20
 MENGENAL POSITION CSS
Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. terkadang
kita ingin membuat atau menetapkan posisi sebuah element dengan element yang lain.
maka dengan menggunakan property position CSS ini kita dapat menentukan posisi
sebuah element HTML sesuai dengan yang kita inginkan. belajar css mengenal position
css. Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi
sebuah element HTML adalah :
 Static
 Relative
 Fixed
 Absolute
secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti
menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk
menetapan posisi sebuah element. tetapi property tersebut tidak akan bekerja jika position
belum di atur terlebih dahulu. karena property lain tergantung dengan position yang di
tetapkan. Berikut adalah penjelasannya :
 Static
Position static digunakan untuk mengatur element menjadi statis secara default.
element akan mengikuti posisi normal secara default. Berikut adalah contoh
tentang Position Static :

Index.html

21
Style.css

Hasil

22
 Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada
posisi normal. Berikut adalah contoh tentang Relative :

Index.html

Style.css

23
 Hasil

 Fixed
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat
tetap. tanpa ada perubahan bahkan jika halaman website di scroll. berlaku
pengaturan left, bottom, top dan right pada position fixed. Berikut adalah contoh
tentang fixed :

Index.html

24
Style.css

Hasil

25
 Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan
element lain. position adalah salah satu propertyposition css yang sangat berguna.
salah satunya adalah untuk membuat menu dropdown dengan HTML dan CSS.
Berikut adalah contoh tentang Absolute :

Index.html

Style.css

26
 Hasil

 MENGUBAH BORDER STYLE

Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk
titik-titik, berbentuk garis yang putus-putus, garis ganda dan banyak lagi style ataupun
gaya yang bisa di gunakan pada garis dengan CSS . untuk membuat garis sekaligus
memberikan value style yang kita inginkan kita bisa menggunakan property css border-
style.Berikut adalah contoh dari mengubah border style :

Index.html

27
 Style.css

Hasil

 MENGATUR UKURAN BORDER CSS

28
Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-
width.berikut ini adalah contoh cara penulisan property border-width untuk membuat
ukuran garis :

Index.html

Style.css

29
 Hasil

 MEMBERI WARNA PADA BORDER

untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut
adalah contoh membuat warna pada garis menggunakan CSS :

30
Index.html

Style.css

31
Hasil

32
 CARA CEPAT MEMANUPULASI BORDER
Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita
bisa langsung menggunakan property css border. dan mengisi langsung value ukuran,
jenis garis dan warna. untuk cara cepat memanipulasi border dengan css silahkan
perhatikan contoh berikut ini.:

Index.html

Style.css

33
Hasil

untuk mengubah border dengan cepat bisa langsung menyisipkan ukuran, jenis
border dan warna yang di inginkan di dalam property border.

border:1px solid blue;

Dan berikut adalah beberapa property lain yang di gunakan untuk mengubah
tampilan border dengan CSS :
 Border-bottom, Mengatur garis yang terletak di bawah.
 Border-bottom-color, Mengatur warna garis yang terletak di bawah.
 Border-bottom-style, Mengatur style garis yang terletak di bawah.
 Border-bottom-width, Mengatur ukuran garis yang terletak di bawah.
 Border-color, Mengatur warna garis.
 Border-left, Mengatur garis yang terletak di sebelah kiri.
 Border-left-color, Mengatur warna garis yang terletak di sebelah kiri.
 Border-left-style, Mengatur style garis yang terletak di sebelah kiri.
 Border-left-width, Mengatur ukuran garis yang terletak di sebelah kiri.
 Border-right, Mengatur garis yang terletak di sebelah kanan.
 Border-right-color, Mengatur warna garis yang terletak di sebelah kanan.
 Border-right-style, Mengatur style garis yang terletak di sebelah kanan.
 Border-right-width, Mengatur ukuran garis yang terletak di sebelah kanan.
 Border-style, Mengatur style garis.

34
  Border-top, Mengatur garis yang terletak di sebelah atas.
 Border-top-color, Mengatur warna garis yang terletak di sebelah atas.
 Border-top-style, Mengatur style garis yang terletak di sebelah atas.
 Border-top-width, Mengatur ukuran garis yang terletak di sebelah atas.
 Border-width, Mengatur ukuran garis.

 MENGUBAH LIST
CSS memiliki kemampuan untuk memanipulasi atau mengubah list HTML. CSS sangat
berguna ketika anda ingin membuat daftar list dengan model tertentu misalnya list yang
berbentuk angka, titik, angka romawi dan lainnya. Dengan menggunakan CSS kita dapat
memanipulasi list HTML dengan mengubah bentuk tanda listnya. Untuk mengubah list
HTML dengan CSS kita bisa menggunakan property “list-style-type” yang berarti tipe
gaya list. Berikut adalah contoh mengubah list :

Index.html

35
Style.css

36
Hasil

Dapat di lihat pada contoh di atas bahwa untuk membuat list dengan bentuk
square bisa menggunakan property dan value css :
 List untuk membuat bentuk Square
Berikut ada code untuk membuat bentuk Square :
list-style-type: square; 
/* list dengan bentuk square */
 List untuk membuat Lingkaran
list-style-type: circle; 
/* list dengan bentuk lingkaran */
 List untuk membuat Bentuk Alphabet atau huruf

list-style-type: upper-alpha; 
/* list dengan bentuk alphabet */
 List untuk membuat angka romawi

list-style-type: upper-roman;
/* list dengan bentuk romawi */
 Untuk menghilangkan tanda liat
Kalian bisa menggunakan code di bawah ini jika ingin menghilangkan
list-style-type: none; 
/* menghilangkan tanda list */

37
 MENGGUNAKAN FLOAT CSS
Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling
banyak di perlukan. float berfungsi untuk mengatur letak element secara horizontal. ada
empat value yang bisa di gunakan untuk property float, yaitu left, right, inherit dan none.
Salah satu contoh penggunaan float yang paling sering di temukan adalah ketika kita
ingin mebuat gaambar postigan website yang terletak di bagian samping tulisan konten.
berikut akan diberikan contoh tentang penggunaan float pada CSS.

Index.html

Style.css

38
 Hasil

 CARA MEMBUAT TABLE DENGAN CSS

Pasti kalian sudah bisa membuat tamble dengan menggunakan html, tetapi banyak di
antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat kurang
menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa
saja. oleh karena itu Pada pembahasan CSS tabel ini akan di jelaskan tentang bagaimana
cara design sebuah tabel HTML dengan menggunakan CSS. Di tutorial ini saya akan
menjelaskan cara men-design table step by step. Berikut adalah Langkah Langkah yang
harus dilakukan :
1. Kita harus membuat file index.html terlebih dahulu seperti yang akan saya
buat di bawah ini

39
2. Dan hasilnya seperti di bawah ini, kurang menarik dan masih hancur maka
dari itu kita akan menyambungkan nya dengan css

40
3. Jika sudah melakukan Langkah Langkah yang tadi mari kita buat file css dan
menyambunngkan file html dengan css seperti pada penjelasan sebelumnya

4. Dan ini adalah hasil dari kerja kita tadi, tampilan berubah menjadi sangat
sederhana

41
Table kita sudah agak kelihatan lebih rapih dan bersih. Disini saya akan jelaskan
sedikit tentang penggunaan css nya. Pada element table kita menentukan font
yang ingin kita gunakan. karena kita akan mengganti font nya. agar lebih terlihat
menarik. cara mengganti font sudah saya jelaskan sudah ada pada materi
sebelumnya. silahkan bagi kalian yang belum membaca materi tentang cara
mengganti font dengan css kalian bisa baca terlebih dahulu dan menetapkan
warna font nya denga warna #232323 dan yang paling penting adalah border-
collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris.

.table1 
{
    font-family: sans-serif;
    color: #232323;
    border-collapse: collapse;
}
kemudian lagi pada element table head dan table body nya kita tentukan warna
table nya dengan kode warna #999 dan memberikan padding atas bawah sebesar
8px. dan kiri kanan 20px.

.table1, th, td 
{
border: 1px solid #999;
padding: 8px 20px;
}
Berikut ini ada salah satu source code yang telah saya buat selain source code di
atas kalian bisa melihat gambar di bawah ini jika ingin mendapatkan table dengan
tampilan yang berbeda dari sebelumnya
Index.html

42
Style.css

43
 Hasil

 CARA MENGGANTI FONT DENGAN MENGUNAKAN CSS

Disini kita akan mencoba belajar cara mengganti tulisan atau font pada halaman website
dengan menggunakan css. memang jika menggunakan font standart kesannya tampilan
website kita akan terlalu monoton atau kurang menarik, seperti kurang interaktif, Jadi
pada kesempatan kali ini saya akan bahas cara mengubah font atau tulisan dengan css.

Ada beberapa cara mengubah atau menggunakan font dengan css antara lain :
1) menggunakan font yang terletak di server lain. seperti misalnya menggunakan font
yang di sediakan oleh google. dengan haya mencantumkan link font yang ingin di
gunakan.
2) menggunakan font standart yang tersedia secara default
3) ada juga cara mendownload font yang di inginkan, kemudian meletakkannya pada
directory project, dan menghubungkan atau memanggilnya dengan css. untuk
mengganti font dengan css yang pertama yang harus teman-teman lakukan adalah
mendapatkan dan memilih font yang di inginkan terlebih dulu. teman-teman bisa
mendowload atau mendapatkan link nya di http://www.google.com/fonts. Berikut
adalah tampilan dari link tersebut

44
Atau bisa juga mendownload font yang di inginkan http://1001freefonts.com dan
berikut adalah tampilan dari link tersebut :

Dan disini akan saya contoh kan beberapa cara mengganti font atau tulisan
dengan css. Untuk mengubah atau mengganti font dengan css, anda bisa
menggunakan property ‘font-family dan kemudian pada value nya masukkan
nama font yang ingin di gunakan. Pada contoh di bawah ini saya akan
menetapkan font ‘sans-serif’ pada element h2. dan menetapkan font ‘courier’
pada element paragraf.
Index.html

45
Style.css

46
Hasil

Selain cara di atas masih ada beberapa cara lagi dan disini saya akan memberikan
satu cara lagi yaitu membuat atau mengubah font dengan cara mendownload font
dari link link yang saya berikan di atas. Disini saya akan memperlihatkan terlebih
dahulu file apa yang telah saya sediakan

47
Dan selanjutnya adalah source code yang telah saya buat dan telah saya uji coba:
Index.html

Style.css

48
Hasil

Dan disini Kita telah selsai menghubungkan font dengan fungsi url() dan
memberikan namanya dengan tulisan_keren. jadi @font-face di sini berfungsi untuk
penghubung font. dan pada element h2 kita berikan font-family nya dengan nama
tulisan_keren tadi.berikut adalah source code yang paling di fungsikan pada cara
yang sedang kita gunakan ini

@font-face 
{
    font-family: tulisan_keren;
    src: url(Roboto-Black.ttf);
}
h2
{
    font-family: 'tulisan_keren';
    font-size: 70pt;
    font-variant: inherit;
}

49
 MENGATUR HYPERLINK DENGAN CSS

Hyperlink merupakan link yang dibuat untuk mengalihkan halaman saat jika di klik.
Hyperlink atau link dibuat dengan menggunakan tag dan di akhiri dengan tag di HTML
dan bertujuan untuk mempercantik, mengubah atau mengatur hyperlink dengan css
caranya sangat mudah. pada tutorial belajar css mengatur hyperlink dengan css ini akan
di jelaskan tentang cara mengatur hyperlink dengan css. mulai dari membuat warna pada
link, mengubah link menjadi bentuk tombol, membuat tampilan hyperlink berubah pada
saat di klik dan sebagainya. Ada empat status yang di miliki oleh hyperlink html dan bisa
di manipulasi dengan menggunakan css. yaitu :

 Link merupakan link website aktif.

 Visited merupakan status sebuah link yang telah di kunjungi.
 Hover merupakan status sebuah link pada saat diletakkan cursor mouse di
atasnya.
 Active merupakan status sebuah link atau hyperlink pada saat sudah di klik.
untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat di tulis dengan
syntax:
 a:link = untuk link biasa
 a:visited = merupakan status sebuah link yang telah di kunjungi.
 a:hover = merupakan status sebuah link pada saat diletakkan cursor mouse di
atasnya.
 a:active = merupakan status sebuah link atau hyperlink pada saat sudah di klik.
Berikut adalah contoh hyperlink dengan menggunakan kerangka HTML dan di bantu
dengan css
Index.html

50
Style.css

Hasil

51
 PERMASALAHAN DAN SOLUSI

1. ID dan CLASS
Ketika membuat markup HTML ada attribut ID ada juga Class, keduanya digunakan untuk
menandai suatu tag. ID merupakan selector yang digunakan oleh satu tag html, karena ID sendiri
hanya boleh digunakan untuk satu tag html. Setiap element hanya dapat memiliki satu tag id dan
Class merupakan selector yang dapat digunakan lebih dari satu tag html. Artinya beberapa tag
html bisa menggunakan css dari class tersebut. Tag class dengan nama yang sama dapat dipakai
berulang-ulang pada satu halaman. Satu elemen boleh memiliki lebih dari satu Class yang
berbeda-beda dan Dalam sebuah markup, tidak boleh terdapat dua atau lebih ID yang sama,
misalnya :

<div id="judul">
<ul id="judul">
<li>item1</li>
</ul>
</div>
<h1 id="judul">Ini adalah modul </h1>

ID hanya boleh digunakan satu kali karena sifatnya yang unik. Jika suatu markup
memiliki karakteristik yang sama, misalnya warnanya yang sama , ukuran hurufnya yang
sama, jenis hurufnya yang sama. maka gunakanlah Class sebagai penanda. misalnya :

52

<div class="merah">
 Class "merah" dapat digunakan berkali-kali dalam markup, karena karakteristiknya yang sama,
yaitu memiliki background merah.

.merah
{
    background:red;
}

2. CSS RESET
Setiap browser sudah memiliki aturan sendiri dalam memformat halaman sebuah website,
itulah mengapa ada istilah Cross Browser. Dan masing-masing dari browser umumnya
menggunakan satu cara mendasar dalam menampilkan halaman website yakni pada
default styling, serta mengatur pada bagian margin dan juga padding yang sering
mengganggu.
Solusi apa yang harus di lakukan ? solusi yang harus dilakukan adalah dengan
menggunakan CSS Reset seperti contoh di bawah ini :

*
{
    margin:0;
    padding:0;
}
Tanda bintang (*) diatas berfungsi sebagai selector semua tag elemen html atau sama
dengan mengatur dokumen html itu sendiri secara keseluruhan.

53
 RINGKASAN MATERI

CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai dengan namanya CSS memiliki
sifat ”style sheet language” yang berarti bahasa pemrograman yang di gunakan untuk web
design. Dengan menggunakan css maka kita dapat menghasilkan tampilan web yang indah dan
menarik. Bahasa pemrograman ini lebih mudah dan ringkas dari pada menggunakan atribud
ditiap tag html. Selain itu CSS juga bisa digunakan untuk menciptakan web dengan tampilan
yang dinamis dan fleksibel. Baik itu untuk tampilan web di browser ataupun ketika halaman web
dicetak lewat printer.
SCC juga disusun dengan struktur tertentu berikut contoh dan penjelasan dari strukturnya :

Selector dan Declaration adalah Perintah css

Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css
akan diterapkan
Selector dapat berupa nama tag, selector class atau selector ide
Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan
value.
Kelebihan dari CSS
Dapat memisahkan desain dengan konten halaman web
Dapat mengatur desain seefisien mungkin
Jika ingin mengedit suau tema halaman web dapat dilakukan dengan mudah,yaitu cukup
dengan memodifikasi pada cssnya saja
Satu css dapat diakses oleh banyak web
Kekurangan dari CSS
Tampilan pada setiap browser yang berbeda
Ada juga browser yang tidak dapat menyuport css
Membutuhkan waktu yang lama dalam pembuatanya
Sering terjadi bug atau eror

54
 DAFTAR PUSTAKA

Aliona, Rian. 2021 "frontend web developer" jakarta. Dari https://www.ariona.net Di Akses Tanggal
15 Februari 2021
hadi, d. a. 2021 "Ebook Belajar HTML & CSS". Jakarta. https://www.malasngoding.com/ Di akses
tanggal 15 Februari 2021
ndika, Dwiky. 2018. " Pengertian Css (Cascading style sheet)". jakarta. https://www.it-
jurnal.com/pengertian-css-cascading-style-sheet/ Di akses tanggal 15 Febuari 2021
K. Yasin. 2020 “Pengertian css dan Fungsinya” jakarta.
https://www.niagahoster.co.id/blog/pengertian-css/ Di akses tanggal 14 Febuari 2021
Web, Dewa. 2020. “Belajar CSS: Pengertian, Peran, Fungsi, dan macamnya”. Jakarta.
https://www.dewaweb.com/blog/belajar-css-pengertian-peran-fungsi-dan-macamnya/ Diakses
tanggal 12 Febuari 2021
Nawadwipa, admin. 2020. “Apa itu CSS”. Jakarta. https://www.nawadwipa.co.id/apa-itu-css-
cascading-style-sheets Diakses tanggal 12 Febuari 2021

55
 CATATAN

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

56