Tentang CSS
https://im-informatika.blogspot.com/2014/11/makalah-css_18.html
Tentang CSS
CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Keuntungan menggunakan CSS
- Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
- Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
- Mempercepat proses rendering/pembacaan HTML
Cara Penyisipan CSS
a. Inline style sheet
Penulisan didalam elemen HTML
Misalnya :
<body style=“font-size:x-large”> <h1 style=”color:red; font-size:18pt”> <p style =“font-size:12pt; fontfamiliy:courier;font-variant: normal; color: navy;”>
b. Internal / embedded style sheet
Style dipisah dan dikumpulkan pada bagian
HEAD
Contoh:
<head>
<style>
body {
color:#ffffff; background:black;
font-family:Verdana, Arial;
font-size:12px;
}
p {
line-height:20px;
}
h1{
color:brown;
}
</style>
</head>
c. Eksternal style sheet
Sama seperti embedded style tetapi dibuat pada file terpisah dengan ekstension “.css”. Sebuah dokumen bisa menggunakan lebih dari satu file CSS, di-import (dipanggil) pada bagian HEAD
Ada dua cara:
1. <link rel="stylesheet"type="text/css”
href="style.css style.css style.css" />
2. <style>@import "style.css style.css style.css";</style>
Komentar dalam Style Sheet
Comments biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya. Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:
/* isi Comments */
Contoh:
H1 {
color:blue;
}
H1 {
color:blue;
}
/* H1 elements akan menjadi biru */
Aturan Penulisan
Selector : Terdiri dari tag, class, ID
Declaration : Mendeskripsikan property dan value
h1{ color:brown; }
Keterangan :
Selector : H1
Properti : Color
Value : brown
Macam – macam Selector
Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
Class
Diawal penulisan menggunakan tanda titik,
Contoh :
body {
color:#ffffff; background:black;
font-family:Verdana, Arial;
font-size:12px;
}
p {
line-height:20px;
}
h1{
color:brown;
}
.isiteks{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
ID
Diawali dengan tanda #, dapat digunakan
untuk mendefinisikan header,content, dan
footer dalam desain web krn didefiniskan
denga ID berbeda.
Contoh :
#judul{
font: bold 150% Arial,sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px;
}
CSS Background
Background-color
Body{
Background-color : green;
}
|
Background-attachment
Body {
Background-attachment : scroll;
}
|
Background-position
Body {
Background-repeat : no-repeat;
Background-image : ur l(image/gambar1.jpg);
Background-position : bottom center;
}
|
Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url(image/gambar1.jpg);
}
|
Background-Image
Body{
Background-image : url(gambar1.jpg);
}
|
CSS Font
Property Font
Font-family
p {
Font-family : Arial,Helvetica;
}
|
Font-size (satuan em,pt,px,mm,cm,%)
p {
Font-size : 24em;
}
|
Font-style (nilai : oblique,italic,normal)
p {
Font-style : oblique;
}
|
Font-variant (nilai : normal,small-caps)
p {
Font-family : Arial,Helvetica;
}
|
Font-weight (nilai :normal,bold,bolder,lighter,100-900)
p {
Font-weight : bolder;
}
|
CSS TEKS
Property teks
1. color
p {
color :red;
}
2. teks-align (nilai left,right,center,justify)
p {
Text-align :justify;
}
3. text-decoration (nilai : none,underline,overline,line-through,blink)
p {
Text-decoration :overline;
}
4. text-transform (nilai : none,capitalize,uppercase,lowercase)
p {
Text-transform : capitalize;
}
5. Letter-spacing
p {
letter-spacing : 20px;
}
6. Teks-Indent
p {
Text-indent : 50px;
}
CSS List
Property list
1. List-style-type (nilai : disc,circle,square,lower-roman,upper roman,none,lower-alpha,upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style- image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
CSS Border
Property Border
1. border-style (nilai : style (nilai : none, dotted, dashed, solid, double, groove, ridge, inset, outset)
.b1 {
Border-style-type : groove ;
}
2. border-bottom-style (nilai : style (nilai : none, dotted, dashed, solid, double, groove, ridge, inset, outset)
.b1 {
Border-bottom-style : groove ;
}
3. border-bottom-width ()
.b1 {
border-bottom-width :10px;
}
4. border-bottom-color ()
.b1 {
border-bottom-color :red;
}
Margin
Margin : pengaturan batas atas, bawah, kanan, kiri pada halaman web
Body {
Margin-top : 4cm;
Margin-right : 3cm;
Margin-bottom :3cm;
Margin-left : 4cm;
}
Padding
Padding : pengaturan batas atas, bawah, kanan, kiri antara border dengan content.
.kotak {
Padding-top : 25px;
Padding-right : 25px;
Padding-bottom : 25px;
Padding-left: 25px; border-top-style: solid;
border-right-style: solid; border-bottom-style:
solid; border-left-style: solid;
}
<SPAN> & <DIV>
Style dapat digunakan dengan memakai tag kontainer <SPAN> dan <DIV>. Tag ini biasanya berfungsi untuk mengoverride style yang sudah ada sebelumnya.
Contoh div :
<div id="atas"> <h1>Welcome to My Web</h1> </div> <div id="left"> <p>Navigate:</p> <p><a href="index.html">Home</a><br /> <a href="news.html">News</a><br /> <a href="about.html">About Us</a><br /> <a href="contact.html">Get in Touch</a></p> </div>
