Kelompok 2-CSS

Cascading Style
Sheets
TEAM
2 1. Grasella Br Sinaga (4211111025)
2. Irene Florencia Sitinjak (4213111061)
3. Mean Yulius Padang (4213311056)
4. Sariyah Lubis (4211111024)
Dosen Pengampu: Andrea Arifsyah Nasution, S.Pd., M.Sc.

Asisten Laboratorium: Puja Kasiani
MENU
01 Cara Kerja dan Penempatan CSS
Struktur CSS
02
Layout dan Display CSS

03
Font dan Teks CSS

04
CSS Property dan Value

05
Cara Kerja dan Penempatan
CSS
Pengertian
CSS adalah singkatan dari Cascading Style

Sheets yaitu kumpulan
kode program yang digunakan untuk mendesain
atau mempercantik tampilan halaman HTML.
Membedakan HTML dengan CSS
CARA KERJA
Menjelaskan bagaimana elemen-elemen HTML

ditampilkan di layar. Dengan CSS kita bisa mengubah desain dari text,
warna, gambar dan latar belakang dari (hampir) semua kode tag HTML sehingga dapat
mengontrol tata letak beberapa halaman web sekaligus. CSS
biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling
melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web.
Sedangkan CSS digunakan untuk tampilan dari halaman web
tersebut. Istilahnya, “HTML for content, CSS for Presentation”.
Penempatan CSS ke Dalam HTML
01 Inline Style
Metode Inline Style adalah cara menginput kode CSS
langsung ke dalam tag HTML dengan menggunakan
atribut style.
Contoh penggunaannya:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Contoh Inline Style CSS</title>
5. </head>
6. <body>
7. <h1 style= "color: orange;font-family: sans-serif;text-
align: center;">Belajar CSS
8.</h1>
9.</body>
10.</html>
02 Internal Style Sheets
Metode Internal Style Sheets, atau 12.
disebut juga Embedded Style Sheets 13. <p>Selamat Datang Di</p>
digunakan untuk memisahkan kode 14. <p>Universitas Negeri Medan</p>
CSS dari tag HTML namun tetap dalam 15.
satu halaman HTML. Atribut style 16. </body>
yang sebelumnya berada di dalam tag, 17. </html>
dikumpulkan pada pada sebuah tag
<style>. Tag style ini harus berada pada
bagian <head> dari halaman HTML.
Contoh penggunaan nya:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. color: #000099;
7. text-align: center;
8. }
9. </style>
10. </head>
03 External Style Sheets

Metode External Style Sheets digunakan untuk membuat kode CSS
tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap
halaman yang membutuhkan kode CSS, tinggal dipanggil file CSS tersebut.Contoh
penggunaannya:
membuat file html nya dengan nama isi sendiri.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
03 External Style Sheets

