Materi CSS | Catatan Kecil

CASCADING STYLE SHEETS (CSS)
 CSS merupakan bagian untuk membuat dynamic HTML.
 CSS mendeskripsikan bagaimana tampilan document HTML di layar
 CSS digunakan untuk membuat special efek

ATURAN PENULISAN CSS
1. EXTERNAL STYLE SHEET
Bentuk :



dimana :
”
REL=“stylesheet”, menerangkan halaman aman ini akan dikenai efek style sheet
TYPE=“text/css”, file yang dipanggil berupa css
HREF=“css_files.css”, alamat dokumen stylesheet yang dipanggil
File: efek.css
body{
color: green;
background: white;
font-family: arial;

}



Desain Web



DESAIN WEB
Latihan Desain Web Dengan CSS



ATURAN PENULISAN CSS



Desain Web

body {

color: white;
background: green;
font-family : arial;
}



BROWSER
Browser adalah aplikasi untuk mengakses web



ATURAN PENULISAN CSS
3. INLINE STYLE SHEET


Desain Web


BROWSER

Browser adalah aplikasi untuk menjalankan web



MEMBUAT BACKGROUND PADA CSS
1. BACKGROUND WARNA


Menggunakan Background Warna

body {background-color : #99CCFF}
h2 {background : green}
h3 {background-color : transparent}
p {background : rgb(240,248,255)}



Header 2, Background Hijau
Header 3, Bakground Transparan
Background pada paragraph

MEMBUAT BACKGROUND PADA CSS
2. Background gambar
Properties
background-image

url

Value

Keterangan
Alamat gambar yang dituju

background-repeat

repeat
repeat-x
repeat-y

no-repeat

Diulang dalam halaman
Diulang sumbu x
Diulang sumbu y
Tampil 1 gambar

Background-position

top lef
top center
top right
center lef
center center
center right
bottom lef
bottom center
bottom right
x-% y-%
x-pos y-pos

Atas kiri halaman
Atas tengah halaman
Atas kanan halaman
tengah kiri halaman
Pusat halaman
tengah kanan halaman
bawah kiri halaman
bawah tengah halaman
bawah kanan halaman
Pakai nilai %

MEMBUAT BACKGROUND IMAGE PADA CSS



Menggunakan Background Gambar

BODY
{

background-image: url(“bg.jpg");
background-repeat: repeat-x;
}



Background Berulang pada Sumbu X



MEMBUAT BACKGROUND IMAGE PADA CSS



Menggunakan Background Gambar

BODY
{background-image:url (“logo.jpg");
background-repeat: no-repeat;
background-position: center center;

}



Background di Pusat Halaman



PENGATURAN HALAMAN MENGGUNAKAN MARGIN



Pengaturan Margin

BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;

}



Pengaturan Batas Halaman (atas 1cm,
kanan 2cm,bawah 1cm, kiri 2cm)



PENGATURAN HALAMAN MENGGUNAKAN PADDING


Pengaturan Margin

BODY {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}

Text ini berada di tengah halaman ,
karena di lakukan pengaturan halaman
dengan menggunakan padding atas 10%,
kanan 20%,bawah 40%,dan kiri 20%.



FORMAT TEKS
Properties
Value
Pengaturan warna
color
green, dll
Pengaturan Spasi (jarak antar karakter)
letter-spacing
Normal
Length

Perataan Text
text-align
lef
right
center
justify
text-decoration

none
underline
overline
line-through
blink

Pengaturan text indentasi
text-indent
length
%
Pengubahan Bentuk Karakter
text-transform
capitalize
uppercase
lowercase
none

Keterangan

Ukuran standar HTML
Ukuran panjang (cm,px)

Bentuk standar
Bergaris bawah
Bergaris atas
Text dicoret
Text berkedip
Dengan cm, px
Dengan persentase



Format Text

p {color : green; letter-spacing: 0.5cm}
h1 {letter-spacing: -2px}
h2 {text-align: center}
h3 {text-align: left}
h4 {text-align: right}



Pengaturan Spasi Pada Paragraph
Header 1
Header 2, Di tengah
Header 3, Di kiri
Header 4, Di kanan





Format Text

em {text-decoration : overline}
h2 {text-decoration: blink}
h3 {text-decoration: underline}
a {text-decoration: none}



Bentuk Overline
Header 2, Bentuk Line-through
Header 3, Bentuk Underline
Penggunaan Dalam Link





Format Text

p.besar {text-transform: uppercase}
p.kecil {text-transform: lowercase}



pengubahan kedalam huruf besar
PENGUBAHAN KEDALAM HURUF KECIL



PENGATURAN FONT
Properties
Jenis Font
font-family
Ukuran Huruf
Font-size

Value
arial, dll
Small
Medium
Large
Length
%

Pengaturan gaya pada font
font-style
normal
italic
oblique
Ketebalan huruf
font-weight

Keterangan

normal
bold
100 ~ 900

Kecil
Menengah
Besar
Besar font (pt,px)
Persentase



Pengaturan Font

p.italic
{
font-size :200% ;
font-style: italic;
}
p.normal{
font-family : verdana ;
font-style: normal;
}
p.oblique {font-style: oblique}



Menggunakan Style Italic
Menggunakan Style Normal
Menggunakan Style Oblieque





Pengaturan Font

p.normal
{
font-family : verdana ;
font-weight: normal;
}
p.thick
{
font-family : verdana ;
font-weight: bold;
}
p.thicker
{
font-family : times ;
font-weight: 900;
}




Desain Web

Desain Web
Desain Web


PENGATURAN TABEL


Pengaturan Table spec

TH {
color : #FFFFFF;
background-color : #336699;
border-width: 1px ;
border-style:solid;
border-color :red ;
font-size: 9pt;
}
TD {
color : red;
background-color : #E6E6FA;
border-width: 1px ;
border-style:solid;
border-color :blue ;
font-size: 9pt;
}





Nama
No Test
Nilai