Bab 1 : Mengenal CSS

1 Bab 1 : Mengenal CSS CSS merupakan singkatan dari cascade style sheet, merupakan features baru yang terdapat pada HTML 4.0 versi keatas. Hal ini dip...
Author:  Sri Santoso
88 downloads 937 Views 772KB Size
Report
DOWNLOAD PDF

Recommend Documents

       

© 2007 Charles Wyke‐Smith.

 
         

4   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

 

                  5   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

Bab 2 : Menambahkan CSS pada dokemen    Ada 3 cara menambahkan CSS pada dokumen anda :  1. Inline  2. Embedded  3. Linked from file    1. Cara Inline  Yaitu menuliskan atribut CSS langsung pada tag – tag html. Cara yang masih kuno dan cukup  merepotkan.    Latihan 3 : Inline Styles.HTML               Contoh Inline Styles       

This paragraph simply takes on the browser’s default  paragraph style.

  By adding inline CSS styling to this  paragraph, we can override the default styles.

 

And now we are back to a regular default paragraph without  any inline styles.

       

    6   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

  2. Cara Embedded  Yaitu menuliskan atribut CSS menggunakan kelompok / grouping.  Latihan 4 : Embedded Styles.HTML          Contoh Penulisan Cara Embedded Styles  <meta http‐equiv="Content‐type" content="text/html; charset=iso‐8859‐1" />  <meta http‐equiv="Content‐Language" content="en‐us" />    <style type="text/css">   h1 {font‐size: 16px;}   p {color:blue;}               

Judul Disini !

     

Penulisan Embedded Styles

       

 

 

3. Cara Linked from file  Yaitu menuliskan / penggunaan atribut CSS diletakkan pada file external. Cara yang sering dipakai.  Untuk  file  multi  dokumen  cara  Linked  from  file  adalah  cara  yang  terbaik,  karena  file  external  CSS  dapat  digunakan  pada  dokumen  –  dokumen  yang  berlainan.  Anda  juga  dapat  menggunakan  beberapa file external CSS pada satu dokumen.    Latihan 5 : Linked Styles.HTML          7   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

     <meta http‐equiv="Content‐Type" content="text/html;   charset=iso‐8859‐1" />   Linked Styles Example                    

Contoh Linked Styles

   

Paragraph Pertama

   Paragraph kedua seperti ini

    Ini contoh heading 2      Ini Paragraph ke 3

           File : MyStyles.CSS    p {color : red;}  h1 {color : blue;}    .specialtext{color : green; font‐weight:bold;}    #specialtext2 {color : blue;}   

    Tips :  Don’t use spaces in file names. They end up being replaced by the %20 string, which really obfuscates your file names for the user. I use underscores instead of spaces—then the whole fi le name string is one long word to the browser and can easily be selected by clicking it.

          8   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

Anatomy Aturan Penulisan CSS 

Contoh Deklarasi Multiple : 

 

p {color:red; font-size:12px; line-height:15px;} 

Multiple selector dapat di kelompokkan :  h1 {color:blue; font-weight:bold;} h2 {color:blue; font-weight:bold;} h3 {color:blue; font-weight:bold;}

Contoh  diatas dapat ditulis :  h1, h2, h3 {color:blue; font-weight:bold;}    Penerapan style yang berbeda pada selector :  h1, h2, h3 {color:blue; font-weight:bold;} h3 {font-style: italic;}

(jadi selector h3 selain memiliki style warna biru, bold dan italic, sedangkan selector h1,h2 hanya  memiliki style  warna biru dan bold).   

Menggunakan Kontektual Selector / Selektif Selector  Contohnya semua selector paragraph berwarna merah :  p {color:red;}    Namun, apabila anda ingin tag paragraph yang berada pada tag div saja yang berwarna hijau anda  tuliskan seperti :    div p {color:red;}

  Latihan 6 : Selektif Selector 1.HTML        A Sample XHTML Document  <meta http‐equiv="Content‐type" content="text/html; charset=iso‐8859‐1" />  <meta http‐equiv="Content‐Language" content="en‐us" />       

Contextual selectors are <em>very selective.

 

This example shows how to target a <em>specifi c tag using the document hierarchy.

 

