css by 307Ng9


									                                       CSS Manuals

What is CSS?

      CSS stands for Cascading Style Sheets. A style defines how an HTML element is

Why use CSS?

      Making website changes quickly.
      Saving lots of works and loading website fast.
      Build more diverse websites.

Types of CSS

      The Style Declaration is at the heart of CSS. There are 3 types of Styles we are using

          1. Internal (Embedded) Styles
          2. Inline Styles
          3. External Styles

1. Internal / Embedded Styles

      These Styles can be re-used only for the web page in which they are embedded.
      Therefore, you would need to create these styles over and over again for each web
       page you wish to style.
      When using the style builder, Define the style in the Current Page. This will create
       an Internal Style. But, Internal Styles are not ideal.
      The <style> tag is used to write an Internal Style. Here's an Example:

             <style type="text/css">
                     color: #222;


2. Inline Styles

              Inline Styles cannot be resused at all, period. Inline styles are placed directly
               inside an HTML element in the code. We cannot use the Style Builder to
               make an Inline Style. Instead, to purposely create an inline style requires you
               to go into the HTML code and type the style yourself.

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                                  Page 1
                                        CSS Manuals

               Inline Styles do not have a Selector. Why not? The reason is because an
                inline style is embedded directly inside the html element it styles. Therefore,
                there's no need for a selector.

               Example of an Inline Style:
                <p style="font-size: 14px; color: purple;"></p>

3. External Style Sheet

               The External Style Sheet is basically a Text File that is Saved As a .css file. It
                is simply a separate page from our html pages.
               This will allow us to reuse the styles as many times as we would like simply
                by linking the External Style Sheet to other web pages.
               We must Link the External Style Sheet to the Web Page(s) in order for the
                External Styles to be applied as specified.
               <link href="main.css" rel="stylesheet" type="text/css" >

CSS Syntax

               A CSS rule has two main parts: a selector, and one or more declarations:
               The selector is normally the HTML element you want to style.
               Each declaration consists of a property and a value.
               The property is the style attribute you want to change. Each property has a
               A CSS declaration always ends with a semicolon, and declaration groups are
                surrounded by curly brackets:

CSS Comments

      Comments are used to explain your code, and may help you when you edit the source code
       at a later date. Comments are ignored by browsers.
      A CSS comment begins with "/*", and ends with "*/", like this

CSS Selectors

      The core selectors are

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                                    Page 2
                                        CSS Manuals

  1. ID

  2. Class

  3. Tag or Element

  4. Descendant

  5. Universal

1. ID Selectors

      An ID Selector is indicated by using the pound # sign.
      Use an ID Selector for page elements that occur one time on a web page. In other words, ID
       Selectors must be unique.
      A perfect example is the Layout. Use an ID Selector for each div of the CSS Layout.
      Example : #idname(example : <p id=”idname”>Text</p>)

2. Class Selectors

      For instance, .bold_text is a class selector that defined.
      Class Selectors must begin with a period followed by a letter. Cannot use a number
       immediately after the period.
      A Class Selector can be used as many times as needed on a single web page.
      You are required to use the period at the beginning, but you can use any words you would
       like to name the selector
      Example: .classname
      We can call the class using class within HTML tag(example : <p class=”classname”>Text</p>)

3. Tag Selectors

      A Tag Selector is simply the HTML tag weare styling, but without the class name and ID

4. Descendant Selectors

      A Class Selector is indicated by a period .
      Descendant Selectors are created to style any nested elements. For instance, if we style a
       paragraph that is inside the #maincontent div, we will use a descendant selector.

   #maincontent p { font-size: 13px;}

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                                    Page 3
                                          CSS Manuals

           The space between #maincontent and the letter p is intentional. It means we are styling
            all paragraphs located inside the maincontent div.

5. Universal Selectors

Pseudo Class Selectors are used to style the four states of a hyperlink.

       a
       a:link
       a:visited
       a:hover
       a:active

CSS Properties

