Document Sample
CSS Powered By Docstoc
					                                     General Rules Of CSS
(Q) How to insert CSS into your pages ?
                                                  (Ans) There are three main methods.
  1- Write it within HTML Source In the head Element

        Ex :- ( Internal style Sheet )

                       <style type="text/css">



                                 color :    red   ;   ‫بمعني اي فقرة في الصفحة خلي لون الكتابة فيها حمرا‬




  2- Write It in an External Style Sheets With .CSS extension and Call it from

        Ex :- (Calling External style Sheet named ex1 )

                           <link rel="stylesheet" type="text/css" href="ex1.css" /> //rel mean relation


  3- Write It Inline As HTML attribute
        Ex :- ( Inline )
               <p style=" color:red ;          font-family:20px       " >

                       This is a Styled paragraph.

                                          CSS Syntax
CSS Syntax has two main parts:-
   Selector                 :-HTML element you want to style
   Declarations             :-Consists of a property and a value

        Ex :-

         The property is the style attribute you want to change.
         Each property has a value. And values may have units
         Declarations always end with a semicolon ;
         Declaration groups are surrounded by curly brackets { }
         Do not leave spaces between the property value and the units
        Ex :-
                "font-size:20 px" False            Instead of            "font-size:20px" True

                                      CSS Comments
Why comments ?
         Used to explain code and can be putted every where in the source
         Help when editing the source code at a later date
         Ignored by browsers.

   A CSS comment begins with /* and ends with */
        Ex :-
                This is a comment
                              The id and class Selectors
 In addition to setting a style for a HTML element, CSS allows you to specify your
  own selectors called :-         "id" and "class".
The id Selector
       Used to specify a style for a single unique element.
       Uses HTML id attribute which defined with             #+ID name
       Don't start an ID name with a number.
      Ex :-
              1-Declaration in head element :-
                                         <style type="text/css">
                                                   #paragraphs { color :        red   ;    }
              2-Calling in body :-
                                     <p     id="paragraphs"      > Hello World!           </p>
The class Selector
       Used to specify a style for a group of elements
       Allow setting a particular style for any HTML elements with the same class.
       Uses the HTML class attribute which defined with              .+Class name
       Don't start Class name with a number.
      Ex :- ( no assignment)                             .center
              1-Declaration in head element:-
                                                   <style type="text/css">
                                                          .center {   text-align : center ;            }

              2-Calling in body :-
                                     <h1 class="center"> Center-aligned heading             </h1>
                                     <p class="center"> Center-aligned paragraph.           </p>

       Can specify that only specific HTML elements should be affected by a class

      Ex :- ( assign for paragraphs only )     
              1-Declaration in head element :-
                                         <style type="text/css">
                                          {    text-align : center ;             }
              2-Calling in body :-
                                     <p class="center">   Will be center-aligned            </p>
                                     <h1 class="center"> Will not be affected      </h1>
                             How to make external style sheets

            External style sheet can be written in any text editor.
            Should not contain any html tags.
            Should be saved with a .css extension.

Ex :-
         Open notepad ( or any text editor ) and write :-
                                                             hr { color:blue; }
                                                             p {   margin-left:20px; }
         Save your file with .css extension
         Then we can call it from any html web page you want to style with this style sheet
         To call it we should use the <link> tag which defines a resource reference
                          <link rel="stylesheet"        type="text/css"         href="mystyle.css" />
     rel attribute stands for relation
                which specify the relation between the current doc and the linked doc.

         We can reference Multiple stylesheet inside a single HTML document.

                                      Multiple Style Sheets
     Multiple Styles Will Cascade into One
     If some properties have been set for the same selector in different style sheets
                                 then values will be inherited from the more specific style sheet.

   Cascading order
     Q :-        What style will be used when there is more than one style specified for an HTML
     Ans :-      All the styles will "cascade" into a new "virtual" style sheet by the following

     Order according to priority from Low To High:-
                  1-Browser default
                          2-External style sheet
                                 3-Internal style sheet (in the head section)
                                        4-Inline style (inside an HTML element)
     Ex :-
     External style sheet has these properties for the h3 selector:-
                                  h3{ color:red ; text-align:left      ;   font-size:8pt   ; }

     And Internal style sheet has these properties for the h3 selector:-
                                  h3{ text-align:right   ; font-size:20pt     ;   }

     Then If the page with the internal style sheet also links to the external style sheet the
     properties for h3 will be inherited as follows :-
                                         h3{ color:red ; text-align:right;       font-size:20pt; }

 Note:- If the link to the external style sheet is placed after the internal style sheet in
   HTML <head>, the external style sheet will override the internal style sheet

Shared By: