CSS for Beginners


Published on

Basic introduction of css is covered in this presentation.

Published in: Business, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS for Beginners

  1. 1. by DHANESH.T.S CSS
  2. 2. What is Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. PUNE IT LABS
  3. 3. Advantages of CSS <ul><li>Completely consistent with the look and feel of your pages </li></ul><ul><li>More control over the layout and design </li></ul><ul><li>Pages download faster, sometimes by as much as 50% </li></ul><ul><li>You have to type less code, and your pages are shorter and neater. </li></ul><ul><li>CSS properties can also be dynamically changed with a JavaScript. </li></ul><ul><li>eg. object .style.cssFloat=&quot;left&quot; </li></ul>PUNE IT LABS
  4. 4. <ul><li>. With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY web design and there is nothing that can be done in tables that can not be done with CSS. </li></ul>PUNE IT LABS
  5. 5. There are three parts to CSS <ul><li>The styles </li></ul><ul><li>a blue headline </li></ul><ul><li>eg: <font color=&quot;#0000ff&quot;><h4>a blue headline</h4></font> </li></ul><ul><li>a blue headline </li></ul><ul><li>Their placement </li></ul><ul><li>The fact that they can cascade. </li></ul>PUNE IT LABS
  6. 6. <ul><li>Where HTML has tags, CSS has 'selectors'. </li></ul><ul><li>A Cascading Style Sheets rule is made up of a selector and a declaration. </li></ul><ul><li>H2 {color: blue;} </li></ul><ul><li>selector {declaration;} </li></ul><ul><li>The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. For example, &quot;color: blue&quot;. </li></ul><ul><li>Eg: body {      font-size: 12px;      color: navy; } </li></ul>PUNE IT LABS
  7. 7. <ul><li>A declaration has two parts separated by a colon: property and value. </li></ul><ul><li>selector {property:value} </li></ul><ul><li>More than one declaration may be placed inside the curly braces </li></ul><ul><li>A semi-colon must separate each declaration from the next. The ending declaration does not require a semi-colon </li></ul><ul><li>Eg. selector {property:value; property:value;} </li></ul><ul><li> H2 {color:blue; font-family:Arial, sans-serif;} </li></ul><ul><li>If you neglect to place a semi-colon between any two declarations your style sheet will totally fail. </li></ul><ul><li>H1 {font-family:Arial, Helvetica, sans-serif;} H2 {font-family:Arial, Helvetica, sans-serif;} H3 {font-family:Arial, Helvetica, sans-serif;} </li></ul><ul><li> H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;} </li></ul>PUNE IT LABS
  8. 8. <ul><li>In-line </li></ul><ul><li>Internal </li></ul><ul><li>External </li></ul>Applying CSS PUNE IT LABS
  9. 9. <ul><li><p style=&quot;color: red&quot;>Sample text</p> </li></ul>In-line <ul><li>HTML should be a presentation free document, and so in-line styles should be </li></ul><ul><li>avoided wherever possible. </li></ul>PUNE IT LABS
  10. 10. <ul><ul><ul><ul><li><html> <head> <title>CSS Example</title> <style type=&quot;text/css&quot;>     p {       color: red;       } </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>  a {           color: blue;       } </style> ....... </li></ul></ul></ul></ul></ul>Internal PUNE IT LABS
  11. 11. <ul><ul><ul><ul><li>p {      color: red; } </li></ul></ul></ul></ul><ul><ul><ul><ul><li>a {      color: blue; } </li></ul></ul></ul></ul><html> <head> <title>CSS Example</title>      <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;web.css&quot; /> ... External PUNE IT LABS
  12. 12. Lengths and Percentages <ul><li>There are specific units for values used in CSS, but there are some general units that are used in a number of properties </li></ul><ul><li>Such as- </li></ul><ul><li>em (such as font-size: 2em) </li></ul><ul><li>ex (one ex is the x-height of a font (x-height is usually about half the font-size) </li></ul><ul><li>px (such as font-size: 12px) pixels </li></ul><ul><li>pt (such as font-size: 12pt) point (1 pt is the same as 1/72 inch) </li></ul><ul><li>pc pica (1 pc is the same as 12 points) </li></ul><ul><li>% (such as font-size: 80%)percentage </li></ul><ul><li>Other units include cm (centimetres), mm (millimetres) and in (inches). </li></ul><ul><li>When a value is zero , you do not need to state a unit. </li></ul><ul><li>Eg: </li></ul><ul><li>border : 0 </li></ul>PUNE IT LABS
  13. 13. <ul><li>Different foms: </li></ul><ul><ul><li>Name of Colour </li></ul></ul><ul><ul><li>RGB </li></ul></ul><ul><ul><li>HEX code </li></ul></ul><ul><li>CSS brings 16 million colours to Web Page. </li></ul><ul><li>There are 17 valid predefined colour names. </li></ul><ul><li>They are - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. </li></ul>PUNE IT LABS
  14. 14. <ul><ul><ul><ul><ul><li>red </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>rgb(255,0,0) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>rgb(100%,0%,0%) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>#ff0000 </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>#f00 </li></ul></ul></ul></ul></ul><ul><ul><ul><li>transparent is also a valid value. </li></ul></ul></ul><ul><ul><ul><li>The three values in the rbg value are from 0 to 255. </li></ul></ul></ul><ul><ul><ul><li>Hexadecimal is a base-16 number system. hexadecimal has 16 digits, from 0 to f. </li></ul></ul></ul><ul><ul><ul><li>The hex number is prefixed with a hash character ( # ) and can be three or six digits in length. </li></ul></ul></ul><ul><ul><ul><li>Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). </li></ul></ul></ul>PUNE IT LABS
  15. 15. <ul><li>None : The element will not be displayed. </li></ul><ul><li>p {display : none} </li></ul><ul><li>Block : The element will be displayed as a block-level element, with a line break before and after the element. </li></ul><ul><li>p {display : block} </li></ul><ul><li>Inline : The element will be displayed as an inline element, with no line break before or after the element. </li></ul><ul><li>p {display : inline} </li></ul>PUNE IT LABS
  16. 16. Other display types <ul><li>ol </li></ul><ul><li>ul </li></ul>PUNE IT LABS
  17. 17. <ul><li>Static </li></ul><ul><li>Relative </li></ul><ul><li>Absolute </li></ul><ul><li>Fixed </li></ul>PUNE IT LABS
  18. 18. <ul><li>Static: The value static is the default value for elements and renders the position in the normal order of things as they appear in the html </li></ul><ul><li>Relative: It is much like static, but the element can be offset from its original position with the properties top , right , bottom and left . </li></ul><ul><li>Absolute: The absolute element can be placed anywhere on the page using top , right , bottom and left . </li></ul><ul><li>Fixed: It behaves like absolute, but fixed elements should stay exactly where they are on the screen even when the page is scrolled. </li></ul>PUNE IT LABS
  19. 19. <ul><li>Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. </li></ul><ul><li>Floating is normally used to position smaller elements within a page </li></ul><ul><li>Eg: </li></ul><ul><li>img { float: left } </li></ul>PUNE IT LABS
  20. 20. <ul><li>Clear: </li></ul><ul><li>The CSS clear property is used to for control flow when using the float property. Using CSS clear, you can specify whether to keep one or both sides of an element &quot;clear&quot; (i.e. no elements can appear on the side that is clear). </li></ul><ul><li>none - floating elements can appear on either side </li></ul><ul><li>left - floating elements can not appear on the left (i.e. keep the left side &quot;clear&quot;) </li></ul><ul><li>right - floating elements can not appear on the right (i.e. keep the right side &quot;clear&quot;) </li></ul><ul><li>both - floating elements can not appear on the left or right (i.e. keep both sides &quot;clear&quot;) </li></ul><ul><li>inherit </li></ul>PUNE IT LABS
  21. 21. <ul><li>Font-family </li></ul><ul><li>The font you specify must be on the user's computer, so there is little point in using obscure fonts. </li></ul><ul><li>The most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas . </li></ul><ul><li>If the name of the font is more than one word it should be put in quotation marks (“------“) </li></ul><ul><li>Font-size </li></ul><ul><li>The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings ( h1 , h2 etc.) </li></ul>PUNE IT LABS
  22. 22. <ul><li>Font-weight </li></ul><ul><li>This states whether the text is bold or not. </li></ul><ul><li>Commonly used are font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900 </li></ul><ul><li>Font-style </li></ul><ul><li>font-style: italic or </li></ul><ul><li>font-style: normal . </li></ul><ul><li>Text-decoration </li></ul><ul><li>This states whether the text is underlined or not. </li></ul><ul><li>text-decoration: overline </li></ul><ul><li>text-decoration: line-through , strike-through, </li></ul><ul><li>text-decoration: underline </li></ul><ul><li>( should only be used for links ) </li></ul><ul><li>This property is usually used to decorate links, such as specifying no underline with </li></ul><ul><li>text-decoration: none. </li></ul>PUNE IT LABS
  23. 23. <ul><li>text-transform </li></ul><ul><li>This will change the case of the text. </li></ul><ul><li>text-transform: capitalize </li></ul><ul><li>text-transform: uppercase </li></ul><ul><li>text-transform: lowercase </li></ul><ul><li>text-transform: none </li></ul><ul><li>Text spacing </li></ul><ul><li>letter-spacing and word-spacing </li></ul><ul><li>line-height </li></ul><ul><li>text-align </li></ul><ul><li>text-indent </li></ul><ul><li>Eg. </li></ul><ul><li> p {      letter-spacing: 2px;      word-spacing: 3px;      line-height: 4px;      text-align: center; } </li></ul>PUNE IT LABS
  24. 24. Margins and Padding <ul><li>Margins and Padding are the two most commonly used properties for spacing-out elements. </li></ul><ul><li>A margin is the space outside of the element, whereas padding is the space inside the element. </li></ul><ul><li>Eg: </li></ul><ul><li>h2 {     font-size: 10px;     background-color: #1F488D;     margin: 10px;     padding: 5px; } </li></ul>PUNE IT LABS
  25. 25. Padding <ul><li>padding can have: </li></ul><ul><ul><li>#sample { padding: 10px; } </li></ul></ul><ul><ul><li>#sample { padding: 10px 5px } </li></ul></ul><ul><ul><li>#sample { padding: 10px 5px 2px } </li></ul></ul><ul><ul><li>#sample { padding: 10px 5px 2px 5px } </li></ul></ul><ul><ul><li>one value, such as 10px, to specify equal padding on every side </li></ul></ul><ul><ul><li>two values, such as 10px 5px, to specify top/bottom (first value) and right/left (second value) padding </li></ul></ul><ul><ul><li>three values, such as 10px 5px 2px, to specify top (first value), right/left (second value) and bottom (third value) padding </li></ul></ul><ul><ul><li>four values, such as 10px 5px 2px 1px to specify top, right, bottom and left padding respectively </li></ul></ul>PUNE IT LABS
  26. 26. <ul><li>Borders can be applied to most HTML elements within the body. </li></ul><ul><li>border-style </li></ul><ul><li>The values can be solid , dotted , dashed , double , groove , ridge , inset and outset . </li></ul><ul><li>border-width </li></ul><ul><li>border-top-width , border-right-widht , border-bottom-width and border-left-width </li></ul><ul><li>border-color </li></ul><ul><li>Add the following code to the CSS file: </li></ul><ul><li>Eg. h2 {    border-style: dashed;      border-width: 3px;    border-left-width: 10px;     border-right-width: 10px;      border-color: red; } </li></ul>PUNE IT LABS
  27. 27. PUNE IT LABS by- DHANESH.T.S