CSS I Modul 1811

Cascading Style Sheet - CSS
Modul Kursus
Rev. 1505
Inosis Kursus Web - Metro Trade Center Blok G12 Jl. Soekarno-Hatta No.590 Bandung
Telp: (022) 753 6405 / 753 6201 Web: inosispro.com Email: info@inosispro.com
CSS Inosis Kursus Web Halaman |1
Daftar isi
1 APA ITU CSS ..................................................................................................................................... 3
1.1 Apa itu CSS? .............................................................................................................................................. 3
1.2 Sintak CSS.................................................................................................................................................. 3
1.3 Komentar di CSS ........................................................................................................................................ 4
1.4 CSS Selectors ............................................................................................................................................. 5
1.5 Group Selectors ......................................................................................................................................... 6
1.6 Cara Memasang CSS .................................................................................................................................. 6
2 CSS DASAR ........................................................................................................................................ 7
2.1 CSS Color ................................................................................................................................................... 7
2.2 CSS Background ......................................................................................................................................... 8
2.3 CSS Text .................................................................................................................................................. 10
2.4 CSS Font .................................................................................................................................................. 12
2.5 CSS Links ................................................................................................................................................. 15
2.6 CSS List .................................................................................................................................................... 16
3 CSS TABLE ...................................................................................................................................... 18
4 CSS BOX MODEL ........................................................................................................................... 19
4.2 CSS Border............................................................................................................................................... 21
4.3 CSS Margin .............................................................................................................................................. 23
4.4 CSS Padding ............................................................................................................................................. 25
4.5 CSS Dimension ........................................................................................................................................ 26
5 CSS DISPLAY DAN VISIBILITY .................................................................................................. 27
6 CSS BLOCK DAN INLINE ............................................................................................................. 27
Inosis Kursus Web – http://inosispro.com

7 FLOATING & POSITIONING ......................................... ERROR! BOOKMARK NOT DEFINED.
7.1 Normal Flow ...................................................................................................Error! Bookmark not defined.
7.2 Floating ..........................................................................................................Error! Bookmark not defined.
7.3 Positioning Basics ...........................................................................................Error! Bookmark not defined.
7.4 Page Layout ....................................................................................................Error! Bookmark not defined.

1 Apa itu CSS
Sebelum melanjutkan tutorial CSS ini, anda diharapkan telah memiliki pemahaman tentang dasar
tentang HTML atau XHTML
1.1 Apa itu CSS?
 CSS kependekan dari Cascading Style Sheets

 Styles mendefinisikan bagaimana menampilkan elemen HTML
 CSS menghemat banyak pekerjaan karena dapat mengontrol tata letak beberapa halaman web
sekaligus
 External Style Sheets disimpan dalam File CSS
HTML berisi tag yang tidak pernah dimaksudkan untuk untuk memformat dokumen.
HTML dimaksudkan untuk menentukan isi dari dokumen, seperti:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Pada awalnya, format (style) dimasukan pada tag. Hal ini membuat kesulitan bagi programmer karena
harus mengubah properti dari HTML satu per satu. Untuk mengatasi masalah ini, World Wide Web
Consortium (W3C) menciptakan CSS.
Dalam HTML 4.0, semua format bisa dihapus dari dokumen HTML, dan disimpan dalam file CSS yang
terpisah.
Semua browser mendukung CSS saat ini.
 CSS Menghemat banyak pekerjaan!

 CSS mendefinisikan bagaimana cara menampilkan elemen HTML.
Styles biasanya disimpan dalam file eksternal css. Style sheet eksternal memungkinkan Anda untuk
mengubah tampilan dan tata letak dari semua halaman di situs Web, hanya dengan mengedit satu file
tunggal!
1.2 Sintak CSS

Aturan CSS terdiri dari blok Selector dan blok Deklarasi :

Deklarasi blok berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi mencakup nama properti dan nilai, yang dipisahkan oleh titik dua.
Contoh
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung
kurawal:
p {color:red;text-align:center;}
Untuk membuat kode CSS lebih mudah dibaca, Anda dapat menempatkan satu deklarasi pada setiap
baris, seperti ini:
p {
color: red;
text-align: center;
}
1.3 Komentar di CSS

Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit
sumber kode di kemudian hari. Komentar akan diabaikan oleh browser.
Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /.
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */

1.4 CSS Selectors

CSS memungkinkan Anda untuk memilih dan memanipulasi elemen HTML. CSS selector digunakan untuk
"menemukan" (atau memilih) elemen HTML berdasarkan id, kelas, jenis, atribut, nilai atribut dan banyak
lagi.
1.4.1 Element Selector

Menggunakan nama elemen sebagai selector.
Aturan CSS sytle berikut membuat semua elemen dengan tag <p> pada halaman seperti ini mempunyai
align ditengah dengan warna teks merah.
p {
text-align: center;
color: red;
}
1.4.2 Id Selector
Menggunakan elemen HTML yang menggunakan atribut id tertentu.
Id harus unik dalam suatu halaman, sehingga Anda harus menggunakan selector id bila Anda ingin
menemukan satu elemen yang unik.
Untuk menggunakan elemen dengan id, dilakukan dengan menulis karakter hash(#) diikuti oleh nama id
dari elemen.
Aturan CSS Style di bawah ini akan menerapkan elemen HTML yang memiliki id = "para1" memiliki teks
di posisi tengah dan berwarna merah.
#para1 {
text-align: center;
color: red;
}
1.4.3 class Selector

Menggunakan elemen yang menggunakan atribut class tertentu.
Untuk menemukan elemen dengan class tertentu, dapat dilakukan dengan menulis karakter dot(.) dan
diikuti oleh nama class .
Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan diformat menjadi center-
aligned
.center {
text-align: center;
color: red;
}

Anda juga dapat menggabungkan jenis elemen HTML yang spesifik dengan class tertentu. Pada contoh
di bawah ini, semua elemen p dengan class = "center" akan di format menjadi center-aligned:
p.center {
text-align:center;
color:red;
}
1.5 Group Selectors

Dalam style sheet sering ada unsur dengan style yang sama. Misalnya contoh di bawah ini.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Maka kita bisa memuat kode CSS berikut untuk meminimalkannya
h1, h2, p {
text-align: center;
color: red;
}
1.6 Cara Memasang CSS

Ada tiga cara untuk memasukkan sebuah CSS:
1. External style sheet

2. Internal style sheet
3. Inline style
1.6.1 External Style Sheet

Eksternal stylesheet adalah menyimpan CSS pada file terpisah. Eksternal style sheet sangat ideal
diterapkan pada banyak halaman karena Anda dapat mengubah tampilan seluruh situs Web dengan
mengubah hanya satu file.
Cara memasang external sytle sheet, setiap halaman harus menyertakan link ke file CSS dengan tag
<link> . Tag <link> dimasukan di dalam bagian tag <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Sebuah eksternal style sheet adalah sebuah file teks, dan dapat ditulis dalam editor teks. Misalnya
sebuah file style sheet bernama mystyle.css, akan berisi style berikut:
hr {color: green;}
p {margin: 20px;}
body {background-image: url("images/background.gif");}
1.6.2 Internal Style Sheet

Internal style sheet digunakan jika dokumen memiliki Style yang unik. Style tersebut tidak akan dipakai
pada halaman web yang lain. Anda harus mendefinisikan Style internal di bagian dalam tag <head>
dalam tag <style>.
<head>
<style>
hr {color: green;}
p {margin: 20px;}
body {background-image: url("images/background.gif");}
</style>
</head>
1.6.3 Inline Styles

Insline style adalah style yang ditambahkan dalam tag HTML dengan atribut style. Atribut ini kemudian
diisi dengan kode deklarasi CSS. Dengan inline style, maka deklarasi CSS hanya akan bekerja untuk
elemen tersebut saja.
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
2 CSS Dasar
2.1 CSS Color

