Documents

CSS Tutorial.pdf

Description
CSS Tutorial for Beginner  By Lanster  CSS Tutorial for Beginner    Okay, here’s a brief explanation about CSS. CSS (Cascade style Sheet) used to change all the interface of a web page. We can change everything that related to the script that we write. For example if we write a CSS script for table, then the appearance of every table on that web page will change based on our CSS script. Now, I’m going to tell you about CSS that used in gendou. Uh, but I won’t explain e
Categories
Published
of 7
107
Categories
Published
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Similar Documents
Share
Transcript
  CSS   Tutorial   for   Beginner   By   Lanster   CSS   Tutorial   for   Beginner   Okay, here’s a brief explanation about CSS. CSS (Cascade style Sheet) used to change all the interface of a web page. We can change everything that related to the script that we write. For example if we write a CSS script for table, then the appearance of every table on that web page will change based on our CSS script. Now, I’m going to tell you about CSS that used in gendou. Uh, but I won’t explain everything about it, since it’s impossible for me to explain every script (in other word, I’m busy right. Don’t expect something extravagant from me). Note: see every page in this file before you start reading. You can write the CSS script in http://gendou.com/forum/   edituser.php You’ll see some text box there. To change your profile page appearance you must write the CSS script in about me  text box, and to change all appearance in gendou.com when you log in, you must write your script in the Stylesheet Data  text box.   <style   type= text/css >   /*   script   field*/   </style>   This   one   is   the   most   important   thing   when   writing   CSS   ,   the   CSS   script   below   must   be   written   in   script   field   body,   table   {   font ‐ family:   Verdana,   Arial,   Helvetica,   sans ‐ serif;   font ‐ size:   12px;   color:   #FFFFFF;   background:   #000000;   }   Explanation:   ã   Font ‐ family   is   used   to   change   your   font   style .   Why   we   must   enter   three   font   styles?   So,   I’ll   say   not   every   PC   has   that   font   style   so   you   must   enter   the   other   font   style   so   that   PC   can   use   the   other   (alternative   font   style).   Note:   You   can   find   a   lot   of    font   style   in   Microsoft   Word,   Open   Office,   etc.   ã   Font ‐ size   is   used   to   change   the   font   size ,   try   to   change   the   number   and   you’ll   find   out.   ã   Color   is   used   to   change   the   font   color,    just   enter   a   color   name   to   change   it.   There   2   ways   to   change   the   color.  ‐   First,   you   can   write   “ yellow ”   to   change   the   font   color   to   yellow   or   you   can   write   “ red ”   to   change   the   font   color   to   red.   Example      color:   yellow;   ‐   If    you   want   a   custom   color   then   you   can   enter   those   six   digits   of    number   randomly^^.   Hint:   The   first   two   digit   indicates   red   color,   the   second   two   digits   indicates   green   color,   and   the   last   two   digits   indicates   blue   color,    just   mix   them   randomly   until   find   out   a   nice   color   ã   Background   is   used   to   change   the   background   color,    just   like   color,   but   it’s   for   background.   You   won’t   need   my   explanation   if    you’ve   read   about   color.    CSS   Tutorial   for   Beginner   By   Lanster   table   {   border ‐ bottom:   1px   solid   #707070;   border ‐ right:   1px   solid   #707070;   }   Explanation:   To   put   it   simply   this   kind   CSS   have   3   attributes   or   whatever   it   called,   I   don’t   know   about   it   since   I   never   use   it   anymore.   But   I   know   this   script   format,   here   it   is   Border ‐ bottom:   'border ‐ width'   'border ‐ style'   'color'   Note:   the   same   format   applied   for   border ‐ right,   but   once   again…..it   can   be   applied   in   border ‐ left   and   border ‐ bottom.   So   we   can   make   a   colorful   page.   Well,   in   this   case   I’ll    just   explain   about   border ‐ style.   Border   style   is   used   to   change   the   border   style,   that’s   all.   LOL,   I   assume   you   already   know   what   it   means    just   by   reading   the   script.   Here’s   some   style   that   you   can   use:  ‐   Dashed  ‐   Dotted  ‐   Double  ‐   Groove  ‐   Hidden  ‐   Inherit  ‐   None  ‐   Outset  ‐   Ridge  ‐   Solid   Then,   good   luck   for   trying   those   styles.   I   won’t   tell   you   since   it’ll   be   boring   if    I   tell   you   everything.    CSS   Tutorial   for   Beginner   By   Lanster   th{   border ‐ top:   1px   solid   #707070;   border ‐ left:   1px   solid   #707070;   text ‐ align:   center;   vertical ‐ align:   top;   font ‐ weight:   bolder;      to   Bold   the   text   }   td{   border ‐ top:   1px   solid   #707070;   border ‐ left:   1px   solid   #707070;   text ‐ align:   left;   vertical ‐ align:   top;   }   Explanation:   Actually   this   script   is   used   if    you   want   to   make   a   title   in   the   table.   We   can   use   it   by   replacing   html   tags   <td>Content</td>   by   <th>Content</th>.   If    you   don’t   know   about   it,    just   try   the   source   code   bellow,   write   it   in   notepad   and   save   it   with   extension   .htm   or   .html.   Just   like   before,   this   kind   CSS   have   3   attributes   or   whatever   it   called.   This   script   format,   is   :   Border ‐ top:   'border ‐ width'   'border ‐ style'   'color'   The   same   format   is   applied   for   border   left   Note:   the   same   format   applied   for   border ‐ right,   but   once   again…..it   can   be   applied   in   border ‐ left   and   border ‐ bottom.   So   we   can   make   a   colorful   page.   Now   about   text ‐ alignment,   you   can   change   the   text   alignment   whatever   you   want    just   like   in   open   office   or   Microsoft   word.   Just   try   changing   the   word   “center”   by   “left”   or   “right”   or   “justify”.   Vertical   align   is    just   like   text   alignment.   You’ll   understand   if    you   try   the   source   code   below.   Remember,   practice   make   perfect.   Note:   valign   ==   vertical ‐ align   align   ==   text ‐ align   <html>   <head><title>Example</title></head>   <body>   <table>   <tr>   <th   height= 70   width= 200   valign= top >TH1</th>   <th   height= 70   width= 200   valign= middle >TH2</th>   <th   height= 70   width= 200   valign= bottom >TH3</th>   <th   height= 70   width= 200 >TH4</th>   </tr>   <tr>   <th   height= 70   width= 200   align= left >TD1</td>   <th   height= 70   width= 200   align= center >TD2</td>   <th   height= 70   width= 200   align= right >TD3</td>   <th   height= 70   width= 200 >TD3</td>   </tr>   </table>   </body>   </html>    CSS   Tutorial   for   Beginner   By   Lanster   .body2   {   background ‐ color:   #000000;   border:   1px   solid   #FFFFFF;   margin:   20px;   padding:   4px;   }   Okay,   let’s   learn   about   style.   I’ll   assume   that   you   already   understand   about   basic   CSS.   Let’s   assume   this   one   called   set   style,   we   can   use   it   by   embedding   this   style   in   html   tags.   This   one   is    just   an   example   and   from   now   on   you   can   use   your   imagination   to   create   something   that   amazing.   Try   this   source   code   in   gendou:   <div   class= body2   style   = overflow:   auto;   height:   280px;   max ‐ height:   280px;   width:   635px; >   Type   all    about    you   here,    just    type   anything   that    you   want    and    don’t    copy    this   text    because   you   won’t    understand    the   meaning   of    this   script    </div>   Explanation:   This   one   is   a   little   confusing.   So    just   assume   that   you   know   about   height,   max ‐ height   and   width.   Class=”body2”   this   thing   is   used   to   call   the   CSS   script   so   the   text   in   div   field   will   change   based   on   CSS   script.   And   one   more   thing   that   you   must   know,   we   can   use   style   =”overflow:   auto;   height:   280px;max ‐ height:280px;width:   635px;”   to   make   a   slide   windows.   So   we   needn’t   use   a   frame   or   another   website   to   show   our   information.   The   benefit   using   this   script   is   we   can   load   the   web   page   faster.   Thanks   to   gendou   for   providing   this   one.  

Experiment 4

Jul 23, 2017
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks
SAVE OUR EARTH

We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

More details...

Sign Now!

We are very appreciated for your Prompt Action!

x