Tags only need to be descendants <span>in the <em>order stated in the selector  ; other tags can be in  between and the selector still works.

       

9   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

    Note :  If you are new to XHTML, note that span is a neutral container like div that has no default attributes: in other words, span has no effect on your markup until you explicitly style it. It’s useful for marking up elements in your markup that have some meaning to you not defi ned by XHTML; however, if your document fi nds itself in an environment where it cannot use your style sheet, the spans will have no effect on the presentation. Unlike div, which is a block element and forces a new line, span is an inline element, so it does not force a new line. By default, strong results in bold text, and em (emphasis) results in italics; but of course, you can use CSS to restyle them if you wish.

  Bagan Hirarki dari html diatas dapat digambarkan seperti : 

  Latihan 7 : Selektif Selector 2.HTML  (anda buka kembali file Selektif Selector 1.html, anda ingin semua yang bergaris miring berwarna hijau,  kemudian  anda  tambahkan  style  em {color:green;} pada  bagian  style  seperti  pada  Embedded  Styles).  Contoh tampilan menjadi :   

  10   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

    Latihan 8 : Selektif Selector 3.HTML  (anda buka kembali file Selektif Selector 2.html, anda hanya ingin tulisan yang bergaris miring pada tag  paragraph  saja  yang  berwarna  hijau,  kemudian  anda  ubah  style  em {color:green;} menjadi  p em {color:green;} pada bagian style). Contoh tampilan menjadi :   

 

 

Latihan 9 : Selektif Selector 4.HTML  (anda buka kembali file Selektif Selector 3.html, anda hanya ingin tulisan yang bergaris miring pada tag  span dan didalam tag paragraph saja yang berwarna hijau, kemudian anda ubah style p em {color:green;} menjadi p span em {color:green;} pada bagian style). Contoh tampilan menjadi :   

 

 

Selector Anak / Child Selector  Untuk menggunakan selektor ini, misalnya anda menuliskan p > em {color : green;} artinya adalah target  tag  em  tidak  boleh  ada  tag  lain  yang  mengapit  kecuali  tag  paragraph. 

  <em>  Tulisan  Hijau   

. Jadi misalnya ada tag 

 <span> <em> Tulisan Hijau   

, tulisan tsb tidak akan  berwarna hijau.  Note  :  Child  Selector  tidak  didukung  oleh  browser  Internet  Explorer  6.0,  anda  perlu  menggunakan  browser Mozila FireFox 3.0 yang sudah mendukung fungsi ini.  11   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

Menambahkan Classes dan IDs  Pada bagian ini kita akan mempelajari cara mengelompokkan styles.    Latihan 10 : Class CSS1.HTML             Contoh Class  <meta http‐equiv="Content‐type" content="text/html;  charset=iso‐8859‐1" />  <meta http‐equiv="Content‐Language" content="en‐us" />    <style type="text/css">   p {font‐family: Helvetica, sans‐serif; color:red;}    .specialtext {font‐weight:bold;}               This is a heading with the <span>same         class as the second paragraph     

This tag has no class.

      When a tag has a class attribute, we      can target it <span>regardless of its position in the      hierarchy.

         

 

        12   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

