1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[TUT] CSS basic overview

Discussion in 'General Scripting Chat' started by Wolfpack, Aug 28, 2011.

  1. Wolfpack

    Wolfpack Junior Member

    Joined:
    Jul 13, 2011
    Messages:
    166
    Likes Received:
    346
    Copy this into a text file or Word for best reading. If viewing in Word, select all then reduce Spacing to 0 (Page Layout > Spacing > After to 0pt, then press enter).

    This is more of a reference sheet rather than a guide, but it can be used by newbies if they want to briefly skim through and learn some basics, written from scratch so please point out errors or anything wrong with it.

    Code:
    
    =====
    1 Values and units
    =====
       ----
       * Absolute values
       ----
          - em: Width of the font letter M.
          - ex: Height of the lowercase letter X.
          - px: Pixel resolution.
          - pt: Computer standard compliant measurement of fonts.
       ----
       * Colour values
       ----
          - #RRGGBB       : Hexidecimal code for a colour, also #RGB.
          - rgb(R#,G#,B#) : Numeric code values (0-255).
          - rgb(R%,G%,B%) : Percentile proportion values (0-100%).
          - <colour>      : Absolute name of a colour.
    
    =====
    2 CSS Structures: THESE ARE FOR REFERENCE THROUGHOUT THE TUTORIAL
    =====
       ----
       * Inline structure
       ---- 
           ________________________________________
          |                                        |
          |    1   2   3   4     5       6     7   |
          |                                        |
          | < h1 style = "color:red;" > ... < /h1 >|
          |                                        |
          |________________________________________| 
    
          1 HTML selector
          2 Style attribute
          3 Equal sign   
          4 Property  
          5 Value 
          6 Content
          7 Closing tag 
    
          - Example: 
              <p style=font-size:12px;>Hello</p>
              - This paragraph has been styled with font-size 12px.
    
       ----                 
       * Internal structure
       ----
           ______________________________________________
          |                                              |
          |      1      _________2_________              |
          |      |   _ |                   |             |
          |      |  | <style type="text/css">            |
          |      |__|     h1 { color: red; }-----3       |
          |         |_</style>                           |
          |                                              |
          |______________________________________________| 
    
          1 Style tags
          2 Style type
          3 CSS Rule   
    
          - Example: 
              <style type="text/css">
                 p { font-size:12px; }
              </style>
              - All paragraphs now have font-size 12px in this HTML document.
       ----
       * External structure
       ----
          - Same structure as internal, but using an external file to host the stylesheet, in a .txt document.
          - Insert into a HTML document by placing this in the head of the document:
    
          <link rel="stylesheet" type=text/css" href="website/stylesheets/*.css" />
    
          , where * is the name of the stylesheet, and website/stylesheets/ is an example of putting in the location of a stylesheet if it is within another folder.
    
    =====
    3 Examples of uses of CSS in HTML
    =====
       ----
       * HTML Selectors style all of the same type of an HTML element throughout the document. For example:
       ----
          
          THE SELECTOR:
          p { font-size: 12px; } 
          
          All <p> tags are now set to having size 12 in their font size.
          
          - The "p" (for <p>, paragraph) is placed infront of the definition.
          - This changes HTML tag definitions to fit any necessary specifications.
    
         EXAMPLE INSIDE HTML DOCUMENT: The code below can be copied and pasted into a .txt, saved as "filename.html" [WITH QUOTES AROUND IT] and loaded into an Internet browser to be viewed as an example.
    [CODE]
    <HTML>
    <HEAD>
    <style type="text/css">
    P.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline;}
    </style>
    
    </HEAD>
    
    <BODY>
    <p>This is a normal paragraph</p><br>
    <p class="headline">This is a headline style paragraph</p>
    </BODY>
    
    </HTML>
    
    =====
    ASSIGNING CSS TO INDIVIDUAL HTML ELEMENTS:
    =====

    ----
    * Class Selector: [COLOR:RED]MANDATORY FOR USING CSS PROPERLY, DO NOT SKIM THIS.[/COLOR]
    ----

    .text { font-size: 12px; }

    - The ".text" is placed infront of the definition.
    - This creates a custom tag, which can be prefixed upon any HTML tags to create and modify the tag (eg. <p class=text> ..., where all elements with the class="text" now have font size 12px).

    ----
    * ID Selectors: [COLOR:RED]MANDATORY FOR USING CSS PROPERLY, DO NOT SKIM THIS.[/COLOR]
    ----

    #area1 { font-size: 16px; }

    - The "#area" is placed infront of the definition.
    - This creates a custom ID, which can assigned to any tag by implementing id="area1" within the HTML element (eg. <p id="area1" ..., which now has font-size of 16px assigned to its text).
    - Designed for use once on an element (overrides Class selectors), but can be used like a class selector on many elements.

    ----
    * Defining pseudo-classes
    ----

    a:hover { font-size: 12px; }

    - The pseudo-class is placed infront of the definition.
    - This creates a custom specification to the pseudo-class specified in the rule (eg, <a (anchors)> now have font-size of 12px when hovered over).

    =====
    List of HTML selectors (with ex. and explanation):
    =====

    ===
    - FOR TEXT
    ===
    - p { font-family:arial;
    font-family:arial, helvetica; }

    - Assigns paragraphs the font arial (font-family:arial), and if the font cannot be loaded, the generic font family Helvectica is used instead (font-family:arial, helvetica).

    - p { font-style:normal;
    font-style:italic;
    font-style:eek:blique;

    - Assigns paragraphs the font style of either normal (font-style:normal), italic (font-style:italic) or obliquie (font-style:eek:blique).

    - p { font-size:normal;
    font-size:14px;
    font-size:14pt;
    font-size:xx-small;
    font-size:x-small;
    font-size:small;
    font-size:medium;
    font-size:large;
    font-size:x-large;
    font-size:xx-large;
    font-size:smaller;
    font-size:larger;
    font-size:75%; }

    - Assigns paragraphs different font sizes; the average font-size (font-size:normal;), an absolute value (eg. font-size:14px;), a defined absolute value (eg. font-size:large;) or a ratio in percentage (font-size:75%;)

    - p { text-transform:none;
    text-transform:capitalize;
    text-transform:uppercase;
    text-transform:lowercase; }

    - Assigns paragraphs transformations of capitalized (text-transform: capitalized;), uppercase (text-transform: uppercase;) or lower-case (text-transform: lowercase;). Can be made normal (text-transform: normal) also.

    - p { text-align: left;
    text-align: right;
    text-align: center;
    text-align: justified;

    - Assigns paragraphs different alignments; justified (text-align: justified;) is where text is stretched to match the whole size of it's container.

    - p { text-decoration:none;
    text-decoration:underline;
    text-decoration:eek:verline;
    text-decoration:line-through;

    - Assigns text different decorations; underlined (text-decoration: underline;), overline (text-decoration: overline;) and line-through (text-decoration: line-through;). There is also blink (text-decoration:blink;), basically flashing text, but please don't ever fucking use flashing text, I'll use your whois, hunt your address and kill you. Ait?

    - p { color: red;
    color: #000000;
    color: rgb(127,127,127)

    - Assigns text colors; absolute defined colors (color: red;), from hexadecimal (color:#000000; #000000 (or #000) is the hexi code for black), or from rgb scale (color:rgb(127,127,127); the hexicode for grey at 50%).

    ===
    - FOR BACKGROUND:
    ===

    - body { background-color:#FF6666;
    background-image:url(myimage.gif);
    [USE FOR ONLY WHEN YOU HAVE A BACKGROUND-IMAGE.]
    * background-repeat:repeat-x
    - Repeats image horizontally.
    * background-repeat:repeat-y
    - Repeats image vertically.
    * background-repeat:no-repeat
    - No background image repeating.
    * background-position: 75px 75px;
    - Positions the image 75px from the left and 75px from the top of the page.
    * background-attachment: fixed
    - The background image is fixed, so it does not move when scrolling.

    - The whole page body can be assigned background values; blackground-color sets the background to a certain color (rgb, hexidecimal or absolute can be used), can be repeated either horizontally ( background-repeat:x;) or vertically ( background-repeat:y;), be positioned certainly from the left and top of the page ( background-position: 75px 75px; ) and attached specifically ( background-attachment: fixed ).

    ===
    - FOR LINKS (text styles still affect link text):
    ===

    - a:link { font-size:12px; color:blue; }
    a:visited { font-size:12px; color:purple; }
    a:hover { font-size:12px; color:eek:range; }

    - Assigns anchor text (<a>) dynamic properties for when it is active; all links are colored blue and font size 12px (a:link { font-size:12px; color:blue; }), all links are colored purple and font size 12px that have already been visited (a:visited { font-size:12px; color:purple; }), and links when hovered over turn orange ( a:hover { font-size:12px; color:eek:range; }).

    ===
    - FOR DIFFERENT CURSORS:
    ===

    - a:hover { cursor:help;
    cursor:default;
    cursor:text;
    cursor:progress;
    cursor;move; }

    - Assigns anchor text, when hovered over, different cursors: a help cursor (cursor:help), the default cursor (cursor:default), the move cursor (cursor:move), the text cursor (cursor: text), or the progress (the one with the little sandtimer next to the pointer) cursor (cursor:progress).

    ===
    - FOR POSITIONING AND OVERLAPPING IMAGES/TEXT:
    ===

    - #image1 { position: relative; left:100px; top:100px;
    z-value: 1; }
    #image2 { position: relative; left:0px; top:0px;
    z-value: 2; }

    - This is best shown as an example:

    Code:
    <html>
    <head>
       <style type="css/text">
          #image1 { position: relative; left:200px; top:200px;
                       z-value: 1; }
          #image2 { position: relative; left:0px; top:0px;
                       z-value: 2; }
       </style>
    </head>
    <body>
       <h1>Monkeys in sanitary towels<h1>
       <img src="http://upload.wikimedia.org/wikipedia/commons/7/77/B60-00036.jpg" id="image1" />
       <img src="http://upload.wikimedia.org/wikipedia/commons/7/77/B60-00036.jpg" id="image2" />
    </body>
    </html>
    
    - Save this as a .html file (notepad > file > save as.. > "image-overlapping.html" [WITH QUOTES]) and open. As you can see, the two monkeys dressed in sanitary towels are overlapping one another. The z-value (z-value:1) denotes which one is on the top of the overlap. If you change the z-value of #image2 and #image1 so that #image1 has the larger value z-value, you will notice the images overlap the other way, hallelujah praise the lord.

    [/CODE]
     
    • Thanks Thanks x 1
    Last edited: Aug 28, 2011
  2. WizIMS

    WizIMS Power Member

    Joined:
    Sep 24, 2011
    Messages:
    684
    Likes Received:
    870
    Location:
    Skype - Wiz.IMS
    Home Page:
    Thanks alot man , though it'll look nicer if you put it in the thread (Not with the scrolls etc)
     
  3. hellrazor

    hellrazor Newbie

    Joined:
    Mar 13, 2010
    Messages:
    25
    Likes Received:
    11
    The best editor to get for doing html and for reading text files is notepad++. Just google it, its free, its better than word for avoiding any formatting issues.