1.Background Properties

             CSS background properties are used to define the background effects of an element.
             CSS properties used for background effects:
                   1. background-color
                   2. background-image
                   3. background-repeat
                   4. background-attachment
                   5. background-position
   The background-color property specifies the background color of an element. You can set the
    background color to a certain color or set the background color as transparent.( body {
    background-color: #98AB6F } or pre { background-color: transparent;})
   Background-image is to set an image as as the background of an element. By default, the image
    is repeated so it covers the entire element. The Syntax goes like this: (background-image : none
    or url ( url ) )
   By default,the background-image property repeats an image both horizontally and vertically,
    however you can set the background-image repeats only horizontally (repeat-x) or only vertically
    (repeat-y). The Background-repeat Syntax goes in this way: (background-repeat : repeat | no-
    repeat | repeat-x | repeat-y)
   Background attachment is to used to set background scroll naturally, or to have it in a fixed
   Background-position is used to define the exactly position an image appears within an element.

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                                    Page 4
                                          CSS Manuals


2.Font Properties

   CSS font properties define the way text is displayed, the font family, boldness, size, and the style
    of a text.
                 1. font
                 2. font-family
                 3. font-size
                 4. font-style
                 5. font-variant
                 6. font-weight
   font: Sets all the font properties in one declaration.
   The font-family property is to define the font family of a text.
   The font-size property is to set the size of your fonts. There are three ways to set it, by using
    values, percentages, or key terms.
    p { font-style: normal; }
    p { font-size: 12px; }
    p { font-size: 20%; }
    h1 {font-size:2.5em;}
   font-style property is mostly used to specify italic text.This property has three values:
    p { font-style: normal; }
    p { font-style: italic; }
    p { font-style: oblique; }
   font-variant property is to specify and convert font to all small caps.
    span { font-variant: small-caps; }
   The font-weight property sets how thick or thin characters in text should be displayed.

    p.normal {font-weight:normal}
    p.thick {font-weight:bold}
    p.thicker {font-weight:900}

3.Text Properties

     CSS Font covers most of the traditional ways to format your text, CSS Text enables you to
      control the spacing, decoration, and alignment of your text.
          1. color
          2. text-decoration
          3. text-transform
          4. text-align
          5. letter-spacing
          6. word-spacing
          7. direction
 The color property is used to set the color of the text, The color can be specified by
  body {color:blue;}
  h1 {color:#00ff00;}
  h2 {color:rgb(255,0,0);}
 The text-decoration property is used to set or remove decorations from text.

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                                        Page 5
                                         CSS Manuals

text-decoration : none |underline |blink |overline |line-through|blink
 The text-transform property is used to specify uppercase and lowercase letters in a text, or
    capitalize the first letter of each word.
    text-transform : none | capitalize | uppercase | lowercase
 The text-align property is used to set the horizontal alignment of a text.Text can be centered, or
    aligned to the left or right, or justified.
    text-align : left | right | center | justify
 The letter-spacing property is used to set the distant between letter in a text.
    letter-spacing : normal | length

    normal is the default setting

.div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

 The word-spacing property is used to set the distant between word.

    letter-spacing : normal | length

 The direction property specifies the text direction/writing direction.

4.List Properties

In HTML, there are two types of lists:

       unordered lists - the list items are marked with bullets
       ordered lists - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as the list item marker.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

list-style-image: url('sqpurple.gif');

5.Link Properties

       CSS Links can be a style with any CSS property (e.g. color, font-family, background-
        color). Special for links are that they can be styled differently depending on what state
        they are in.

The four links states are:

* a:link – a normal, unvisited link
* a:visited – a link the user has visited
* a:hover – a link when the user mouses over it
* a:active – a link the moment it is clicked.

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                                     Page 6
                                     CSS Manuals

      a:link {color:#FF0000;} /* unvisited link */
      a:visited {color:#00FF00;} /* visited link */
      a:hover {color:#FF00FF;} /* mouse over link */
      a:active {color:#0000FF;} /* selected link */

 The CSS border properties allow you to specify the style and color of an element's border.
 The margin clears an area around an element (outside the border). The margin does not
  have a background color, and is completely transparent.
 The top, right, bottom, and left margin can be changed independently using separate
  properties. A shorthand margin property can also be used, to change all margins at once.

 The CSS padding properties define the space between the element border and the element
 The display property specifies if/how an element is displayed, and the visibility property
  specifies if an element should be visible or hidden.
 With CSS float, an element can be pushed to the left or right, allowing other elements to
  wrap around it.
 Float is very often used for images, but it is also useful when working with layouts.

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693                             Page 7
                                  CSS Manuals

Designed by Rasmiranjan Sahoo (System Analyst)-9132055693   Page 8

To top