Selektor Class Kontekstual  Jika  anda  ingin  mentargetkan  satu  paragraph  dengan  class,  anda  dapat  membuat  suatu  selektor  yang  dikombinasikan dengan class.    Latihan 11 : Class CSS2.HTML  (Buka file “Class CSS1.html” lakukan perubahan pada bagian style menjadi :  p {font‐family: Helvetica, sans‐serif;}   .specialtext {font‐weight:bold;}   p.specialtext {color:red;}  kemudian Save As dengan nama “Class CSS2.HTML”)   

  Latihan 12 : Class CSS3.HTML  (Kode dibawah akan mentargetkan tag span yang ada pada paragraph yang menggunakan class diubah  menjadi tulisan miring. Buka file “Class CSS2.html” lakukan perubahan pada bagian style menjadi : 

 

p {font-family: Helvetica, sans-serif;} .specialtext {font-weight:bold;} p.specialtext {color:red;} p.specialtext span {font-style:italic;}

kemudian Save As dengan nama “Class CSS3.HTML”)   

  13   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

  Latihan 13 : Class CSS4.HTML  (Cara  termudah  untuk  membuat  tulisan  di  tag  span  menjadi  miring  /  italic  yang  menggunakan  class.  Buka  file  “Class  CSS3.html”,  anda  hapus  kode  p.specialtext  span  {font‐style:italic;}  kemudian  tambahkan kode .specialtext span {font‐style:italic;} pada bagian style. Kemudian Save As dengan nama  “Class CSS4.HTML”)   

  Latihan 14 : Class CSS5.HTML  (Anda buka kembali file “Class CSS4.HTML” pada bagian body, dibawahnya anda tambahkan kode  

 

In this div, the span tag <span>may or may not be styled.
 

Kemudian anda Save As dengan nama “Class CSS5.HTML”)   

    Tips  :  Anda  dapat  menuliskan  kode  agar  selektor  target  menjadi  lebih  fokus  dengan  cara  menuliskan  p.specialtext span, h1.specialtext span {font-style:italic;} artinya  tulisan di tag span yang berada di tag p  dan h1 saja yang akan menjadi miring / italic.    14   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

Class Multiple  Untuk menggunakan beberapa class pada tag atau selektor anda dapat menuliskan kode seperti :  
In this div, the span tag <span>may or may not be styled.
yang artinya pada selektor div menggunakan 2 buah class (specialtext1 dan specialtext2). 

  Note : Pemberian nama class tidak menggunakan spasi, karena akan menyebabkan penerjemahan yang  salah pada browser.  Penjelasan IDs  IDs adalah cara yang sama untuk membuat class. Contoh penulisan ID seperti : 

This is the special text



Jadi antara IDs dan Classes dimana perbedaannya :   

The Difference Between IDs and Classes So far, I have shown aspects of classes and IDs that might make them seem to be interchangeable—we have used them both to identify a specifi c tag within our markup. However, an ID is more powerful than a class, rather like the queen is more powerful than a pawn in a game of chess. (You will see just how true this is when you look at the concept of rule specifi city in the “The Cascade” section later in this chapter.) This is because, according to the rules of XHTML, only a single instance of a particular ID (such as id="mainmenu") can be in a page, but a class (such as class="strongparagraph") can appear many times. So, if you want to identify a unique piece of your page’s markup, such as the main navigation menu to which you want to target a special set of CSS rules, you might use an ID on a div (division element) that encloses the menu’s elements. To identify a number of special paragraphs in a page that all require the same variation of styling from the basic paragraph, you would use a class. As an aside, you also use an ID to enable JavaScript to be targeted at a tag (for example, to activate a DHTML animation when the user mouses over a link). You JavaScript jocks might like to know that the id attribute replaces the deprecated name attribute (which the XHTML validator fl ags as invalid) for this purpose. It’s especially important that you make sure JavaScript-related IDs appear only once in a page, or the JavaScript may behave unpredictably.

Don’t Go Crazy with Classes Generally, you should use IDs and classes sparingly; the right kind of use is putting them on the divs that contain the main sections of your markup, and then accessing the tags within them with contextual selectors that begin with the ID or class’s name. What you want to avoid is what Jeffrey Zeldman describes as “classitis—the measles of markup,” where you add a unique class or ID to just about every tag in your markup and then write a rule for each one. This is only one step removed from loading up your markup with FONT tags and other extraneous markup. The good doctor Zeldman has cured me and many others of this nasty affliction. If you are already in the habit of slapping classes on every tag, as most of us do when we enthusiastically jump into CSS, take a look at the markup sample in Chapter 1 in light of what you just read in this chapter. You’ll see that you can target styles at every tag quite easily without adding any more IDs or classes. If you use IDs to identify only the main sections of your markup—and use those classes for occasional tags that can’t be specifi cally targeted with contextual tag-based selectors—you won’t go far wrong. This approach has the added benefi t of making your style sheet simpler too.