CSS Color memiliki 16,777,216 warna untuk memenuhi kebutuhan Anda. CSS Color dapat memiki
beberapa bentuk: nama, RGB (red/green/blue) dan hex code.
Contoh berikut adalah cara CSS menyatakan warna merah dalam berbagai format:
red format nama
rgb(255,0,0) format rgb

rgb(100%,0%,0%) format rgb
#ff0000 format hex code
#f00 format hex code
Nama warna yang tersedia adalah: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.
Nama transparent juga bisa dipakai.
Tiga nilai dari nilai RGB adalah dari 0 to 255, 0 menunjukan nilai paling rendah, 255 menjadi nilai paling
tinggi. RGB adalah singkat dari REG-GREE-BLUE, dimana 3 nilai (255,0,0) menunjukan intensitas
berturut-turut untuk RED, GREEN, dan BLUE. 0 menunjukan tidak ada warna merah, sedangkan 255
menunjukan warna merah penuh. Nilai-nilai tersebut dapat juga dinyatakan dalam bentuk persentase.
Hexadecimal adalah system penomoran angka dalam basis angka 16. Nilai angka hexadecimal memiliki
16 nomor, dari mulai 0 sampai dengan F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Menyatakan CSS Color dengan
hexa code adalah menambahkan karakter hash (#) dan dapat berupa 6 digit atau 3 digit. Untuk
menyatakan RGB(255,0,0) adalah #FF0000 untuk format 6 digit, atau #F00 untuk versi 3 digit.
2.2 CSS Background

CSS Background digunakan untuk mendefinisikan efek latar belakang suatu elemen.
Berikut adalah property CSS untuk background beserta contohnya.
2.2.1 Background Color

Properti background-color menentukan warna latar belakang dari elemen.
Contoh berikut adalah memberi warna latar belakang melalui selector body.
body {
background-color: #b0c4de;
}
Berikut adalah contoh untuk memberi latar belakang untuk elemen yang berbeda-beda, yaitu h1, p, dan
div.
h1 {
background-color: #6495ed;
}
p {

background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
2.2.2 Background Image

Properti background-image dipakai untuk menentukan gambar yang digunakan sebagai latar belakang
elemen.
Secara default, gambar background akan diulang sampai meliputi seluruh elemen.
body {
background-image: url("paper.gif");
}
Untuk menyetel pengulangan background, digunakan property background-repeat dengan nilai repeat-x
atau repeat-y. Berikut adalah contoh diulang hanya secara horizontal (repeat-x)
body {
background-image: url("gradient.png");
background-repeat: repeat-x;
}
Jika tidak ingin diulang, gunakan property dengan nilai no-repeat seperti berikut.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Posisi gambar background dapat ditentukan dengan properti background-position:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
2.2.3 Background – Shorthand (memperpendek) property

Pernyataan deklarasi CSS dapat juga disingkat dengan menggunakan property background. Urutan nilai
untuk property tersebut adalah sebagai berikut:
 background-color
 background-image

CSS Inosis Kursus Web H a l a m a n | 10
 background-repeat
 background-attachment
 background-position
Berikut adalah contoh pemakain property background.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Bila menggunakan properti singkatan urutan nilai properti adalah:
2.3 CSS Text

CSS teks dipakai untuk memformat teks halaman web. Daftar property yang dapat digunakan untuk
memformat teks adalah adalah sebagai berikut:
Properti Deskripsi
color Mengatur warna teks
direction Menentukan arah teks / menulis direction
letter-spacing Meningkatkan atau mengurangi ruang antara karakter dalam teks
line-height Mengatur tinggi baris
text-align Menentukan penyelarasan horisontal teks
text-decoration Menentukan dekorasi ya ditambahkan kedalam teks
text-indent Menentukan indentasi dari baris pertama dalam teks-blok
text-shadow Menentukan efek bayangan yang ditambahkan kedalam teks
text-transform Mengontrol kapitalisasi teks
unicode-bidi Digunakan bersama-sama dengan properti arah untuk men set atau me return
apakah teks harus diganti untuk mendukung beberapa bahasa dalam dokumen
yang sama
vertical-align Mengatur alignment vertikal elemen
white-space Menentukan ruang di dalam elemen yang di tangani
word-spacing Meningkatkan atau mengurangi ruang antara kata-kata dalam teks
Berikut adalah beberap contoh penggunaan property CSS untuk teks.
2.3.1 Color
Properti color digunakan untuk mengatur warna teks.
body {
color: blue;
}
h1 {
color: #00ff00;
}

h2 {
color: rgb(255,0,0);
}
2.3.2 Text-align
Properti text-align digunakan untuk mengatur text secara alignment horizontal. Teks dapat di atur di
tengah (center), atau rata kiri (left) atau rata kanan (right), atau rata kiri-kanan (justify).
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
2.3.3 Text Decoration

Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks. Contoh berikut
adalah untuk menambahkan garis bawah dan garis ditengah teks.
a {
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
2.3.4 Text Transformation

properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.
Contoh berikut adalah mengubah semua huruf menjadi huruf besar atau kecil, atau huruf pertama dari
setiap kata.

p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
2.3.5 Text Indentation

Properti text-indent digunakan untuk membuat indentasi baris pertama dari teks.
p {
text-indent: 50px;
}
2.4 CSS Font

Properti untuk CSS Font adalah sebagai berikut:
Properti Deskripsi
font Mengatur semua properti font dalam satu deklarasi
font-family Menentukan keluarga font untuk teks
font-size Menentukan ukuran font teks
font-style Menentukan Style font untuk teks
font-variant Menentukan apakah teks harus ditampilkan dalam font small-cops
font-weight Menentukan tebal font
CSS font properties mendefinisikan font family, boldness, size, dan style dari text.
2.4.1 Font Family

Dalam CSS, ada dua jenis nama cara pemilihan font family yaitu:
 generic family – memilih memakai sekelompok font dengan tampilan yang mirip
 font family – memilin font lebih spesifik dengan menentukan jenis font

Generic family Font family Deskripsi

Serif Times New Roman Font Serif memiliki garis kecil di ujung karakter
Georgia
Sans-serif Arial Font ini tidak memiliki garis-garis pada ujung
karakter (sans artinya tidak)
Verdana
Monospace Courier New Semua karakter monospace memiliki lebar yang
Lucida Console sama
2.4.1.1 Font Family

Font family teks yang dibuat dengan properti font-family.
Properti font-family harus mempunyai beberapa nama font untuk "fallback" sistem. Jika browser tidak
mendukung font pertama, ia mencoba font berikutnya.
Mulailah dengan font yang Anda inginkan, dan diakhiri dengan family generic, agar browser memilih
font yang sama dalam generic family.
Jika nama suatu font family yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New
Roman".
Jika ada lebih dari satu font family yang ditentukan, pisahkan dengan koma:
p {
font-family: "Times New Roman", Times, serif;
}
2.4.1.2 Font Style

Properti ini memiliki tiga nilai:
 normal - Teks ditampilkan seperti biasanya

 italic - Teks ditampilkan italic
 oblique - Teks "bersandar" (miring sangat mirip dengan italic, tapi kurang italic)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

2.4.1.3 Font Size

Properti font-size digunakan untuk menentukan ukuran teks.
Sebaiknya selalu gunakan tag HTML yang tepat, seperti <h1> - <h6> untuk judul dan <p> untuk paragraf,
agar lebih mudah setting di CSS.
Nilai font-size dapat berupa ukuran absolut, atau relatif.
Ukuran Absolute adalah mengatur teks ke ukuran tertentu. Teknik ini tidak begitu baik dilihat dari
aksesibilitas, tapi cocok jika mengetahui dengan jelas ukuran fisik output.
Ukuran relative adalah menentukan ukuran relatif terhadap elemen
2.4.1.4 Font Size dalam Pixels

Mengatur ukuran teks dengan pixel memberi Anda kontrol penuh atas ukuran teks:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
2.4.1.5 Set Font Size dalam em

Untuk menghindari masalah Resize dengan versi Internet Explorer, banyak pengembang menggunakan
em bukan pixel. 1-em sama dengan ukuran font saat ini. Ukuran teks default dalam browser adalah
16px. Jadi, ukuran default 1em sama dengan 16px.
Ukuran dapat dihitung dengan menkonversi pixel ke em menggunakan rumus berikut:
pixel / 16 = em
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}

2.5 CSS Links

Link dapat distyle dengan properti CSS. Misalnya warna, font-family, latar belakang, dan seterusnya. Link
juga dapat diatur style-nya berdasarkan statusnya.
Berikut adalah 4 status link:
 a:link - normal, link yang belum dikunjungi

 a:visited - link yang telah di kunjungi
 a:hover – ketika mouse berada pada link itu
 a:active – ketika link di klik
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */

a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Untuk menetapkan style terhadap status link, ada beberapa aturan yang harus diikuti :
 a:hover harus ada setelah a:link an a:visited

 a:active harus ada setelah a:hover
2.5.1 Link Styles Umum

Berikut adalah beberapa style link yang umum dipakai:
2.5.1.1 Text Decoration
a:link {
}
a:visited {

}
a:hover {
}
a:active {
}
2.5.1.2 Background Color
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
2.6 CSS List

CSS List adalah style yang diterapkan dalam teks model daftar (bullet). Dalam HTML, ada dua jenis list
style, yaitu:
 unordered lists -list item, ditandai dengan bullet

 ordered lists - list item, ditandai dengan angka atau huruf
Berikut adalah table property yang bisa dipakai untuk list
Property Description
list-style Mengatur semua properti untuk list dalam satu deklarasi
list-style-image Menentukan gambar sebagai penanda list item
list-style-position Menentukan apakah penanda list item akan muncul di dalam atau di luar aliran
konten
list-style-type Menentukan jenis penanda list item

2.6.1 Penanda List Item

Jenis penanda list item ditetapkan dengan properti list-style-type. Berikut adalah contoh untuk
membuat penanda list item berbeda-beda dengan property ini.
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
2.6.1.1 Gambar sebagai Penanda List Item

Untuk menentukan gambar sebagai penanda list item, menggunakan properti list-style-image:
ul {
list-style-image: url('sqpurple.gif');
}
2.6.1.2 List - Shorthand Properti

Format shorthand ini adalah menyingkat kode penulisan property dengan memasukkanya dalam satu
baris.
Bila menggunakan shorthand properti, urutan nilai-nilai nya adalah :
1. list-style-type
2. list-style-position
3. list-style-image
Berikut adalah contoh CSS dengan shorthand property.
ul {
list-style: square url("sqpurple.gif") no-repeat top right;;
}

3 Latihan 1
4 CSS Table
Tampilan tabel dapat HTML dapat dibuat style-nya dengan CSS. Properti yang tersedia untuk table cukup
lengkap, seperti: border, lebar dan tinggi, alignment teks, padding, warna.
4.1.1 Table Borders

Property border dipakai untuk menentukan border table dalam CSS.
Contoh di bawah ini menetapkan border black untuk elemen table, th, dan td:
table, th, td {
border: 1px solid black;
}
Perhatikan bahwa hasil dalam contoh diatas akan double border. Hal ini karena baik eleman table dan th
atau td memiliki border yang terpisah.
Untuk menampilkan boder tunggal untuk tabel, menggunakan properti border-collapse.
4.1.1.1 Collapse Borders

properti border-collapse mengatur apakah border tabel akan di satukan atau di pisahkan :
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
4.1.2 Table Width dan Height

Lebar dan Tinggi table didefinisikan dengan width dan height properti.
Contoh di bawah ini menetapkan lebar tabel sampai 100%, dan tinggi th menjadi 50px:
table {
width: 100%;
}
th {
height: 50px;
}

4.1.3 Table Text Alignment

Posisi teks dalam tabel dapat diatur secara horizontal dan vertical. Properti text-align menetapkan
alignment horisontal, seperti kiri, kanan, atau tengah:
td {
text-align: right;
}
Properti vertical-align menetapkan alignment vertikal, seperti atas, bawah, atau tengah:
td {
height: 50px;
vertical-align: bottom;
}
4.1.4 Table Padding

Untuk mengontrol ruang antara border dan konten dalam sebuah tabel, gunakan properti padding di td
dan th elemen:
td {
padding: 15px;
}
4.1.5 Table Color

Untuk menentukan warna border, dan warna teks dan latar belakang elemen th:
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
5 CSS Box Model
Semua elemen HTML dapat dianggap sebagai box. Dalam CSS, istilahnya adalah "box model", digunakan
ketika berbicara tentang desain dan tata letak.
Box model CSS pada dasarnya adalah sebuah box yang membungkus di sekitar elemen HTML, dan terdiri
dari: margin, border, padding, dan konten yang sebenarnya.

Box model memungkinkan kita untuk menempatkan border dan elemen ruang dalam kaitannya dengan
elemen elemen lain.

Gambar di bawah ini menggambarkan box model :
 Margin – Daerah paling luar di sekitar border. Margin transparan/tidak memiliki warna latar
 Border – Garis yang ada disekitar content dan berjarak berdasarkan nilai padding. Border dapat
berisi property seperti warn, ukuran, dan jenis garis.
 Padding – Daerah diantara content dan border. Padding akan memiliki property dari warna.
 Content - Isi dari kotak, di mana teks dan gambar tampil.
Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda
perlu tahu bagaimana model box bekerja.
5.1.1.1 Width dan Height Element

Berikut adalah contoh property untuk CSS Box model:
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
5.2 CSS Border

CSS border properti memungkinkan Anda untuk menentukan Style dan warna border suatu elemen.
Properti border-style menentukan border yang mau ditampilkan :
Nilai Keterangan
None tidak memiliki border
Dot border dengan sytle titik – titik
Dashed border dengan style garis lurus putus-putus
Solid border dengan style garis lurus

Double border denga sytle 2 garis lurus

Groove Mendefinisikan sebuah border beralur 3D. Efeknya tergantung pada nilai border-color
Ridge mendefinisikan border bergerigi 3D. Efeknya tergantung pada nilai border-color
Insert Mendefinisikan sebuah border yang berada di dalam dengan 3D Efeknya tergantung
pada nilai border-color
Outset Mendefinisikan awal border 3D. Efeknya tergantung pada nilai border-color
5.2.1 Border Width

Properti border-width digunakan untuk mengatur lebar border.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan:
thin, medium, atau thick (tipis, sedang, atau tebal)
Catatan: "border-width" properti tidak bekerja jika digunakan sendiri. Gunakan properti "border-style"
untuk mengatur border pertama kalinya
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
5.2.2 Border Color

Properti border-color digunakan untuk mengatur warna border. Property "border-color" tidak bekerja
jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur border pertama kali nya.
p.one {
border-color: red;
}
p.two {
border-color: #98bf21;
}
5.2.3 Border – Mengatur secara individual

Dalam CSS memungkinkan untuk menentukan border yang berbeda untuk sisi yang berbeda:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;

border-left-style: solid;
}
5.2.4 Border - Shorthand properti

Seperti yang Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika
berhadapan dengan border.
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti border individu
dalam satu properti. Hal ini disebut shorthand properti.
Properti border adalah shorthand untuk properti border masing-masing sebagai berikut:
 border-width
 border-style (dibutuhkan)
 border-color
p {
border: 5px solid red;
}
5.3 CSS Margin

Margin margin adalah area paling luar di sekitar elemen (luar border).
Bagian atas, kanan, bawah, dan margin kiri dapat diubah secara independen menggunakan properti
terpisah. Properti margin shorthand juga dapat digunakan untuk mengubah semua margin sekaligus.
Daftar property margin adalah:
Properti Deskripsi
margin Untuk pengaturan properti margin dalam satu deklarasi
margin-bottom Mengatur elemen margin bawah
margin-left Mengatur elemen margin kiri
margin-right Mengatur elemen margin kanan
margin-top Mengatur elemen margin atas
5.3.1.1 Nilai Margin

Nilai Deskripsi
auto Browser yang menghitung margin secara otomatis. Dipakai agar posisi di tengah
length Menentukan margin di px, pt, cm, dll Nilai default adalah 0px
% Menentukan margin dalam persentase dari lebar elemen
inherit Menentukan bahwa margin harus diwarisi dari elemen induk

5.3.2 Margin Individual sides

Dalam CSS, memungkinkan untuk menentukan margin yang berbeda untuk sisi yang berbeda dari
elemen :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
5.3.3 Margin - Shorthand properti

Untuk mempersingkat kode CSS, memungkinkan untuk menentukan semua properti margin dalam satu
properti. Hal ini disebut shorthand properti.
p {
margin: 100px 50px;
}
Properti margin dapat memiliki dari satu sampai empat nilai.
margin: 25px 50px 75px 100px;
 top margin 25px

 right margin 50px
 bottom margin 75px
 left margin 100px
margin: 25px 50px 75px;
 top margin 25px

 right dan left margins 50px
 bottom margin 75px
margin: 25px 50px;
 top dan bottom margins 25px

 right dan left margins 50px
margin: 25px;
 semua margins 25px

5.4 CSS Padding

Padding adalah area di sekitar konten tapi di dalam border dari elemen. Padding dipengaruhi oleh warna
latar belakang dari elemen.
Property Description
padding Untuk pengaturan properti padding dalam satu deklarasi
padding-bottom Mengatur elemen padding bawah
padding-left Mengatur elemen padding kiri
padding-right Mengatur elemen padding kanan
padding-top Mengatur elemen padding atas
Bagian atas, kanan, bawah, dan padding kiri dapat diubah secara independen menggunakan properti
terpisah.
5.4.1 Nilai Padding

Nilai Deskripsi
length Mendefinisikan padding (dalam pixel, pt, em, dll)
% Mendefinisikan padding dalam % dari elemen
5.4.2 Padding - Individual sides

Dalam CSS, mungkin untuk menentukan padding yang berbeda untuk sisi yang berbeda:
p {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
5.4.3 Padding - Shorthand property

Untuk mempersingkat kode, dimungkinkan menentukan semua properti padding dalam satu properti.
p {
padding: 25px 50px;
}
Properti padding dapat memiliki dari satu sampai empat nilai.
padding: 25px 50px 75px 100px;
 top padding 25px

 right padding 50px
 bottom padding 75px
 left padding 100px

padding: 25px 50px 75px;
 top padding 25px

 right and left paddings 50px
 bottom padding 75px
padding: 25px 50px;
 top and bottom paddings 25px

 right and left paddings 50px
padding: 25px;
 semua paddings 25px
5.5 CSS Dimension

CSS Properti dimensi memungkinkan Anda untuk mengontrol tinggi dan lebar dari elemen.
Daftar property dimensi adalah sebagai berikut:
Properti Deskripsi Nilai

height Mengatur ketinggian elemen auto
length
%
inherit
max-height Mengatur ketinggian maksimum elemen none
length
%
inherit
max-width Mengatur lebar maksimum elemen none
length
%
inherit
min-height Mengatur ketinggian minimum elemen length
%
inherit
min-width Mengatur lebar minimum elemen length
%
inherit
width Mengatur lebar elemen auto
length
%

inherit
6 CSS Display dan Visibility
CSS Display dan Visibility adalah properti display untuk menentukan apakah elemen ditampilkan/tidak,
dan properti visibilitas menentukan apakah sebuah elemen harus terlihat atau tersembunyi.
Kedua property ini akan menghilangkan elemen dari tampilan, tapi keduanya memiliki perbedaan.
visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti
sebelumnya.
h1.hidden {
visibility: hidden;
}
Properti display: none menyembunyikan elemen, dan tidak akan mengambil ruang apapun.
h1.hidden {
display: none;
}
7 CSS Block dan Inline
Elemen blok adalah elemen yang mengambil lebar penuh (baris) yang tersedia, dan mengambil satu
baris sebelum dan setelah.
Contoh elemen blok adalah
 <h1>
 <p>
 <li>
 <div>
Sebuah elemen inline hanya membutuhkan sebanyak lebar yang diperlukan, dan tidak mengambil
penuh satu baris.
Contoh elemen inline:
 <span>
 <a>

7.1.1 Mengubah elemen Display

Mengubah elemen inline dari elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman
terlihat dengan cara tertentu, dan masih mengikuti standar web.
Contoh berikut menampilkan <li> elemen sebagai elemen inline:
li {
display: inline;
}
Contoh berikut menampilkan <span> elemen sebagai elemen blok:

contoh
span {
display: block;
}

CSS I Modul 1811

Diunggah oleh

Informasi Dokumen

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

CSS I Modul 1811

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascading Style Sheet - CSS

1 APA ITU CSS ..................................................................................................................................... 3

1.1 Apa itu CSS? .............................................................................................................................................. 3

1.2 Sintak CSS.................................................................................................................................................. 3

1.3 Komentar di CSS ........................................................................................................................................ 4

1.4 CSS Selectors ............................................................................................................................................. 5

1.5 Group Selectors ......................................................................................................................................... 6

1.6 Cara Memasang CSS .................................................................................................................................. 6

2 CSS DASAR ........................................................................................................................................ 7

2.1 CSS Color ................................................................................................................................................... 7

2.2 CSS Background ......................................................................................................................................... 8

2.3 CSS Text .................................................................................................................................................. 10

2.4 CSS Font .................................................................................................................................................. 12

2.5 CSS Links ................................................................................................................................................. 15

2.6 CSS List .................................................................................................................................................... 16

3 CSS TABLE ...................................................................................................................................... 18

4 CSS BOX MODEL ........................................................................................................................... 19

4.2 CSS Border............................................................................................................................................... 21

4.3 CSS Margin .............................................................................................................................................. 23

4.4 CSS Padding ............................................................................................................................................. 25

4.5 CSS Dimension ........................................................................................................................................ 26

5 CSS DISPLAY DAN VISIBILITY .................................................................................................. 27

6 CSS BLOCK DAN INLINE ............................................................................................................. 27

Inosis Kursus Web – http://inosispro.com

7 FLOATING & POSITIONING ......................................... ERROR! BOOKMARK NOT DEFINED.

7.1 Normal Flow ...................................................................................................Error! Bookmark not defined.

7.2 Floating ..........................................................................................................Error! Bookmark not defined.

7.3 Positioning Basics ...........................................................................................Error! Bookmark not defined.

7.4 Page Layout ....................................................................................................Error! Bookmark not defined.

Inosis Kursus Web – http://inosispro.com

1 Apa itu CSS

1.1 Apa itu CSS?

 CSS kependekan dari Cascading Style Sheets

HTML dimaksudkan untuk menentukan isi dari dokumen, seperti:

Semua browser mendukung CSS saat ini.

 CSS Menghemat banyak pekerjaan!

1.2 Sintak CSS

Inosis Kursus Web – http://inosispro.com

1.3 Komentar di CSS

Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /.

Inosis Kursus Web – http://inosispro.com

1.4 CSS Selectors

1.4.1 Element Selector

1.4.3 class Selector

Inosis Kursus Web – http://inosispro.com

1.5 Group Selectors

Maka kita bisa memuat kode CSS berikut untuk meminimalkannya

1.6 Cara Memasang CSS

1. External style sheet

1.6.1 External Style Sheet

Inosis Kursus Web – http://inosispro.com

1.6.2 Internal Style Sheet

1.6.3 Inline Styles

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

2.1 CSS Color

red format nama

rgb(255,0,0) format rgb

Inosis Kursus Web – http://inosispro.com

rgb(100%,0%,0%) format rgb

#ff0000 format hex code

#f00 format hex code

Nama transparent juga bisa dipakai.

2.2 CSS Background