Selasa, 06 November 2012

PENJABARAN CSS -1

CASCADING STYLE SHEET (CSS) merupakan bahasa style sheet yang digunakan untuk mengatur tampilan document. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. CSS dapat mengolah ukuran gambar, warna bagian pada sebuah text, ukuran border, warna border, warna hyperlink, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya yang sangat banyak. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium (W3C) pada tahun 1996.

Type of CSS

Ada dua type penulisan document CSS yaitu di dalam ducument HTML/Inline <style type="text/css"></style> dan dengan cara di panggil href CSS <link href="" type="" rel="" />.

Inline CSS

contoh 1:
<p><b style="color: blue;">Text ini berwarna biru dan mempunyai ketebalan</b></p>
span
<span style="color: blue;">This is green</span> and this ain't.

contoh 2:
<html>
<head>
<title> TITLE </title>
<style type="text/css">
.biru {
 color: blue;
 font-weight: bold;
 font-style: italic;
}
</style>
</head>

<body>
Selain itu kami menyediakan Camera dengan merek sebagai berikut:
<span class="biru">Sony</span> dan <span class="biru">Kodak</span>.
</body>
</html>
Hasilnya akan seperti ini:
Selain itu kami menyediakan Camera dengan merek sebagai berikut: Sony dan Kodak.

Link href

Cara penyimpanan css ini harus di akhiri dengan titik (.) css contoh: style.css
contoh pemanggilan css
<head>
<title>Judul</title>
<link type="text/css" href="style.css" rel="stylesheet" />
</head> 
 

CSS Syntax

CSS mempunya dua aturan penting yaitu selector dan declaration, agar tidak pusing kita lihat contoh berikut ini:
Document css
simpan dengan nama latih1.css Inagt setiap penyimpanan document CSS harus di akhiri dengan (.css)
h1 { color: red; }
h1 merupakan selector sedangkan declaration isi dari kurung kurawal { color: red; } , didalam declaration terdapat property dan value. color disi sebagai property sedangkan red sebagai value/isi.
Document html
<html>
<head>
<title>Contoh HTML and CSS</title>
<link href="latih1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Melihat Hasil</h1>
</body>
</html>
Maka hasilnya akan seperti ini:

Melihat Hasil


contoh berikutnya simpan dengan nama latih2.css
Document CSS
body {
 text-align: center;
}
h1 {
 color: blue;
}
p {
 color: red;
 font-family: Tahoma;
}
Document HTML
<html>
<head>
<title>Contoh HTML and CSS</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Hello World</h1>
<p>Ini adalah paragraf pertama yang menceritakan seorang manusia dan seekor .....</p>
</body>
</html>
   
 

CSS Selector Class and Id

Selctor Class

