AnimeGalleries [dot] NetAnimeWallpapers [dot] ComAnimeLyrics [dot] ComAnimePedia [dot] ComAnimeGlobe [dot] Com

User Tag List

Closed Thread
Results 1 to 4 of 4

Thread: [Tutorial - CSS] Basics level 101

  1. #1
    SHTIL Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax's Avatar
    Gil
    112.02
    Gender
    Gifts Eye Patch
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    06-09-2012 11:06 AM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Jan 2004
    Location
    Norway
    Threads
    135
    Posts
    2,136
    AW Wallpapers
    5
    Rep Power
    785
    Gamer IDs

    Gamertag: Kasius DeVias Steam ID: Sophonax

    Default [Tutorial - CSS] Basics level 101

    What is CSS?

    CSS is the abbreviation of Cascading Style Sheets. Style sheets are a great tool for editing the look of the page by editing a property in the CSS. Not all CSS is supported by the major browsers, so it's a good idea to test your sites in both FireFox and Internet Explorer.

    CSS codes are placed in side the HEAD tags.

    HTML Code:
    <head> 
    STYLES HERE 
    </head>
    CSS changes the look of your entire page just by editing that line of code.

    An example of CSS

    This is what the typical style sheet looks like. There may be more lines, there may be less. It depends on what you want to change.

    HTML Code:
    <style> 
    
    <!-- 
    
    BODY,P,TD {font-family:vedanta,arial; font-size:11px; color:#D0D3FF; } 
    
    A:link { text-decoration: none; color:"#D0D3FF"; } 
    A:visited { text-decoration: none; color:"#D0D3FF"; } 
    A:hover { text-decoration:none; color:"#000000"; cursor:w-resize; } 
    
    body { 
    scrollbar-arrow-color: #CCCCCC; 
    scrollbar-darkshadow-color: #000000; 
    scrollbar-track-color: #FFFFFF; 
    scrollbar-face-color: #000000; 
    scrollbar-shadow-color: #000000; 
    scrollbar-highlight-color: #000000; 
    scrollbar-3dlight-color: #FFFFFF; 
    } 
    
    --> 
    
    </style>
    What does the code above mean?

    BODY,P,TD
    This line shows what the text on your page will look like.

    FONT FAMILY: This is the font you want to use. Put the name of the font here. Be sure to use a common, easy to read font like Tahoma, Arial, Comic Sans, Verdana, etcetera.

    FONT SIZE: This one is simple enough. Replace the number with the size of font you would like to use. Use PT sizes, not just the 1-7 font sizes. PT sizes are the font sizes you use in a word processor.

    COLOR: This changes the color of all the text on the page. Replace this with a color code.

    A:LINK, A:VISITED, A:HOVER
    These are styles are links. All the links on your page will change when you do these. "Link" is normal links. "Visited" is links that you have been to before. "Hover" is what the link looks like on mouseover.

    TEXT DECORATION:
    This is what is attached to the link. You can make the link underlined or overlined, you can make the link have a line through it, or you can make it have nothing at all. If you use FireFox, you can make your links blink. In Internet Explorer, it will just look like a normal link. You can keep none to make it so links aren't underlined, or you can add a different decoration:
    • none
    • overline
    • underline
    • line through
    • blink
    COLOR: This changes the color of all the links on the page. Replace this with a color code.

    CURSOR: This is only in the HOVER section. When you mouseover a link, you can get a different curser than the hand. If you really do want the hand, just take it out ^_~. There are many types of cursors:
    • cursor:n-resize - Cursor faces north
    • cursor:e-resize - Cursor faces east
    • cursor:s-resize - Cursor faces south
    • cursor:w-resize - Cursor faces west
    • cursor:nw-resize - Cursor faces northwest
    • cursor:ne-resize - Cursor faces northeast
    • cursor:sw-resize - Cursor faces southwest
    • cursor:se-resize - Cursor faces southeast
    • cursor:wait - The cursor looks like an hour glass
    • cursor:crosshair - Looks like a cross
    • cursor:move - Cursor with four arrows
    • cursor:help - Cursor with a question mark
    • cursor:text - Cursor looks like a text arrow

    BODY
    This is the section for you to add your colored scrollbars! If you look at this page, you'll notice my scrollbars are different colors. If you can't see it, it is because you are either using FireFox, or a version of Internet Explorer below 5.5. Just replace the colors of the scrollbar to your own hexcodes.

    scrollbar-arrow-color This is the color of the arrow that you push to go up and down.

    scrollbar-darkshadow-color This is the color on the outer right and bottom of the buttons.

    scrollbar-track-color This is the background of the scrollbar.

    scrollbar-face-color This the the bar travels up and down the scrollbar.

    scrollbar-shadow-color This is like the darkshadow color, but this one is a line just inside that line. This is a normal shadow.

    scrollbar-highlight-color This is a line that is on the inner left and top of the buttons.

    scrollbar-3dlight-color This a line that is on the outer left and top edge of the buttons.

    It may be hard to get a scrollbar you like, so just replace the colors, and see what you can come up with.

    How do I add borders to objects?

    Borders are nifty to add to tables, frames, and images. You can add this style to a lot of things.



    The above image should have a white dashed border around it (it doesn't because of the forum). This is done by using this code:

    HTML Code:
    style="border: 1px dashed #FFFFFF"
    You put the above code in the image tag like this:

    HTML Code:
    <img src="neovenezuelaffver.jpg" width="150" height="100" style="border: 1px dashed #FFFFFF">
    PX Change this number for how wide you want it to be.

    DASHED Replace this with SOLID, DOTTED, OUTSET, INSET, RIDGE, GROOVE or DOUBLE. There may be more types.

    COLOR As you may have guessed, this is the color of your border.
    Last edited by FlashD; 07-21-2009 at 07:22 AM.
    | Someone painted the sky |
    | Forever in my heart |

  2. #2
    Junior Member Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty has a brilliant future Oloty's Avatar
    Gil
    520.00
    Gender
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    08-13-2009 03:10 PM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Aug 2009
    Location
    Look Behind You!
    Threads
    2
    Posts
    26
    Rep Power
    0

    Default

    Nice work but just to point out for everyone the raw code will not work if you are trying to code something like a forum style you ave to input css version where items belong color and everything raw code will work but you have t implement it into certain spots. I'll design something now for an example.

  3. #3
    Promised Protector Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance has a reputation beyond repute Balance's Avatar
    Gil
    173.59
    Gender
    Gifts Ceiling Cat Gurren Kamina Glasses Cow
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    11-06-2012 09:47 PM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Sep 2006
    Location
    In a world of secrets
    Threads
    40
    Posts
    1,348
    Blog Entries
    1
    AW Wallpapers
    1
    Rep Power
    4199

    Default

    So...
    If you were to use the CSS codes, you would have to call upon the css style sheet before you begin programming the html/php page, am I correct?

    Then also, if you are formatting something on the html/php page, you can make it easier on yourself by making a css style and then calling upon the format that you've created by starting with <div class="name"></div>

    Am I correct?
    This is something that I had to learn all myself by the way, and I would like to know that I have a few things right.

    The Philosopher
    Kanon Finale

  4. #4
    Copyright 2013 FS FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD's Avatar
    Gil
    2,802.16
    Gender
    My Mood
    Lonely
    Gifts Bamboo Cup Notebook Sunglasses
    Mentioned
    128 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    04-20-2014 03:40 PM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Jun 2005
    Location
    I would like to know that too. O_o;;
    Age
    29
    Threads
    141
    Posts
    2,657
    Blog Entries
    5
    AW Wallpapers
    3
    Rep Power
    2127
    Gamer IDs

    Gamertag: Felsho

    Default

    Yes, there are 2 ways of using CSS. You can place the code in your header and then call a class or ID to it, or you can place the CSS directly inside the element.

    To give you an example:
    HTML Code:
    <html>
        <head>
              <style> 
                   <!--  
    
                   .DIVStyle { 
                   } 
    
                   #SecondStyle { 
                   } 
    
                   --> 
    
              </style>
        </head>
        <body>
              <div class="DIVStyle">Text here</div>
              <div id="SecondStyle">Text here</div>
        </body>
    </html>
    The example above is the way this tutorial explains the use of the CSS style sheet. In this case the HTML page calls it at the beginning of the script and then uses it later where needed.

    NOTE: Since this tutorial doesn't speak about IDs check the dot and the hash in the sheet. One defines a class, the other one an ID and they have to be used that way.

    The example below uses the CSS style sheet by element.
    HTML Code:
    <div style="color: red;">Text here</div>
    This way you define each element separately and doesn't need a <style></style> element in the header. In this case the attribute gets called when the element is processed. Usually this way of coding is used for attributes that need to be defined only once in the whole document. It is recommended to avoid this way of coding and use the ID attribute instead.
    Last edited by FlashD; 08-15-2009 at 03:26 AM.

Closed Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts