Monday, 11 March 2013

CSS Tutorial part1



CASCADING STYLE SHEET


                     CSS (CASCADING STYLE SHEET) which defines how to show the HTML elements with the design format. You must know about the HTML before you learn about CSS. It is very useful to give your HTML pages like neat presentations. When a browser reads a style sheet, it will format the document according to it. We can style a HTML tags using CSS selectors which we will discuss later.  Each CSS has a specific rule and we save the CSS file with the .css extension.

 CSS Syntax:

      We can define a CSS styles using selectors and declarations.

Eg:   div {color: red; text-align: center;}

In the above example, div is a selector and the elements within paranthesis is declaration. Each Declaration has their own property and its values "color" is a property and "red" is value.

 CSS Styles are given by Three ways

  • Inline CSS styles. 
  • Embedded CSS styles.
  • External CSS styles.

Inline CSS Styles:

    Inline CSS styles has the "Maximum Priority" i.e., We can style the "HTML tag internally" using style attribute. But the main thing to know is defining the Inline CSS is become more complex to edit when you create a large HTML pages.
          Eg:   <div style="font-size: 40px;color: red;">Example For Easy Learning</div>

         Live Example click here
 When defining the multiple properties you can use a semicolon(;) to separate the property value.

Embedded CSS Styles:

       Embedded CSS styles are given within the "HTML Document" which has the next level priority. If we have only one CSS file for the whole HTML Document then we use this type. This can be define using the style tag and this tag is must given within the head section of the document. 
          Eg: div{display: block;} span{visibility: hidden;}

          Live Example click here

External CSS Styles:

       External CSS Styles are given the external CSS document which can be save as the extension of .css and we can link this document using the "link tag". This tag also must be in head section of the document.
         Eg: <head>
               <link rel='stylesheet' type='text/css' href="external.css" />
               </head>

        If you give the Embedded and External CSS styles in the same HTML document then it takes the priority of order of your CSS. Eg: You give the Embedded Styles at first and the External CSS as second then the External CSS Styles can override the Embedded Styles. For Efficient Coding avoid these types of CSS using.

CSS Selectors:

      We Use the "ID" and "Class" as a main selectors for using CSS. You can use ID for the unique way of representation and Class for the common way of representing the CSS Styles. ID defined with a "#" Symbol and Class defined with a "." Symbol. 
Eg for using ID:  <div id='test'>Testing</div>
        #test{color: red;}
          Live Example click here
Eg for using Class: <div class='test'>Testing</div><div class='test'>Sample</div><div class='test'>Content</div>
        .test{color:red;font-size: 30px;}
           Live Example click here
Now you have the clear idea of using Class'es and Id's. Ids is like your office employee number and the classes is like your office name. Use your ID and Class names as alphabetic avoid using only numbers as a name which is a good coding style.

CSS Properties: 

     There are several CSS properties which has to be used to style the document. These are the most commonly used properties in CSS
·         Background-color
·         Background-image
·         Background-repeat
·         Background-position
·         Border (top,right,bottom,left)
·         Border-collapse
·         border-style (top,right,bottom,left)
·         border-width
·         border-color (top,right,bottom,left)
·         border-radius (top,right,bottom,left)
·         border-spacing
·         border-image
·         bottom
·         box-shadow
·         color
·         cursor
·         clear
·         display
·         direction
·         font
·         font-family
·         font-size
·         font-style
·         font-weight
·         float
·         height
·         left
·         letter-spacing
·         line-height
·         list-style
·         list-style-image
·         list-style-position
·         list-style-type
·         margin (top,right,bottom,left)
·         min-height
·         max-height
·         min-width
·         max-width
·         opacity
·         overflow-x
·         overflow-y
·         padding (top,right,bottom,left)
·         pointer-events
·         position
·         right
·         top
·         text-align
·         text-decoration
·         text-indent
·         text-shadow
·         text-transform
·         transition
·         transition-delay
·         transform
·         transform-style
·         vertical-align
·         visibility
·         width
·         word-spacing
·         word-wrap
·         word-break
·         white-space
·         z-index


Background Property:

                   Using these property we can change our HTML document background.
Background-color:  is used to set the color for the background we can give only the valid color reference as the background-color they are
  • RGB colors
  • RGBA colors
  • HSLA colors
  • Predefined/Cross-browser color names