Membuat file mystyle.css (untuk nama bebas yang paling penting ekstensi nya harus.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang
akan berisi alamat dari halaman CSS, dalam hal ini mystyle.css. dalam penyimpanannya file css
harus satu folder dengan !DOCTYPE.html
apabila berbeda folder maka disesuaikan dengan alamat folder nya .
2. Struktur CSS
CSS SYNTAX
• • Deklarasi pada CSS selalu diakhiri

Selector – Memberi style CSS
pada elemen HTML yang dengan tanda titik koma, setiap blok
diingikan deklarasinya di letakan didalam kurung
• Block Declaration memiliki satu kurawal.
• Setiap Declaration meliputi CSS
atau lebih jenis declaration yang
dipisahkan dengan tanda titik property name (color) & value (blue) dan
koma “;”. dipisahkan dengan tanda titik dua “:”
Menggabungkan Struktur
a. Membuat seluruh tag header <h2>

berwarna biru
Karena kita menginginkan seluruh tag berwarna biru, maka tinggal menggunakan CSS Tag Selector. Inputkan kode
CSS berikut diantara tag <style> dan </style> pada bagian head:
1
2
3 h2 {
color: blue;
}
b. Membuat seluruh tag header <h3> juga berwarna biru
Untuk hal ini, kita tinggal menambahkan kode CSS seperti contoh <h2> sebelumnya, sebagai
berikut:
1. h2 {
2. color: blue;
3. }
4. h3 {
5. color: blue;
6. }
Menggabungkan struktur
Namun CSS memiliki cara yang lebih

efisien jika yang kita inginkan adalah
style yang sama untuk kedua tag. Kita bisa
menggabungkan kode CSS diatas menjadi:
h2 , h3 {
color: blue;
}
这里添加标题
c. Seluruh tag <strong> yang berada di dalam tag <p>

berwarna merah
Jika yang kita maksud adalah seluruh tag <strong> dimanapun tag tersebut berada, maka
kode CSSnya cukup sebagai berikut:
1. strong {
2. color:red;
3. }
Namun kode CSS tersebut akan membuat seluruh tag <strong> dimanapun, termasuk tag
<strong> yang berada di dalam tag <h1> akan berwarna merah. Sehingga, jika ditambahkan
syarat hanya untuk tag <strong>yang berada di dalam tag <p>, maka kita harus menulis
selector CSS menjadi:
4. p strong {
5. color:red;
6. }
Menggabungkan Struktur
d. Seluruh tag <h2> yang memiliki class judul, dan seluruh tag yang memiliki
class paragraf menjadi italic (huruf miring)
Kode CSS untuk keperluan itu adalah:
1 h2.judul , .paragraf {
2 font-style: italic;
3 }
e. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id “belajar_html”, tag p dengan id “belajar_css”
dan seluruh tag h3 yang memiliki class “subheader”
1 #belajar_html, p#belajar_css, h3.subheader {
2 font-size:14pt;
3 }
3. Layout dan Display CSS
LayOut
HTML Layout pada halaman web sangat penting

untuk memberikan tampilan yang lebih baik ke
situs web Anda. Oleh karena itu membutuhkan
banyak waktu untuk merancang Layout situs
web dengan tampilan dan nuansa yang bagus.
Layout
1. <header> – Menentukan header untuk dokumen atau

bagian
2. <nav> – Menentukan wadah untuk tautan navigasi
3. <section> – Menentukan bagian dalam dokumen
4. <article> – Menentukan artikel
5. <aside> – Menentukan konten selain konten (seperti
bilah sisi)
6. <footer> – Menentukan footer untuk dokumen atau
bagian
7. <details> – Menentukan detail tambahan
8. <summary> – Menentukan heading untuk elemen
Display
Display adalah salah satu property dalam CSS yang

berguna untuk mengatur tampilnya suatu elemen. Display
memiliki beberapa value, dengan default value inline.
Namun, pada masing-masing elemen tag pada html
memiliki default value yang berbeda, default value yang
paling sering digunakan adalah inline dan block.
Beberapa Value Yang Dimiliki Oleh Display
Inline
Elemen yang memiliki property display: inline; hanya
memblok sesuai dengan konten yang ada pada elemen
tersebut. Kita tidak dapat mengubah atau mengatur nilai
lebar dan tinggi dari elemen tersebut. Selain itu, nilai
margin-top dan margin-bottom juga tidak berpengaruh pada
elemen inline.
Contoh elemen html yang memiliki default value inline,
yaitu:
• <span>
• <a>
• <img>
Block
Elemen yang memiliki property display: block; selalu membuat blok baru
pada tampilan. Elemen akan membentang dari kiri hingga ke kanan
mengisi penuh lebar dari halaman browser. Kita dapat melakukan
manipulasi banyak hal pada elemen yang bernilai block. Baik mengatur
lebar, tinggi, margin sesuai dengan kebutuhan yang kita inginkan.
Contoh default value block, yaitu :
• <div>
• <p>
• <form>
• <header>
• <footer>
• <section>
Inline-Block
Display yang memiliki value inline-block, memiliki karakteristik gabungan
dari dua value sebelumnya yaitu, inline dan block. Elemen yang memiliki
nilai ini akan tampil secara inline atau sejajar/menyamping namun tiap
elemen memiliki sifat value block.
Elemen dengan display: inline-block; dapat diatur property lain seperti
height, width dan margin yang tidak dapat diatur di inline. Namun,
tampilan akan mengalur kesamping seperti display inline.
Table
Kita dapat membuat tampilan berupa table dengan memanfaatkan property
display CSS. Display memiliki value yang mendukung pembuatan table layaknya
tag HTML. Berikut beberapa value display yang memiliki kesamaan dengan tag
HTML dalam pembuatan elemen table :
• table, seperti <table> element
• table-caption, seperti <caption> element
• table-column-group, seperti <colgroup> element
• table-header-group, seperti <thead> element
• table-footer-group, seperti <tfoot> element
• table-row-group, seperti <tbody> element
• table-cell, seperti <td> element
• table-column, seperti <col> element
• table-row, seperti <tr> element
None
Elemen yang memiliki display: none; tidak akan ditampilkan dalam

