Belajar CSS pemula (sangat pemula :D )

HUfh…. CSS oh CSS … kemarin saat berlatih di awal rasanya tidak meyakinkan saya mengerti bahasa ini… harus nulis-nulis container dkk….. tp saya rasa kalau saya mau mencoba berlatih setiap hari insyaAllah saya akan bisaaaa….. *Pasti Bisaaaaa (memotivasi diri hahahaaha) .
Untuk orang awam seperti saya, kemarin diajarin sama temen saya untuk basic seperti tahapan dibawah ini. Yuk simak :

1. Sebelum kita membuat CSS, kita buat dulu script di index.html nya dulu. (Scriptnya di sesuaiin dengan model desain websitenya yang telah dibuat)

2. Kemudian setelah di index.html nya selesai, baru deh kita susun CSS nya.
- biasanya di CSS kita akan menemui tanda seperti dibawah ini.
—> body { background: grey } ===> artinya halaman background utama website berwarna abu2.
—> #search ===> tanda pagar (#) berarti di htmlnya <div id=”…”> klo contoh diatas artinya <div id=”search”>
—> .socmed-search ===>tanda titik (.) berati di htmlnya  < div class = “….” > bearti artinya contoh tsb < div class = “socmed-search” >

//ini dulu note nya ntar di update lagi + mungkin klo sudah jadi css saya akan sa upload gambar contoh nya 

 

Pencerahan di CSS saya

Masukan dari @herihehe setelah kemarin belajar slicing dikit2 dan css nya

Berikut yang harus revisi dari belajar coding CSS saya hehehe :
1. logo:

- tambahkan width dan height pada h1 nya. biasanya di dalam h1 ada tag a, jadi logo bisa di klik. strukturnya menjadi seperti ini div#logo>h1>a. nah kalau seperti itu, nanti yang diberi width dan height, dan text-indent adalah a-nya. karena a secara default adalah inline element (ga bisa dikasih height dan width), maka a harus diubah ke block level dg property display:block.

2. link (a)
kalau dilihat, saat a dihover, maka ga keliatan jelas. ini bisa diakali dg memberi warna berbeda atau underline pada a:hover ← ini namanya pseudo element (googling ya).

note: kalau me-reset a agar ilang underlinenya, jangan lupa nambahin underline di hovernya.

contoh:

a {
text-decoration:none
}

a:hover {
text-decoration:underline
}

3. Clearing
Praktek udah bagus, dengan memakai floating element. Kalau yang sekarang kan setiap ada floating element selalu ditambahkan

Ini kurang bagus. Bisa diakali dengan menggunakan:

class.

misal pada css tambahkan:

.clear { clear:both }

trus di htmlnya nanti pake tag br saja, misal:

2.teknik clearfix (googling juga ttg ini).
jadi di css tambahkan:
.clearfix:before, .clearfix:after { content: “020″; display: block; height: 0; visibility: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

kemudian elemen yang di float, harus ditambahin class ini. misal sidebar mau di float, nanti di html ditulis:

, atau

 

script fs (untuk Layouts)

Script unuk membuat layouts Friendster(fs), Edit sendiri … sesuai selera kalian ya….

/* {– http://www.freefriendsterskins.com/ css code start –} *//* http://www.freefriendsterskins.com/ – Free Premade Friendster Skins / Friendster Layouts / Friendster Codes For Your Friendster Profile */

/* http://www.editfriendster.com */

/* PAGE BACKGROUND */
body {
background-image: url(

http://i208.photobucket.com/albums/bb64/w1ngd/Nature.jpg);

/* http://www.cartoonspot.net/looney-tunes/wallpaper-images/bugs-16b.jpg

http://www.korea.net/image/multimedia/wallpaper/20040501l.jpg

http://www.korea.net/image/multimedia/wallpaper/20040704l.jpg

*/
background-attachment: fixed;
background-position: center;
cursor: url(“http://www.myspacecursor.net/cursor/FlowerShow.ani”),default;
/* http://downloads.totallyfreecursors.com/cursor_files/bugs_run.ani

http://downloads.totallyfreecursors.com/cursor_files/7upDot-ani.ani

shttp://downloads.totallyfreecursors.com/cursor_files/shamrockglitterdark.ani*/}
/* GLOBAL FONTS */
.usercontent {
font-family: “Viner Hand ITC” ;
font-size: 14 ;
color: #ff0066;
}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
color: #3399ff;
}
.usercontent a:hover {
text-decoration: none;
color: #ff3300;
}
/* MASTER BOXES */
.commonbox {
border-width: 1px;
border-color: #99ccff;
border-style: inset;
background-color: transparent;
}
.commonbox .evenrow {
background-color: transparent;
}
/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
font-family: “Viner Hand ITC”;
font-size: 35 ;
color: #000000;
background-color: transparent;
}
/* CONTROL PANEL: BOX */
.controlpanel {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
border-color: #99ccff;
}
/* CONTROL PANEL: DATA */
.controlpanel .q {
color: #000000;
}
.controlpanel .data {
color: #000000;
}
.data a {
color: #000000;
text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
color: #000000;
text-decoration: lowercase ;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
font-family: “Script MT Bold”, Sylfaen ;
font-size: 20 ;
color: #ff0066;
border-color: transparent;
background-color: transparent;
text-decoration: ;
}
#controlPanelButtons a:hover {
font-family: “Script MT Bold”, Sylfaen ;
font-size: 20 ;
color: #6699ff;
border-color: transparent;
background-color: transparent;
text-decoration: ;
}
/* BOX: MORE ABOUT ME */
.moreabout {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY PHOTO GALLERY */
.photos {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY FRIENDS */
.friends {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY VIDEOS */
.videos {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY GROUPS */
.groups {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY TESTIMONIALS */
.testimonials {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* TESTIMONIAL COMMENTS */
.testimonialscomments {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY SCRAPBOOK */
.scrapbook {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: FAN OF */
.fanof {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY FANS */
.myfans {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY REVIEWS */
.reviews {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY BLOGS */
.blogs {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* BOX: MY BLOG REVIEWS */
.blogsreviews {
border-width: 1px;
border-color: #99ccff;
border-style: outset;
background-color: transparent;
}
/* MISC: TESTIMONIALS/REVIEWS TEXT */
.data {
font-family: “Comic Sans MS” ;
font-size: 20 ;
color: #ff0066;
text-transform: ;
}
/* MISC: SMALL PHOTO NAMES */
.commonbox .dr {
color: transparent;
background-color: transparent;
}/* {– http://www.freefriendsterskins.com/ css code end –} */