KODE CSS LANGSUNG BISA DI COPAST DAN DI JALAN KAN

ok gusy ini adalah blog sederhana yang saya buat silah kan menikmati nya jika ada ingin menghubungi saya silahkan kunjungi link di bwah ini https://www.facebook.com/apri.punk.754 sekian dari saya apriansyah (gobel)

Home » serba-serbi » cara membuat css style sederhana

cara membuat css style sederhana

Tuesday, December 03, 2013 APRIANSYAH Blogs

agan - agan tentu setuju jika web yang canggih...yang bagus itu...dapat dilihat jg dari desainnya yang ga ngebosenin...lantas apa sih yang dan gimana sih untuk mempercantik web design...diantaranya adalah membuat CSS style yang sempurna...tp apa itu CSS style..

CSS adalah kependekan dari Cascading Style Sheet ,pengertiannya adalah sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.CSS inilah yang bertanggung jawab atas penampilan web anda dimata pengunjung melalui browser internet.

CSS yang buruk bisa membuat visitor Anda tidak kerasan lagi menjelajahi blog anda,apalagi untuk kembali lagi.

Memaksimalkan CSS adalah penting (khususnya) blog agar lebih nyaman untuk dibaca dilihat oleh visitor anda dan kalau bisa bikin lah CSS yang meringankan loading.

Jika anda tertarik untuk mengedit tampilan template blog sendiri,maka mengerti CSS adalah wajib.Namun ingat,untuk menjadi seorang blogger tidak wajib untuk mengerti CSS karena banyak template yang bisa didapat dari desainer blog.Tapi tak ada salahnya kan mengerti sedikit saja?.....karena menggunakan tampilan blog hasil desain sendiri itu dapat memberikan kepuasan tersendiri.

Pengenalan Dasar penulisan CSS

Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya ;

Selector
Properti
Deklarasi
Nilai/Values

Contoh penulisan code CSS

body {background-color: white;}

body adalah sebagai Selector
background-color adalah Properti
white adalah Nilai/values

Deklarasi adalah bagian yang berada didalam "{ }" yaitu properti dan nilai

Selector adalah bagian atau elemen yang ingin kita atur stylenya.
Properti adalah komponen yang kita butuhkan
Nilai/value adalah nilai dari deklarasi yang kita inginkan

Segitu saja dasar CSS,untuk lebih lanjut,nanti kita akan mengenal apa saja code yang bisa dimasukkan kedalam golongan properti,selector ataupun Nilai untuk postingan berikutnya.

Metode yang dipakai dalam penggunaan CSS

Inline style sheet metode
Penulisan atribut css langsung kedalam code HTML yang dimaksud

Contoh:


<div align="center" style="background="white;"> Ini adalah bagian yang diatur stylenya</div>

Embeded style sheet
Penulisan CSS dengan mendefinisikan dulu didalam sebuah tag
<style type="text/css">code CSS</style> yang dipasang sebelum tag </head>
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh:


