PERTEMUAN III
Pada pertemuan ke –III ini akan membahas tentang CSS.
CSS
(Cascading Style Sheet) merupakan bahasa yang digunakan untuk memformat
tag-tag yang ada. CSS dapat digunakan dalam kode HTML dengan 3 cara yaitu;
1.
Inline
CSS,
2.
Internal
CSS,
3.
Eksternal
CSS.
Mari kita membahas Satu persatu.
1.
INLINE CSS
Inline
CSS adalah kode CSS yang ditulis langsung pada atribut/element HTML. Setiap
atribut HTML memiliki Style , disana lah Inline CSS ditulis.
Contoh; <body style=” font-family : Verdana;”> </body>
Dalam Gambar/Capture diatas memiliki
karakteristik;
-
Background
: hijau
-
Background
tulisan : hitam
-
Warna
tulisan : putih
-
Border
: solid
merah.
Contoh Struktur HTML secara Inline CSS;
<html>
<head>
<title>Praktikum Ke-3</title>
</head>
<body style="margin-top :100px;
margin-right :100px;
margin-bottom :100px;
margin-left :100px;
background-color :green;
border :5px solid red;">
<p style="font-family :verdana;
font-size:30px;
color:white;
background-color:black;">
Cascading Style Sheet (CSS)
adalah bahasa yang digunakan untuk
memformat tag-tag HTML.
CSS dapat dituliskan dalam
kode HTML dengan 3 cara yakni;
Inline CSS,Internal CSS,Eksternal CSS.
Dari sisi pengerjaan maka inline CSS adalah
CSS yang paling tinggi derajatnya diikuti
oleh internal CSS dan eksternal CSS.
</p>
</body>
</html>
Note;
-
Margin
: digunakan untuk
memberikan jarak antar element atau tag HTML.
Beberapa jenis margin ;
1.
Margin-
Top : mengatur jarak dari atas
2.
Margin-Left : mengatur jarak dari kiri
3.
Margin-Right : mengatur jarak dari kanan
4.
Margin-bottom
: mengatur jarak dari bawah
Contoh. Pada Tag <body
style=”margin-top :80px;”> </body>
-
Border
: memberikan
garis/batas pada suatu bidang /box/tag HTML. Baris atau batas ini dapat
ditentukan bentuknya/tampilan atau stylenyaseperti warna,ketebalan,serta gaya. Contoh
< body style=”border : 3px solid red;”> </body>
2.
INTERNAL CSS
Internal CSS digunakan untuk memberi
style yang hanya berlaku pada satu laman web style yang diberikan diapit leh
tag<style> </style> dan diletakkan pada bagian elemen Head atau
tag<Head></Head>.
Bagaimana Cara agar setiap Paraggraf memiliki
karakteristik yang berbeda?
Apakah bisa?
Tentu bisa, dalam pengkodingan nya akan mengunakan fungsi
Class pada element nya tesebut, dan
tentunya menggunakan Internal CSS.
Contoh Struktur HTML
secara Internal CSS;
<html>
<head>
<title>Praktikum Ke-3</title>
<style>
body {
margin-top :100px;
margin-right :100px;
margin-bottom :100px;
margin-left :100px;
background-color:green;
border :5px solid red;
}
p.satu
{
font-family :verdana;
font-size :30px;
color :white;
background-color:black;
}
p.dua
{
color :yellow;
background-color:black;
font : italic
small-caps bold 30px verdana;
}
</style>
</head>
<body>
<p class=satu>
Cascading
Style Sheet (CSS)
adalah bahasa yang digunakan untuk
memformat
tag-tag
<span style="color:blue;">H</span>
<span
style="color:yellow;">T</span>
<span
style="color:pink;">M</span>
<span
style="color:green;">L</span>.
CSS
dapat dituliskan dalam
kode
HTML dengan 3 cara yakni;
Inline
CSS,Internal CSS,Eksternal CSS.
Dari
sisi pengerjaan maka inline CSS adalah
CSS
yang paling tinggi derajatnya diikuti
oleh
internal CSS dan eksternal CSS.
</p>
<p class=dua>
Cascading
Style Sheet (CSS)
adalah
bahasa yang digunakan untuk
memformat
tag-tag HTML.
CSS
dapat dituliskan dalam
kode
HTML dengan 3 cara yakni;
Inline
CSS,Internal CSS,Eksternal CSS.
Dari
sisi pengerjaan maka inline CSS adalah
CSS
yang paling tinggi derajatnya diikuti
oleh
internal CSS dan eksternal CSS.
</p>
</body>
</html>
Note;
-
Class
: digunakan sebagi Penanda pada HTML, maksudnya adalah
elemen-elemen HTML dapat diberi tanda
dengan class atau Id. Untuk apa diberi tanda ? agar dapat di manipulasikan
menggunakan CSS atau Javascript.
Contohnya dapat dilihat dari struktur HTML diatas dan juga hasil dari
HTML tersebut. Maka setiap paragraf akan memiliki karakteristik tersendiri.
-
Span
: merupakan elemem yang
digunakan untuk memudahkan dalam pemberian style(dengan CSS) atau memberikan perbedaan .
3.
EKSTERNAL CSS
Eksternal CSS merupakan file yang
berektensi .css yang hanya berisi kode-kode style.
Tujuan menggunakan eksternal CSS
adalah untuk memisahkan kode style dengan struktur dan tipe konten laman Web. Eksternal
CSS dapat diaplikasikan pada lebih dari satu laman Web sehingga semua laman Web
akn memiliki tampilan atau desai yang sama.
Sebagai contoh, Buat file CSS bernama csseksternal.css menggunakan plain text
ediror Notepad atau Editor text lainnya. Tuliskan kode style sebagai style yang
akan diberikan pada laman Web tersebut. Simpan file CSS di folder ynag sama
tempat menyimpan file HTML.
Dalam gambar/Capture diatas memiliki
karakteristik;
-
Background
= kuning
-
Warna
tulisan judul = merah
-
Warna
tulisan paragraf = hijau
-
Border
= 3px solid merah
Contoh Struktur HTML secara Eksternal CSS;
Pada
File berekstansi HTML (.Html)
<html>
<head>
<title> EKSTERNAL CSS
</title>
<link rel="stylesheet" href="eksternalcss.css" type="text/css">
</head>
<body>
<h1> WELCOME
</h1>
<p> Pada pertemuan Kali ini akan membahas tentang Eksternal CSS.
Eksternal
CSS merupakan file yang berektensi .css yang hanya
berisi kode-kode style.
Tujuan menggunakan eksternal CSS adalah untuk memisahkan kode style
dengan
struktur dan tipe konten laman Web. Eksternal CSS dapat diaplikasikan
pada
lebih dari satu laman Web sehingga semua laman Web akn memiliki
tampilan
atau desai yang sama.
Sebagai contoh, Buat file CSS bernama csseksternal.css menggunakan
plain
text ediror Notepad atau Editor text lainnya.
Tuliskan
kode style sebagai style yang akan diberikan pada
laman
Web tersebut. Simpan file CSS di folder ynag sama tempat
menyimpan
file HTML.
</body>
</html>
File
yang berekstansi CSS (.CSS)
h1 {
color : red;
font-size : 30px;
text-align : center;
}
body {
background-color :
yellow;
border :3px
solid red;
}
p {
color : green;
font-family : arial;
font-size : 15px;
}
Note;
-
Link
rel : Untuk menghubungkan
kedua fie data tersebut , maka dibutuhkan Link untuk memanggil file data yang
tersangkut(berkaitan) .
Contoh. <link rel="stylesheet" href="eksternalcss.css" type="text/css">
