Cascading Style Sheet

Sejarah CSS

• CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan  huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

• CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 

• CSS 3 

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

Pengenalan CSS

• CSS adalah Cascading Style Sheet.
• Styles pada CSS mendefinisikan bagaimana menampilkan elemen HTML.
• Eksternal Style Sheet dapat mempermudah kita dalam pembuatan design website.
• Eksternal style Sheet disimpan dalam file CSS.

CSS sebagai solusi masalah dalam design website.

HTML diciptakan tidak untuk memberi nilai pada tag untuk memformat sebuah dokumen. HTML dibuat untuk menentukan isi dari dokumen. Contoh :

<h1> Ini adalah Heading </h1>

<p> Ini adalah sebuah paragraph </p

Ketika tag <font> dan atribut warna ingin ditambahkan oleh pengembang web dalam pembuatan sebuah website besar, maka itu adalah sebuah mimpi buruk. Dikarenakan setiap jenis font dan warna yang ditambahkan ke setiap halaman menjadi proses yang sangat lama dan mahal.

Oleh karena itu, World Wide Web Consortium W3C membuat CSS. Dalam HTML 4.0, semua format ddapat dihapus dari sebuah dokumen HTML dan disimpan dalam File CSS yang terpisah. Style CSS biasanya disimpan dalam file eksternal dengan ekstensi file ".css". Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web, hanya dengan mengedit satu file tunggal.

Sintaks CSS

CSS terdiri dari 2 elemen utama yaitu selector dan deklarasi ( Deklarasi bisa lebih dari satu ).

h1  { color : blue; font-size: 12px;}

h1 => Selector

color : blue; => Deklarasi 1

font : size; => Deklarasi 2

Selector biasanya berupa elemen HTML.

Setiap deklarasi terdiri dari properti dan nilai.

Properti adalahh atribute style yang ingin kita ubah, setiap properti memiliki nilai.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hallo Dunia!</p>
<p>Ini adalah Paragraph dengan style CSS.</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (css.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Komentar CSS

komentar digunakan menjelaskan kode yang kita buat. Sebuah komentar akan diabaaikan oleh browser.
Contoh :

/*Ini adalah sebuah komentar*/

p

{

text-align:center;

/*Ini adalah komentar yang lain*/

color:black;

font-family:arial;

}

3 Cara memasukkan Style CSS pada Dokumen HTML

Ada 3 cara memasukkan style CSS yang kita buat pada sebuah dokumen HTML.

1. External Style Sheet.

2. Internal Style Sheet.

3. Inline Style.

Disini kita akan membahas satu persatu, agar teman-teman bisa mengerti dengan 3 cara yang dimaksud.

1. External Style Sheet.

Sebuah External Style Sheet sangat cocok digunakan untuk banyak dokumen / Halaman HTMl yang kita buat. Dengan External Style Sheet anda dapat merubah seluruh halaman web dengan hanya hanya mengubah satu file saja. Setiap halaman yang diubah harus link dengan Style Sheet menggunakan tag <link>. Tag <link> diantara <head>...</head>.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Sebuah external style sheet dapat ditulis dalam teks editor apapun. File tidak boleh mengandung tag html. Style Sheet harus disimpan dengan ekstensi ".css". Contoh dari sebuah file style sheet adalah sebagai berikut.

hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}

2. Internal Style Sheet.

Sebuah Internal Style Sheet digunakan hanya pada dokumen tunggal HTML. Anda mendefinisikan Internal Style Sheet diantara <head>...</head> dengan menggunakan tag <style>, seperti contoh dibawah ini.

<head>
<style>
hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}
</style>
</head>

3. Inline Style

Inline Style memiliki banyak kekurangan dibandingakan Style Sheet yang lainnya. Untuk menggunakan Inline style anda harus menggunakan atribut style pada tag yang relevan. Style atribut dapat berisi properti CSS. Contoh dibawah ini menunjukkan bagaimana intuk mengubah wana dan margin kiri paragraph.

<p style="color:sienna; margin-left:20px;"> Ini adalah sebuah paragraph </p>

Demikian lah materi singkat dari kami tentang Cara memasukkan Style Sheet CSS pada dokumen HTML. Semoga artikel diatas bermanfaat bagi teman-teman yang ingin belajar Script-script dalam pembuatan Website khususnya CSS.

SELASA, 19 NOVEMBER 2013

Mengenai CSS ( CASDING STYLE SHEET )

CSS (CASCADING STYLE SHEET)

CSS DASAR 

Ø  Tentang CSS

Ø  Kegunaan CSS

Ø  Aturan Penulisan

Ø  CSS Background

Ø  CSS Font

Ø  CSS Teks

Ø  CSS Border

Ø  Margin

Ø  Contoh Layout Web menggunakan CSS

  

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 penulisan CSS

  Inline style sheet 

Penulisan didalam elemen HTML.

Contoh script 1

 

 

Gambar 1

  Embedded Style Sheet

Penulisan CSS didalam dokumen HTML dan menggunakan tag <style></style>

Contoh script 1

 

 

Gambar 2

 Linked Style Sheet

Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh script 3

 

Contoh script style1.css 

 

 

Gambar 3 

Aturan penulisan CSS

Selector

Terdiri dari tag,class,ID

Declaration 

Mendeskripsikan property dan value

Contoh

H1 