<html>
<head>
<title>Title halaman</title>
<style>
body {background:#0000FF; color:#FFFF00;}
h1 {font-size:18px; color:#FF0000}
p {font-size:12px; font-family:arial; text-indent:0.5in}
.header-wrapper{margin:0 auto;border 1px solid #cccccc;} 
</style>
</head>
<body>
<div class="header-wrapper">komponen header</div>
<h1>Judul psotingan ini berukuran 18 dengan warna merah!</h1>
<p>Artikel /paragraf ada disini berukuran 12</p>
</body>
</html>

Menurut sifatnya CSS itu memiliki 2 sifat yaitu CSS external dan CSS internal adalah CSS yang ditulis secara langsung didalam halaman web yang disesain.Jika anda membuat dua halaman web yang berstyle sama ,maka dihalaman yang kedua kita juga memasukkan code css yang sama

CSS external adalah CSS yang ditulis didalam berkas style.css dan diletakkan ditempat khusus atau bahkan diluar dari situs tersebut.

Berkas CSS itu bersxtensi css,bisa di beri nama yang memudahkan untuk diingat,misalnya cssku-page1.css.

Rumor mengatakan bahwa css external itu lebih meringankan loading blog?...saya kurang tahu pasti.Tergantung pilihan anda,lebih suka cara yang mana..

Cara penulisan code pemanggilan css adalah

<link href="http://situsku.com/style/cssku.css" rel="stylesheet" type="text/css" media="screen"></link>

langsung kita praktek dalam sebuah folder web yang sudah kita buat....anggap saja begitu, kita kan mau mempercantik desain webnya..

ini adalah halaman index.php nya

------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

------

kita coba tambahkan warna pada halaman index letakkan diantara kode di bawah ini:

----

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

------

akan jadi seperti ini

kemudian kita buat font nya berdasarkan yang di inginkan. masukkan kodenya di antara kode berikut:

------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

----------

akan terlihat seperti ini.

kemudian dapat juga kita membuat navigation bar nya....

letakkan kode diantara kode berikut ini.

------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

-----

maka akan terlihat seperti ini..

kemudian kita bisa menambahkan link pada menu navigasi masih terlihat seperti daftar, bukan menu. Mari kita tambahkan beberapa gaya untuk itu. Kita akan menghapus daftar dan memindahkan elemen ke kiri, ke tempat bullets/pilihan itu. Kita juga akan memberikan setiap item latar belakang putih sendiri dan kotak hitam. (Mengapa? Tidak ada alasan khusus, hanya karena kita bisa.)

Kita juga tidak mengatakan apa warna dari link seharusnya, jadi mari kita menambahkan bahwa juga: biru untuk link yangpengguna belum melihat belum dan ungu untuk link yang sudah dikunjungi:

berikut kode nya...

-------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

---------------

Penambahan terakhir untuk style sheet adalah aturan horisontal untuk memisahkan teks dari tanda tangan di bagian bawah.Kami akan menggunakan 'border-top' untuk menambahkan garis putus-putus di atas elemen <address>:

----------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

-----------

Kita sekarang memiliki sebuah file HTML dengan style sheet tertanam. Tetapi jika situs kita tumbuh kita mungkin ingin banyak halaman untuk berbagi gaya yang sama. Ada metode yang lebih baik daripada menyalin style sheet ke dalam setiaphalaman: jika kita menempatkan style sheet dalam file terpisah, semua halaman dapat di atur sama dalam satu file CSS.

Untuk membuat file style sheet, kita perlu menciptakan file teks kosong lain. Anda dapat memilih "New" dari menu File di editor, untuk membuat jendela kosong. (Jika Anda menggunakan TextEdit, jangan lupa untuk membuat teks biasa lagi,menggunakan menu Format.)

Kemudian memotong dan menyisipkan segala sesuatu yang ada di dalam elemen style dari file HTML ke dalam jendela baru.Jangan menyalin <style> dan </ style> sendiri. Mereka termasuk HTML, CSS tidak. Dalam jendela editor yang baru, Andaseharusnya sudah memiliki style sheet lengkap:

------

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

------

Pilih "Save As ..." dari menu File, pastikan bahwa Anda berada di sama direktori / folder sebagai file mypage.html, dan menyimpan style sheet 
sebagai "styleku.css".Sekarang kembali ke jendela dengan kode HTML. Hapus segala sesuatu dari tag <style> hingga dan termasuk </ 
style> tag dan menggantinya dengan elemen <link>, sebagai berikut:

------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

--------

Ini akan memberitahu browser bahwa style sheet ditemukan dalam file yang bernama "styleku.css" dan karena tidak adadirektori disebutkan, browser akan terlihat di direktori yang sama di mana ia menemukan file HTML.
Jika Anda menyimpan file HTML dan reload di browser, Anda akan melihat tidak ada perubahan: halaman masih ditatadengan cara yang sama, tapi sekarang gaya berasal dari file eksternal.

Langkah selanjutnya adalah meletakkan kedua file, mypage.html dan styleku.css di situs Web Anda. (Nah, Anda mungkin ingin mengubahnya sedikit pertama ...) Tapi bagaimana melakukan hal itu tergantung pada penyedia jasa layanan internetAnda.

namun agan bisa langsung praktek tanpa membuatnya dari awal...sekarang sudah banyak web yang menyediakan css style gratis...tinggal edit gtu looh..

monggo cek za gan disini