Scribd
Unggah
23 tayangan19 halaman

4 CSS-06

Diunggah oleh

rioferddinansya
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
23 tayangan19 halaman

4 CSS-06

Diunggah oleh

rioferddinansya
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 19

CSS

(Cascading Style Sheet)


Adaptasi dari
www.w3schools.com
Apakah itu CSS?
⚫ CSS Kepanjangan dari Cascading Style
Sheets
⚫ Styles bertujuan untuk mengatur
bagaimana elemen HTML ditampilkan.
⚫ Komponen yang mendefinisikan sytle
suatu elemen disimpan dalam Style
Sheets
Apakah itu CSS?
⚫ Penggunaan stype diperkenalkan pada
HTML 4.0
⚫ Penggunaan External Style Sheets
dapat membantu efesiensi coding
⚫ External Style Sheets disimpan dalam file
CSS
⚫ Pendefenisian style lebih dari satu akan
ditumpuk menjadi satu
Urutan penterjemahan Styles
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (didefinisikan dalam
tag <head>)
4. Inline Style (pendefinisian style dalam
HTML langsung)

Nomor 4 memiliki prioritas tertinggi ☺


Sintak

selector {property: value}

⚫ Selector adalah element/tag,atribut yang ingin diatur


styles nya.
⚫ Nilai properti adalah atribut yang diatur secara terpisah
dengan tanda ;
Contoh Sintak
⚫ body {color: black}

⚫ p {font-family: "sans serif"}

⚫ p {text-align:center;color:red}

⚫ p
{
text-align: center;
color: black; Lebih disukai
font-family: arial
}
Grouping
⚫ Anda dapat mengelompokan beberapa
elemen untuk diformat secara bersamaan
⚫ Contoh:
h1,h2,h3,h4,h5,h6
{
color: green
}
class Selector
⚫ Dengan menggunakan class selector Anda dapat mendefiniskan style yang
berbeda untuk sebuah HTML element
⚫ Contoh :
p.right {text-align: right}
p.center {text-align: center}

Penggunaan :
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Contoh penggunaan yang salah :

<p class="right" class="center">This is a paragraph.</p>


class Selector
⚫ Anda dapat menghilangkan nama element pada class selector,
sehingga dapat dipergunakan oleh sembarang element

⚫ Contoh :
.center {text-align: center}
Contoh penggunaan:

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
id Selector
⚫ Id Selector berbeda dengan class selector! Class selector dapat
diimplementasi pada beberapa element secara bebas, sedangkan id
selector hanya untuk 1 element saja.

⚫ Contoh sytle untuk tag P yang akan aktif hanya untuk nilai id =“para1”

p#para1
{
text-align: center;
color: red
}
⚫ Contoh id selector dengan komponen element bebas
*#wer345 {color: green}
Dapat dipergunakan dengan cara:
<h1 id="wer345">Some text</h1>
Komentar pada CSS
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
Cara menyisipkan Style Sheet
⚫ External Style Sheet
⚫ Internal Style Sheet
⚫ Inline Styles
External Style Sheet
⚫ Penggunaan external style sheet sangat
ideal untuk menformat banyak halaman
secara sekaligus.
⚫ Contoh :
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Cara membuat External CSS
⚫ Dibuat dengan sembarang ASCII text
editor
⚫ Disimpan dengan ekstensi .css.
⚫ Contoh isi dari sebuah file CSS:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Internal Style Sheet
⚫ Internal Style sheet ditulis dengan
menggunakan tag <style> dan biasanya ditulis
dalam tag <head>
⚫ Contoh :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Dukungan terhadap Browser “Tua”
⚫ Untuk mencegah kode CSS “berhamburan” pada
browser tua, gunakan tanda komentar diantara
script.
⚫ contoh:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Inline Styles
⚫ Ditulis secara langsung pada tag yang ingin
diformat.
⚫ Cocok untuk format “sekali muncul”.
⚫ Gunakan atribut style untuk mendefinisikan style
sheet.
⚫ Contoh pada tag paragraph:

<p style="color: sienna; margin-left: 20px">


This is a paragraph
</p>
Multiple Style Sheets
⚫ Jika terdapat penggunaan beberapa stylesheet pada satu HTML
yang sama, maka nilai yang akan dipergunakan diturunkan dari
style sheet yang paling spesifik.
⚫ Contoh :
⚫ Pada eksternal CSS didefinisikan:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
⚫ Pada internal CSS didefinisikan :
h3
{
text-align: right;
font-size: 20pt
}
Multiple Style Sheets
⚫ Jika terdapat penggunaan beberapa stylesheet pada satu HTML
yang sama, maka nilai yang akan dipergunakan diturunkan dari
style sheet yang paling spesifik.
⚫ Contoh :
⚫ Pada eksternal CSS didefinisikan:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
⚫ Pada internal CSS didefinisikan :
h3
{
text-align: right;
font-size: 20pt
}
⚫ Maka pada halaman HTML yang menggunakan keduanya, berlaku:
color: red;
text-align: right;
font-size: 20pt

Anda mungkin juga menyukai