Selector class ini ditantadai dengan titik (.) contoh:
.angka {
color: red;
background-color: green;
}
CSS Code
.header { position: relative; background-color: #874da3; } Cara pemanggilan di HTML
<body> <div class="header"> <p>Isikan content anda disini........</p> </div> </body>

Selector Id

Selector Id ditandai dengan (#) contoh: #angka {
color: red;
font-size: 21px;
}
CSS Code
#header { color: #00f; font-weight: bold; } Cara penempatan di HTML
<body> <div id="header"> <h1>Selector</h1> </div> </body>


Background Color

Background-color adalah tampilan warna secara menyeluruh. element dari background-color yaitu property dan value sebagai isi dari background contoh body { background-color: red; }
    Warna/Color yang di pakai di CSS adalah sebagai berikut:
  • Nama color langsung di tulis pada valuenya seperti red,blue,green dll contoh: { color: red; }
  • HEX value contoh: { color: #00F } #00F merupakan code warna biru
  • RGBA value contoh { color: rgba(0,0,0,0.5); } warna pada rgba sifatnya bisa transparan
contoh:

color: red; color: #00F color: rgba(0,0,0,0.5);

Contoh background-color
<html>
<head>
<title>Judul</title>
<style type="text/css">
body {
 background-color: #999933;
}
</style>
</head>

<body>
<h1>Background Ane</h1>
<p>Backgroud bisa memperindah tampilan web anda..................</p>
<body>
</html>
Lihat Hasilnya

Background Image

contoh penulisan background-image
<html>
<head>
<style type="text/css">
body {
 background-image: url(gunung.jpg);
}
</style>
</head>

<body>
<h1>Background Ane</h1>
<body>
</html>
Lihat Hasilnya

Background Repeat

Background repeat ini terbagi dua yaitu background-repeat:ripeat; yang artinya di ulangi, beberapakali dan background-repeat:no-repeat; artinya tidak di ulang cuma satu kali. Background ripeat ada dua bagian ripeat-y dan repeat-x
repeat-x
<html>
<head>
<style type="text/css">
body {
 background-image: url(bg.jpg);
 background-repeat: repeat-x;
}
</style>
</head>

<body>
<h1>Hello World</h1>
<body>
</html>
Lihat hasilnya

repeat-y
<html>
<head>
<style type="text/css">
body {
 background-image: url(bg-y.jpg);
 background-repeat: repeat-y;
}
</style>
</head>

<body>
<h1>Hello World</h1>
<body>
</html>
Lihat hasilnya

no-repeat
<html>
<head>
<style type="text/css">
body {
 background-image: url(tree.jpg);
 background-repeat: no-repeat;
}
</style>
</head>

<body>
<h1>Hello World</h1>
<body>
</html>
Lihat hasilnya

no-repeat position
<style type="text/css">
body {
 background-image: url(tree.png);
 background-repeat: no-repeat;
 background-position: right top;
}
</style>
Lihat hasilnya
Anda juga dapat mempermudah penulisan seperti berikut:
<style type="text/css">
body {
 background-image: url(tree.png) no-repeat right top;
}
</style>

Background Attachment

Background Attachment ini merupakan background pengunci atau diam { background-attachment: fixed; } contoh:
<html>
<head>
<style type="text/css">
body {
 background-image: url(tree.png);
 background-repeat: no-repeat;
 background-attachment: fixed;
}
</style>
</head>

<body>
<h1>Hello Tree<h1>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<h1>Hello Tree<h1>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
<p>Tes menggunakan background attachment, hasilnya bagus dan menyenangkan ya.......................</p>
</body>
</html>
Lihat hasilnya

Background Position

contoh
<style type="text/css">
body {
 background-image: url();
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
}
</style>
Lihat hasilnya


Text Alignment

{ text-align: center; } /* text align center berfungsi agar text berada pada posisi tengah */
{ text-align: right; } /* text align right berfungsi agar text berada pada posisi kanan */
{ text-align: justifly; } /* justifly berfungsi untuk merapihkan text */
Contoh text alignment
<html>
<head>
<title>Text align</title>
<style type="text/css">
h1 {
 text-align: center;
}
p.pertama {
 text-align: right;
}
p.kedua {
 text-align: center;
}
</style>
</head>

<body>
<h1>Text Alignment</h1>
<p class="pertama">25 Nov 2011</p>
<p>Text align mempunya fungsi yang sangat baik dan sangat dibutuhkan dalam pembuata website.......</p>
</body>
</html>
Lihat hasilnya

Text Decoration

{ text-decoration: overline; } /* garis atas */
{ text-decoration: line-trought; } /* garis tengah strike coret */
{ text-decoration: underline; } /* garis bawah */
{ text-decoration: blink; } /* berkedip-kedip */
Contoh text decoration
<html>
<head>
<style type="text/css">
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
h4 { text-decoration: blink; }
</style>
</head>

<body>
<h1>text decoration overline</h1>
<h2>text decoration line through</h2>
<h3>text decoration underline</h3>
<h4>text decoration blink</h4>
</body>
</html>
Lihat hasilnya

Text Transform

{ text-transform: uppercase; } /* huruf besar */
{ text-transform: lowercase; } /* huruf kecil */
{ text-transform: capitalize; } /* huruf capital */
Contoh text transform
<html>
<head>
<style type="text/css">
h2.uppercase { text-transform: uppercase; }
h2.lowercase { text-transform: lowercase; }
h2.capitalize { text-transform: capitalize; }
</style>
</head>

<body>
<h2 class="uppercase">text uppercase</h2>
<h2 class="lowercase">text lowercase</h2>
<h2 class="capitalize">text capitalize</h2>
</body>
</html>
Lihat hasilnya

Text Indent

{ text-indent: value; } /* text bisa digeser kedalam sesuai dengan keinginan */
Contoh text indent
<html>
<head>
<style>
p { text-indent: 100px; }
</style>
</head>

<body>
<h1>Text Indent</h1>
<p>Lorem ipsum dolor sit amet, cras fusce magna tortor commodo elit lorem. Pellentesque massa nec vitae sagittis lectus, molestie vestibulum aliquam. Vitae diam a consectetuer mattis sit pharetra. Vitae urna, ac ac fusce, ante velit, metus porttitor nibh maecenas et ex vitae. Cursus proin, etiam massa ipsum velit id. Praesent accumsan lorem. Platea aut mi sem tincidunt est. Dui vel, vitae aliquam lectus etiam augue suspendisse duis, fringilla dictumst odio eros at, ligula ac lectus vehicula</p>
</body>
</html>
Lihat hasilnya

Contoh: CSS Text
<html>
<head>
<style type="text/css">
h1 {
 text-align: center;
 text-transform: uppercase;
}
p {
 text-indent: 50px;
 text-align: justifly;
 letter-spacing: 3px;
}
</style>
</head>

<body>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<p>Lorem ipsum dolor sit amet, cras fusce magna tortor commodo elit lorem. Pellentesque massa nec vitae sagittis lectus, molestie vestibulum aliquam. Vitae diam a consectetuer mattis sit pharetra. Vitae urna, ac ac fusce, ante velit, metus porttitor nibh maecenas et ex vitae. Cursus proin, etiam massa ipsum velit id. Praesent accumsan lorem. Platea aut mi sem tincidunt est. Dui vel, vitae aliquam lectus etiam augue suspendisse duis, fringilla dictumst odio eros at, ligula ac lectus vehicula.</p>
</body>
</html> 
 
 

Font Family

Ada tua type keluarga font family yaitu:
  • Font family contohnya seperti ("Arial" dan "Times New Roman")
  • Generic family contohnya seperti ("serif" dan "Monospace")
Contoh:
<html>
<head>
<style type="text/css">
h1 { font-family: Helvetica; }
p.font_pertama { font-family: Arial,Helvetica,sans-serif; }
p.font_kedua {  serif,sans,times new roman; }
</style>
</head>

<body>
<h1>Font Family</h1>
<p class="font_pertama">Keluarga Font sangatlah banyak dan bermacam-macam jenis ..............</p>
<p class="font_kedua">Keluarga Font sangatlah banyak dan bermacam-macam jenis ..............</p>
</body>
</html>
Web browser

Font Family

Keluarga Font sangatlah banyak dan bermacam-macam jenis ..............
Keluarga Font sangatlah banyak dan bermacam-macam jenis ..............

Font Style

Isi dari Font style diantaranya:
  • Italic - text ini menjadi miring
  • Normal - text normal
  • Oblique - miring
contoh:
<html>
<head>
<style type="text/css">
h1 { font-style: italic; }
h2 { font-style: normal; }
h3 { font-style: oblique; }
</style>
</head>

<body>
<h1>Font style Italic</h1>
<h2>Font style Normal</h2>
<h3>Font style Oblique</h3>
</body>
</html>
Web browser

Font style Italic

Font style Normal

Font style Oblique


Font Weight

Isi dari font weight
  • Bold
  • Normal
  • Lighter
Contoh
<html>
<head>
<style type="text/css">
p.bold { font-weight: bold; }
p.normal { font-weight: normal; }
p.lighter { font-weight: lighter; }
</style>
</head>

<body>
<h3>Font weight bold</h3>
<p>font weight normal</p>
<p>font weight lighter</p>
</body>
</html>
Web browser
Font weight bold
Font weight normal
Font weight lighter

Font Size

Font size terbagi menjadi beberapa type:

Font size persen (%) contoh

<html>
<head>
<style type="text/css">
body { font-size: 100%; }
</style>
</head>

<body>
<h2>Font Size</h2>
<p>Font size 100% ukuran text normal</p>
</body>
</head>
Web browser

Font Size

Font size 100% ukuran text normal

Font Size Pixels (px) contoh:

<html>
<head>
<style type="text/css">
h4 { font-size: 40px; }
p { font-size: 14px; }
.mdf { font-size: 25px; }
</style>
</head>

<body>
<h4>Font Size Pixels</h4>
<p><span class="mdf">D</span>i font size pixel kita bebas menentukan ukuran huruf sesuai dengan keinginan kita......</p>
</body>
</html>
Web browser

Font Size Pixels

Di font size pixel kita bebas menentukan ukuran huruf sesuai dengan keinginan kita......


CSS Links

  • a:link /* a normal, unvisited link */
  • a:viseted /* a link the user has visited */
  • a:active /* a link the moment it is clicked */
  • a:hover /* a link when the user mouses over it */
contoh:
<html>
<head>
<style type="text/css">
a:link, a:viseted, a:active, a:hover { color: #2809EE; }
a:hover { color: #55AF17; }
</style>
</head>

<body>
<a href="#">LINK</a>
</body>
</html>
Hasilnya akan seperti ini "LINK"

Background-color Link

Contoh
<html>
<head>
<style>
a:link, a:active, a:visited, a:hover { color: red; font-weight: bold; }
a:hover { background-color: green; color: white; }
</style>
</head>

<body>
<p><a href="#">a link and background color</a></p>
</body>
</html>
Hasinya akan seperti ini: a link and background color

Text Decoration Link

Contoh
<html>
<head>
<style type="text/css">
a:active, a:link, a:visited { color: blue; text-decoration: underline; }
a:hover { text-decoration: none; }
</style>
</head>

<body>
<a href="">Text Decoration</a>
</body>
</html>
Hasilnya akan seperti ini: Text decoration


CSS List

List-style-type

  • Disc
  • Circle
  • Square

Contoh: list-style-type: disc;

ul { list-style-type: disc }
Code HTML
<ul>
 <li>Disc</li>
 <li>Circle</li>
 <li>Square</li>
</ul>
  • Disc
  • Circle
  • Square

Contoh: list-style-type: circle;

ul { list-style-type: circle; }
Code HTML
<ul>
 <li>Disc</li>
 <li>Circle</li>
 <li>Square</li>
</ul>
  • Disc
  • Circle
  • Square

Contoh: list-style-type: square;

ul { list-style-type: square; }
Code HTML
<ul>
 <li>Disc</li>
 <li>Circle</li>
 <li>Square</li>
</ul>
  • Disc
  • Circle
  • Square

Image List list-style-image

Contoh:
ul { list-style-image: url(star.jpg); }
Code HTML
<ul>
 <li>Milk</li>
 <li>Coffee</li>
 <li>Soda</li>
</ul>
Web browser
  • Milk
  • Coffee
  • Soda

CSS Width and height

  • Width - lebar kesamping contoh: width:100px; width:100%; width:auto;
  • Height - panjang kebawah contoh: height:100px; height:100%; height:auto;
Contoh
div {
 width: 250px;
 height: 200px;
 border: 5px solid #f00;
}
HTML Code
<div>
 <h3>BOX</h3>
 <p>Paragraf kali ini berada didalam sebuah box</p>
</div>
Web Browser

BOX

Paragraf kali ini berada didalam sebuah box

Box Background-color

Contoh:
div {
 width: 250px;
 height: auto;
 background-color: #C82B88;
 text-align: center;
 color: #FFFFFF;
}
HTML Code
<div>
 <h2>BOX</h2>
 <p>Paragraf ini dibuat dengan berbagai variasi dan bermacam pertimbanagan</p>
</div>
Web browser:

BOX

Paragraf ini dibuat dengan berbagai variasi dan bermacam pertimbanagan


CCS Border

Border adalah sebuah batas yang di tandai oleh warna. contoh:
--Border--

Border Style

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: outset;
border-style: inset;
border-style: ridge;
border-style: groove;
border-style: none;

Border Color

Contoh:
p {
 border-style: solid;
 border-color: red;
}

Border type size and color

Contoh:
p {
 border: 1px solid red;
}

Border left, right, top and bottom

border-top-style: double;
border-left-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;

Contoh CSS Border

h1 {
 border-bottom: 3px dotted #666;
 text-align: center;
}
p.pertama {
 border: 1px solid #000;
}
p.kedua {
 border: 2px double #ff0;
}
HTML Code
<body>
<h1>Border atau Batas</h1>
<p class="pertama">Border merupakan batas yang sangat penting dalam sebuah bahasa pemograman web</p>
<p class="kedua">Border merupakan batas yang sangat penting dalam sebuah bahasa pemograman web</p>
</body>
Lihat Hasilnya


CSS Outline

Autline Properties

Property
Outline
Outline-color
outline-style
outline-width
Value
outline-color
outline-style
outline-width
inherit
color name
Hex number
rgb number
invert
inherit
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Contoh:
<html>
<head>
<style type="text/css">
h1 {
 outline-style: dashed;
 outline-color: #f00;
 border: 1px solid #00f;
 text-align: center;
 padding: 10px;
}
</style>
</head>
<body>
<h1>Outline Properties</h1>
</body>
</html>
Lihat Hasilnya
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)