{ Color : #0000FF   }

Keterangan :

Selector   : H1

Properti   : Color  

Value      :  #0000FF

Macam-macam Selector

Tag/Elemen

  Setiap tag yang ada pada HTML bisa dijadikan selector

Class

  Diawal penulisan menggunakan tanda titik, 

               pada HTML ditambahkan class

stlye1.css  

 

Contoh script 4

 

Gambar 4

ID

Diawali dengan tanda  #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain

web krn didefiniskan denga ID berbeda.

Misl.

Style1.css 

 

Contoh script5

 

Gambar 5

CSS Background

Property background

1.   Background-color

Contoh:

Body {

 Background-color : green;

}

2.   Background-Image

Contoh:

Body {

  Background-image : url(gambar1.jpg);

}

3.   Background-attachment

Body {

  Background-attachment : scroll;

}

4.   Background-Repeat

Body {

  Background-repeat : repeat;

  Background-image : ur l(image/gambar1.jpg);

}

5.   Background-position

Body {

  Background-repeat : no-repeat;

  Background-image : ur l(image/gambar1.jpg);

 Background-position : bottom center                                                                                                                         

                     }

style1.css

 

Contoh script6

 

Gambar 6

CSS Font

Property Font

1.   Font-family

P {

 Font-family : Arial,Helvetica;

}

2.   Font-size (satuan em,pt,px,mm,cm,%)

P {

 Font-size : 24em;

}

3.   Font-style (nilai : oblique,italic,normal)

P {

  Font-style : oblique;

}

4.   Font-variant (nilai : normal,small-caps)

P {

   Font-family : Arial,Helvetica;

    }

5.   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,under line,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 : none,dotted,dashed,solid,double,groove,ridge,inset,outset)

.           b1  {

             Border-style-type : groove ;

}

2.   border-bottom-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 dan Padding

Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web

Body {

 Margin-top : 4cm;

Margin-right : 3cm;

Margin-bottom :3cm;

Margin-left : 4cm;

}

Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.

Pd css

.           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;

}         

Pada file HTML

<html>

<head>

<link rel=”stylesheet” type=”text/css”  href=”cssku.css”>

</style>

</head>

<body>

<p class=kotak > teks1 <p>

</body>

</html>

Latihan

Membuat layout halaman web menggunakan CSS

File cssku.css

#header {

 position:static;

 height:90px;

 width:800px;

 background-color:#666666;

 padding-top:4%;

 padding-right:2%

 padding-bottom:2%;

 padding-left:4%;

 line-height:0.5px;

 left:50px;

 right:50px;

}

.judul1 {

font-family:verdana,helvetica,sans-serif;

font-size:1em;

color:#ffffff;

letter-spacing:1em;

}

.judul2 {

font-family:verdana,helvetica,sans-serif;

font-size:1.5em;

color:#ffff00;

letter-spacing:1em;

text-decoration:line-underline;

}

.judul3 {

font-family:verdana,helvetica,sans-serif;

font-size:1.5em;

color:#ffff00;

letter-spacing:0.25em;

text-decoration:line-underline;

}

#nav_left{

 background-color:#999999;

 height:40px;

 width:170px;

 line-height:0.1;

 padding:0.5em;

 border-bottom-width:1px;

 border-bottom-style:solid;

 border-bottom-color:#ffffff;

}

#nav_left_link {

    font-size:10px;

 background-color:#666666;

 height:415px;

 width:170px;

 padding:0.5em;

 border-bottom-width:1px;

 border-bottom-style:solid;

 border-bottom-color:#ffffff;

}

#nav_left_menu_caption {

 background-color:#666666;

 height:20px;

 width:170px;

 line-height:0.1;

 padding:0.5em;

 border-bottom-width:1px;

 border-bottom-style:solid;

 border-bottom-width:#ffffff;

}

.menu_caption {

font-family:verdana,arial,helvetica,sans-serif;

font-size:1em;

color:#ffff00;

text-align:center;

vertical-align:middle;

}

#stylelink a:link, #stylelink a:visited {

 display:block;

  border-top:1px solid #ffffff;

  border-bottom:1px solid #cccccc;

 background-color:#666666;

 font-weight:bold;

 color:#ffff00;

 width:100px;

 padding-top:3px;

 padding-right:0px;

 padding-bottom:3px;

 padding-left:10px;

 text-decoration:none;

}

#stylelink a:hover {

  border-top:1px solid #cccccc;

 background-color:#0000hh;

 background-image:none;

 font-weight:bold;

 text-decoration:none;

 color:#ffffff;

}

#bawah{

 background-color:#999999;

 height:30px;

 width:800px;

 padding-right:2em;

 padding-left:4em;

 padding-top:1em;

 padding-bottom:1em;}

. copyright_bawah{

font-family:verdana,arial,helvetica,sans-serif;

font-size:10px;

color:#ffffff; 

text-align:center;

width:800px;

}

#box_isi {

  position : absolute;

 height:auto;

 width:615px;

 left:204px;

 top:100px;

 padding:1em;

 border-left-width:1px;

 border-left-style:dotted;

 border-left-color:#666666;

 border-right-width:1px;

 border-right-style:dotted;

 border-right-color:#666666;}

.isi {

font-family:verdana,arial,helvetica,sans-serif;

font-size:1.2em;

color:#666666;

line-height:2em;

text-align:justify;

vertical-align:none;

}

body {

font-family:verdana,arial,helvetica,sans-serif;

background-color:#cccccc;

margin:auto;

padding:0.2em;

}

p {

font-family:verdana,arial,helvetica,sans-serif;

font-size:10px;

}