tampilan halaman browser. Hal ini tidak akan berakibat pada elemen-
elemen lainnya. Elemen secara tampilan akan hilang, namun kode html
akan tetap ada.
4. Font dan Teks CSS
5. CSS Property dan Value
Property dan Value
Property Va l u e
Property CSS adalah jenis style, atau Va l u e C S S a d a l a h n i l a i d a r i
elemen apa yang akan diubah dari p ro p e r t y. M i s a l k a n u n t u k p ro p e r t y
sebuah tag HTML. CSS memiliki background-color yang digunakan
puluhan property yang dapat untuk mengubah warna latar
digunakan agar menampilkan hasil b e l a k a n g d a r i s e b u a h s e l e c t o r,
akhir yang kita inginkan. Hampir value atau nilainya dapat berupa
semua property dalam CSS dapat red, blue, black, atau white.
d i p a k a i u n t u k s e l u r u h s e l e c t o r.
Jika selector digunakan misalnya

untuk “mencari seluruh tag <p>“,
maka property adalah “efek apa yang
ingin dimanipulasi dari tag p
tersebut“, seperti ukuran text, warna
text, jenis fontnya, dll
Praktek
Internal Style Sheets External Style Sheets
Melalui GDB Online:

Klik disini
2 3 Melalui NotePad.
Inline Style Layout CSS

Melalui GDB online:
Klik disini
1 4 Melalui GDB Online:
Klik disini
Praktek
Block Tabel
Melalui NotePad
Klik Disini
Font dan Teks CSS

Inline Block
File 1
Melalui GDB online:
Klik Disini
Thank U
Talk less, Do More

Kelompok 2-CSS

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kelompok 2-CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascading Style

2. Irene Florencia Sitinjak (4213111061)

3. Mean Yulius Padang (4213311056)

4. Sariyah Lubis (4211111024)

Dosen Pengampu: Andrea Arifsyah Nasution, S.Pd., M.Sc.

01 Cara Kerja dan Penempatan CSS

Layout dan Display CSS

Font dan Teks CSS

CSS Property dan Value

CSS adalah singkatan dari Cascading Style

Menjelaskan bagaimana elemen-elemen HTML

03 External Style Sheets

03 External Style Sheets

• • Deklarasi pada CSS selalu diakhiri

a. Membuat seluruh tag header <h2>

b. Membuat seluruh tag header <h3> juga berwarna biru

Namun CSS memiliki cara yang lebih

c. Seluruh tag <strong> yang berada di dalam tag <p>

Kode CSS untuk keperluan itu adalah:

1 #belajar_html, p#belajar_css, h3.subheader {

HTML Layout pada halaman web sangat penting

1. <header> – Menentukan header untuk dokumen atau

Display adalah salah satu property dalam CSS yang

Elemen yang memiliki display: none; tidak akan ditampilkan dalam

Jika selector digunakan misalnya

Internal Style Sheets External Style Sheets

Melalui GDB Online:

Inline Style Layout CSS

Font dan Teks CSS

Talk less, Do More

Anda mungkin juga menyukai