Spesial Selektor :  The Universal Selector / Selektor Umum  Disebut juga sebagai selektor apapun, penggunaan selektor ini menggunakan simbol “*” (Bintang).  Misalnya contoh dalam penggunaan :   * {color:green;} artinya semua warna tulisan pada tag  ‐ tag html apapun akan berwarna hijau.  p * em {font-weight:bold;} artinya warna tulisan pada semua urutan hirarki terkecil dalam tag paragraph  akan berwarna hijau.    Latihan 15 : Universal Selector.HTML  Universal Selector <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <style type="text/css"> * {color:green;} p * em {font-weight:bold;}

15   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

 

Contoh Universal Selector

This tag has no class.

Paragraph ini mengandung <em>kata <span><em>Span

Heading <em>Dua



Sibling Selector / Selektor Kembar Selektor ini menggunakan tanda “+” (Plus) sebagai penghubung antar tag – tag htm. Sibling Selector hanya didukung oleh browser Mozila Firefox 3.0 dan IE 7.0, untuk IE 6.0 belum didukung. Contoh penulisan : h1 + p {font-variant:small-caps;} artinya tag h1 akan dijadikan huruf kecil, tag p setelah h1 menjadi huruf besar .

Latihan 16 : Sibling Selector.HTML            Sibling Selector  <meta http‐equiv="Content‐type" content="text/html; charset=iso‐8859‐1" />  <meta http‐equiv="Content‐Language" content="en‐us" />    <style type="text/css">    h1 + p {font‐variant:small‐caps;}               
     

All About Siblings Selectors

     

There must be at least two selectors, with a + sign before the last one.

     

This is second paragraph

     

The targeted selector will only be affected if it is a sibling to, and preceded by, the one before the +  sign.

     
        Tips : This is a good way to have the first item in a list be bold, for example (ul + li {font-weight:bold;).  

Attribute Selector  Selektor ini hanya didukung oleh Mozilla Firefox 3.0 dan tidak didukung oleh IE 6.0, untuk IE 7.0 masih  dalam tahap pengembangan.  Attribute selector ini menargetkan atribut / properti dari suatu tag yang  dideklarasikan pada style.    Latihan 17 : Attribute Selector.HTML           Attribute Selector  <meta http‐equiv="Content‐type" content="text/html;  charset=iso‐8859‐1" />  <meta http‐equiv="Content‐Language" content="en‐us" />    16   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

  <style type="text/css">    img {border: 2px solid green;}    img[title="castlewalls1"] {border: 2px solid blue;}      img[alt="castle walls2"] {border: 2px solid red;}                                    

 

 

Summary of Selectors So far, you’ve seen that you can target CSS rules in several ways: by using tag selectors, by using class and ID selectors, by using selectors that are a combination of both, and even by selecting based on the attributes that are attached to the tag. One common aspect of these selectors is that they all are targeting something in the markup—a tag name, a class, an ID, an attribute, or an attribute value. But what happens if you want some kind of styling to happen when some event occurs, such as the user pointing at a link? In short, you want a way to apply rules based on events. And after all this buildup, you know I’m going to tell you there’s a way to do that.

Pseudo Classes  Penggunaan  peseudo  class  ini  umumnya  digunakan  bersama  hyperlink.  Pseudo  class  hanya  didukung  oleh browser Mozila Firefox 3.0 dan IE 7.0. Beberapa kode belum tersedia sepenuhnya pada IE 7.0.    Latihan 18 : Pseudo Class.HTML            Pseudo Class  <meta http‐equiv="Content‐type" content="text/html; charset=iso‐8859‐1" />  <meta http‐equiv="Content‐Language" content="en‐us" />    <style type="text/css">    a:link {color:blue;}    a:visited {color:red;}    a:hover {text‐decoration:none;}    a:active {color:navy;}     div.weather strong:first‐child{color:red;}     p:hover {background‐color:gray;}     17   

Pengenalan CSS Untuk Pemula – Disusun Oleh : Donny, S.Kom – Widya Dharma 

           www.google.com     

Paragraph satu disini 

                  contoh penggunaan <strong>pseudo seperti <strong>berikut ini.     
            It’s <strong>very hot and <strong>incredibly humid.    
         

    Tips :  Because search engines can’t pick up pseudo-element content (it doesn’t appear in the markup), don’t use these elements to add important content that you want a search engine to index.

         

18