Hexadecimal Colors: This colors are range from 00 to FF and we give this color in CSS like #RRGGBB (Red, Green, Blue) Eg: background-color: #000000 (black) or #00ff00 (green). Like this combination we can create the 16581375 combinations of colors. Live Example click here.
RGB Colors: This colors is also like a hexadecimal in here we give the value of this color with rgb(). Eg: background-color: rgb(0,255,0);. We can set the color values as a percentage also Eg: background-color: rgb(0%,100%,0%). Live Example click here.
RGBA Colors: This is same as the RGB color but instead of with an alpha channel which specifies the opacity. The alpha parameter is between 0.0 to 1.0. Eg: background-color: rgb(0,255,0,0.3). Live Example click here.
HSL Colors: HSL means Hue, Saturation, Lightness. which is a degree of a color wheel of 0 to 360. Saturation is a shade of grey which given in a percentage value 0 to 100%. Lightness is the brightness relative to the brightness of a similarly illuminated white which also in a percentage value 0 to 100%. Eg: background-color: hsl(240,50%,50%) ; Live Example click here.
HSLA Colors: This is same as the HSL colors which contains the alpha range to set for the opacity. Eg: background-color: hsla(240,50%,50%,0.3). Live Example click here.
Predefined/Cross-browser color names: There are several color names in HTML. They are given below
Color Name RGB Value Hexadecimal Value Appearance
AliceBlue rgb(240, 248, 255) #F0F8FF
AntiqueWhite rgb(250, 235, 215) #FAEBD7
Aqua rgb(0, 255, 255) #00FFFF
Aquamarine rgb(127, 255, 212) #7FFFD4
Azure rgb(240, 255, 255) #F0FFFF
Beige rgb(245, 245, 220) #F5F5DC
Bisque rgb(255, 228, 196) #FFE4C4
Black rgb(0, 0, 0) #000000
BlanchedAlmond rgb(255, 235, 205) #FFEBCD
Blue rgb(0, 0, 255) #0000FF
BlueViolet rgb(138, 43, 226) #8A2BE2
Brown rgb(165, 42, 42) #A52A2A
BurlyWood rgb(222, 184, 135) #DEB887
CadetBlue rgb(95, 158, 160) #5F9EA0
Chartreuse rgb(127, 255, 0) #7FFF00
Chocolate rgb(210, 105, 30) #D2691E
Coral rgb(255, 127, 80) #FF7F50
CornflowerBlue rgb(100, 149, 237) #6495ED
Cornsilk rgb(255, 248, 220) #FFF8DC
Crimson rgb(220, 20, 60) #DC143C
Cyan rgb(0, 255, 255) #00FFFF
DarkBlue rgb(0, 0, 139) #00008B
DarkCyan rgb(0, 139, 139) #008B8B
DarkGoldenrod rgb(184, 134, 11) #B8860B
DarkGray rgb(169, 169, 169) #A9A9A9
DarkGreen rgb(0, 100, 0) #006400
DarkKhaki rgb(189, 183, 107) #BDB76B
DarkMagenta rgb(139, 0, 139) #8B008B
DarkOliveGreen rgb(85, 107, 47) #556B2F
DarkOrange rgb(255, 140, 0) #FF8C00
DarkOrchid rgb(153, 50, 204) #9932CC
DarkRed rgb(139, 0, 0) #8B0000
DarkSalmon rgb(233, 150, 122) #E9967A
DarkSeaGreen rgb(143, 188, 143) #8FBC8F
DarkSlateBlue rgb(72, 61, 139) #483D8B
DarkSlateGray rgb(47, 79, 79) #2F4F4F
DarkTurquoise rgb(0, 206, 209) #00CED1
DarkViolet rgb(148, 0, 211) #9400D3
DeepPink rgb(255, 20, 147) #FF1493
DeepSkyBlue rgb(0, 191, 255) #00BFFF
DimGray rgb(105, 105, 105) #696969
DodgerBlue rgb(30, 144, 255) #1E90FF
FireBrick rgb(178, 34, 34) #B22222
FloralWhite rgb(255, 250, 240) #FFFAF0
ForestGreen rgb(34, 139, 34) #228B22
Fuchsia rgb(255, 0, 255) #FF00FF
Gainsboro rgb(220, 220, 220) #DCDCDC
GhostWhite rgb(248, 248, 255) #F8F8FF
Gold rgb(255, 215, 0) #FFD700
Goldenrod rgb(218, 165, 32) #DAA520
Gray rgb(128, 128, 128) #808080
Green rgb(0, 128, 0) #008000
GreenYellow rgb(173, 255, 47) #ADFF2F
Honeydew rgb(240, 255, 240) #F0FFF0
HotPink rgb(255, 105, 180) #FF69B4
IndianRed rgb(205, 92, 92) #CD5C5C
Indigo rgb(75, 0, 130) #4B0082
Ivory rgb(255, 255, 240) #FFFFF0
Khaki rgb(240, 230, 140) #F0E68C
Lavender rgb(230, 230, 250) #E6E6FA
LavenderBlush rgb(255, 240, 245) #FFF0F5
LawnGreen rgb(124, 252, 0) #7CFC00
LemonChiffon rgb(255, 250, 205) #FFFACD
LightBlue rgb(173, 216, 230) #ADD8E6
LightCoral rgb(240, 128, 128) #F08080
LightCyan rgb(224, 255, 255) #E0FFFF
LightGoldenrodYellow rgb(250, 250, 210) #FAFAD2
LightGreen rgb(144, 238, 144) #90EE90
LightGrey rgb(211, 211, 211) #D3D3D3
LightPink rgb(255, 182, 193) #FFB6C1
LightSalmon rgb(255, 160, 122) #FFA07A
LightSeaGreen rgb(32, 178, 170) #20B2AA
LightSkyBlue rgb(135, 206, 250) #87CEFA
LightSlateGray rgb(119, 136, 153) #778899
LightSteelBlue rgb(176, 196, 222) #B0C4DE
LightYellow rgb(255, 255, 224) #FFFFE0
Lime rgb(0, 255, 0) #00FF00
LimeGreen rgb(50, 205, 50) #32CD32
Linen rgb(250, 240, 230) #FAF0E6
Magenta rgb(255, 0, 255) #FF00FF
Maroon rgb(128, 0, 0) #800000
MediumAquamarine rgb(102, 205, 170) #66CDAA
MediumBlue rgb(0, 0, 205) #0000CD
MediumOrchid rgb(186, 85, 211) #BA55D3
MediumPurple rgb(147, 112, 219) #9370DB
MediumSeaGreen rgb(60, 179, 113) #3CB371
MediumSlateBlue rgb(123, 104, 238) #7B68EE
MediumSpringGreen rgb(0, 250, 154) #00FA9A
MediumTurquoise rgb(72, 209, 204) #48D1CC
MediumVioletRed rgb(199, 21, 133) #C71585
MidnightBlue rgb(25, 25, 112) #191970
MintCream rgb(245, 255, 250) #F5FFFA
MistyRose rgb(255, 228, 225) #FFE4E1
Moccasin rgb(255, 228, 181) #FFE4B5
NavajoWhite rgb(255, 222, 173) #FFDEAD
Navy rgb(0, 0, 128) #000080
OldLace rgb(253, 245, 230) #FDF5E6
Olive rgb(128, 128, 0) #808000
OliveDrab rgb(107, 142, 35) #6B8E23
Orange rgb(255, 165, 0) #FFA500
OrangeRed rgb(255, 69, 0) #FF4500
Orchid rgb(218, 112, 214) #DA70D6
PaleGoldenrod rgb(238, 232, 170) #EEE8AA
PaleGreen rgb(152, 251, 152) #98FB98
PaleTurquoise rgb(175, 238, 238) #AFEEEE
PaleVioletRed rgb(219, 112, 147) #DB7093
PapayaWhip rgb(255, 239, 213) #FFEFD5
PeachPuff rgb(255, 218, 185) #FFDAB9
Peru rgb(205, 133, 63) #CD853F
Pink rgb(255, 192, 203) #FFC0CB
Plum rgb(221, 160, 221) #DDA0DD
PowderBlue rgb(176, 224, 230) #B0E0E6
Purple rgb(128, 0, 128) #800080
Red rgb(255, 0, 0) #FF0000
RosyBrown rgb(188, 143, 143) #BC8F8F
RoyalBlue rgb(65, 105, 225) #4169E1
SaddleBrown rgb(139, 69, 19) #8B4513
Salmon rgb(250, 128, 114) #FA8072
SandyBrown rgb(244, 164, 96) #F4A460
SeaGreen rgb(46, 139, 87) #2E8B57
Seashell rgb(255, 245, 238) #FFF5EE
Sienna rgb(160, 82, 45) #A0522D
Silver rgb(192, 192, 192) #C0C0C0
SkyBlue rgb(135, 206, 235) #87CEEB
SlateBlue rgb(106, 90, 205) #6A5ACD
SlateGray rgb(112, 128, 144) #708090
Snow rgb(255, 250, 250) #FFFAFA
SpringGreen rgb(0, 255, 127) #00FF7F
SteelBlue rgb(70, 130, 180) #4682B4
Tan rgb(210, 180, 140) #D2B48C
Teal rgb(0, 128, 128) #008080
Thistle rgb(216, 191, 216) #D8BFD8
Tomato rgb(255, 99, 71) #FF6347
Turquoise rgb(64, 224, 208) #40E0D0
Violet rgb(238, 130, 238) #EE82EE
Wheat rgb(245, 222, 179) #F5DEB3
White rgb(255, 255, 255) #FFFFFF
WhiteSmoke rgb(245, 245, 245) #F5F5F5
Yellow rgb(255, 255, 0) #FFFF00
YellowGreen rgb(154, 205, 50) #9ACD32
Background-image: Instead of colors we can set a image as a background in HTML document. value can be given within the url(). Eg: background-image: url(http://cdn.overclock.net/a/ae/aed86d82_Opera-Background-Speaker.jpeg). Live Example click here.
Background-repeat: If we use a small size of image then we can repeat the same image in horizontally or vertically for our requirement. It has 5 property values they are
      • Repeat
      • Repeat-x (for horizontal)
      • Repeat-y (for vertical)
      • no-repeat
      • inherit
You can use this property values and see the difference. Eg: background-repeat: repeat-x. Live Example click here.
Background-position: We can adjust the position of the background-image using this property. It has the following values.
click the above values to see the live demo.
Continue in part2.
Posted by at
Labels: , , , , , , , , , , , ,
Location: Chennai, Tamil Nadu, India

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)