http://schoolacademy.telerik.com<br />Introduction to Cascading Style Sheets (CSS)<br />Svetlin Nakov<br />Telerik Corpora...
Table of Contents<br />What is CSS?<br />Styling with Cascading Stylesheets (CSS)<br />Selectors and style definitions<br ...
CSS: A New Philosophy<br />Separate content from presentation!<br />3<br />Content <br />(HTML document)<br />Presentation...
 accumsan accumsan. Morbi at
 arcu vel elit ultricies porta. Proin</li></ul> tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec ...
The Resulting Page<br />4<br />Title<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut...
 accumsan accumsan. Morbi at
 arcu vel elit ultricies porta. Proin</li></ul>Tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec o...
CSS Intro<br />Styling with Cascading Stylesheets<br />
CSS Introduction<br />Cascading Style Sheets (CSS)<br />Markup language, used to describe the presentation of document<br ...
CSS Introduction (2)<br />CSS can be applied to any XML document<br />Not just to HTML / XHTML<br />CSS can specify differ...
Why “Cascading”?<br />Priority scheme determining which style rules apply to element<br />Cascade priorities or weights ar...
Why “Cascading”? (2)<br />9<br />
Style Sheets Syntax<br />CSS has simple syntax, based on English words<br />Contains a set of cascading rules<br />Each ru...
Style Sheets Syntax (2)<br />Selectors determine which element the rule applies to: <br />All elements of specific type<br...
Style Sheets Syntax (3)<br />Pseudo-classes define further behavior<br />Appended to a selector <br />:hover, :first-lette...
Style Sheets Syntax (4)<br />Three primary types of selectors:<br />By tag:<br />By element id:<br />By element class name...
Style Sheets Syntax (5)<br />Match relative to element placement:<br />This will match all <a> tags that are inside of <p>...
Style Sheets Syntax (5)<br />> selector – matches direct child nodes of element:<br />	This will match all elements with c...
Default Browser Styles<br />Browsers have default CSS styles<br />Used when there is no CSS information or any other style...
Linking HTML and CSS<br />HTML (content) and CSS (presentation) can be linked in three ways:<br />Inline: the CSS rules in...
Linking HTML and CSS (2)<br />Inline styles have highest priority<br />Then are the embedded styles<br />External styles a...
Inline Styles<br />Inline CSS styles<br />Individual element’s style defined using styleattribute<br />Contains only decla...
Inline Styles: Example<br />20<br />inline-styles.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
Inline Styles: Example<br />21<br />inline-styles.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
CSS Rules Precedence<br />Inline CSS rules have precedence over the external CSS rules:<br />22<br />precedence.html<br />...
CSS Rules Precedence<br />Inline CSS rules have precedence over the external CSS rules:<br />23<br />precedence.html<br />...
Embedded Styles<br />Embedded in the HTML in the <style> tag:<br />The <style> tag is placed in the <head> section of the ...
Embedded Styles: Example<br />25<br />embedded-stylesheets.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...
Embedded Styles: Example (2)<br />26<br />…<br /><body><br />  <h1 class="blue">A Heading</h1><br />  <p>Here is some text...
…<br /><body><br />  <h1 class="blue">A Heading</h1><br />  <p>Here is some text. Here is some text. Here<br />  is some t...
External CSS Styles<br />External linking<br />Separate pages can all use shared style sheet<br />Only modify a single fil...
External CSS Styles (2)<br />@import<br />Another way to link external CSS files<br />Example:<br />Not all browsers recog...
External Styles: Example<br />30<br />styles.css<br />/* CSS Document */<br />a 	  { text-decoration: none }<br />a:hover ...
External Styles: Example (2)<br />31<br />external-styles.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <br />  T...
External Styles: Example (3)<br />32<br />  …<br />  <li>Bread<br />    <ul><br />      <li>White bread</li><br />      <l...
  …<br />  <li>Bread<br />    <ul><br />      <li>White bread</li><br />      <li>Rye bread</li><br />      <li>Whole whea...
Values in the CSS Rules<br />Colors are specified in RGB format, in hex form: <br />Example: #A0A6AA<br />Predefined color...
CSS Rules for Fonts<br />color – specifies the color of the text<br />font-size – size of font: xx-small, x-small, small, ...
CSS Rules for Fonts (2)<br />font-style – styles the font<br />Values: normal, italic, oblique<br />text-decoration – deco...
Short Font Rules<br />font<br />Shorthand rule for setting multiple font properties at the same time<br />	is equal to wri...
Fonts<br />Live Demo<br />font-rules.html<br />
Background CSS Rules<br />background-color<br />Solid color background<br />background-image<br />URL of image to be used ...
Background CSS Rules (2)<br />background-position: specifies vertical and horizontal position of the background image<br /...
Background Short Rule<br />background: shorthand rule for setting background properties at the same time:<br />	is equal t...
Background-image or <img>?<br />Background images allow you to save many image tags from the HTML <br />Leads to less code...
Background Styles<br />Live Demo<br />background-rules.html<br />
Border CSS Rules<br />border-width: thin, medium, thick or numerical value (e.g. 10px)<br />border-color: color alias or R...
Border Short Rules<br />border: shorthand rule for setting border properties at once:<br />	is equal to writing:<br />Spec...
Borders<br />Live Demo<br />border-rules.html<br />
Width, Height CSS Rules<br />width – defines numerical value for the width of element, e.g. 200px<br />height – defines nu...
Width / Height<br />Live Demo<br />size-rules.html<br />
Margin and Padding<br />margin and padding define the spacing around the element<br />Numerical value, e.g. 10px or -5px<b...
Margin and Padding: Short Rules<br />margin: 5px;<br />Sets all four sides to have margin of 5 px;<br />margin: 10px 20px;...
The Box Model<br />51<br />
Gecko and W3C vs. IE<br />Major difference between browsers when applying border, padding and width/height<br />To avoid y...
Margins and Paddings<br />Live Demo<br />margins-paddings-rules.html<br />
CSS Rules for Positioning<br />position: defines the positioning of the element, depending on the parent elements<br /> Th...
CSS Rules for Positioning (2)<br />Fixed and absolute positioned elements “float” over the rest of elements<br />Moved to ...
Positioning<br />Live Demo<br />positioning-rules.html<br />
CSS Rules for Positioning<br />top, left, bottom, right: specifies offset of absolute/fixed/relative positioned element as...
Alignment and Z-Index<br />Live Demo<br />alignments-and-z-index-rules.html<br />
Float CSS Rule<br />float: the element “floats” above the elements<br />similar to position:absolute and the align HTML pr...
Clear CSS Rule<br />clear<br />Sets the sides of the element where other floating elements are NOT allowed<br />Possible v...
Floating Elements<br />Live Demo<br />float-rules.html<br />
Opacity CSS Rule<br />opacity: specifies the opacity of the element<br />Floating point number from 0 to 1<br />Supported ...
Opacity<br />Live Demo<br />opacity-rule.html<br />
Visibility CSS Rule<br />visibility<br />Determines whether the element is visible<br />hidden: element is not rendered, b...
Visibility<br />Live Demo<br />visibility-rule.html<br />
Display CSS Rule<br />display: controls the display of the element and the way it is rendered and if breaks should be plac...
Display CSS Rule (2)<br />none: element is hidden and its dimensions are not used to calculate the surrounding elements re...
Display<br />Live Demo<br />display-rule.html<br />
Overflow CSS Rule<br />overflow: defines the behavior of element when content needs more space than you have specified by ...
Overflow<br />Live Demo<br />overflow-rule.html<br />
Other CSS Rules<br />cursor:  specifies the look of the mouse cursor when placed over the element<br /> Values: crosshair,...
Benefits of using CSS<br />More powerful formatting than using presentation tags<br />Your pages load faster, because brow...
Maintenance Example<br />73<br />Title<br />Some random text here.  You can’t read it anyway!  Harharhar!  Use Css.<br />T...
What to Avoid<br />Don’t use <font> or other presentation tags to change the look of your text<br /><font color=...><br />...
Upcoming SlideShare
Loading in...5
×

CSS

2,726

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,726
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
143
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "CSS"

  1. 1. http://schoolacademy.telerik.com<br />Introduction to Cascading Style Sheets (CSS)<br />Svetlin Nakov<br />Telerik Corporation<br />www.telerik.com<br />
  2. 2. Table of Contents<br />What is CSS?<br />Styling with Cascading Stylesheets (CSS)<br />Selectors and style definitions<br />Linking HTML and CSS<br />Fonts, Backgrounds, Borders<br />The Box Model in W3C and IE<br />Alignment, Z-Index, Margin, Padding<br />Positioning and Floating Elements<br />Visibility, Display, Overflow<br />2<br />
  3. 3. CSS: A New Philosophy<br />Separate content from presentation!<br />3<br />Content <br />(HTML document)<br />Presentation<br />(CSS Document)<br />Title<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.<br /><ul><li> Vestibulum et odio et ipsum
  4. 4. accumsan accumsan. Morbi at
  5. 5. arcu vel elit ultricies porta. Proin</li></ul> tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus. <br />Bold<br />Italics<br />Indent<br />
  6. 6. The Resulting Page<br />4<br />Title<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.<br /><ul><li>Vestibulum et odio et ipsum
  7. 7. accumsan accumsan. Morbi at
  8. 8. arcu vel elit ultricies porta. Proin</li></ul>Tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus. <br />
  9. 9. CSS Intro<br />Styling with Cascading Stylesheets<br />
  10. 10. CSS Introduction<br />Cascading Style Sheets (CSS)<br />Markup language, used to describe the presentation of document<br />Defines sizes, fonts, colors, layout, etc.<br />Improves content accessibility<br />Improves flexibility<br />Designed to separate presentation from content<br />Because of CSS all HTML presentation tags are deprecated, e.g. <font>, <center>, <b> etc.<br />6<br />
  11. 11. CSS Introduction (2)<br />CSS can be applied to any XML document<br />Not just to HTML / XHTML<br />CSS can specify different styles for different rendering methods<br />On-screen<br />In print<br />Etc.<br />… even by voice or Braille-based reader<br />7<br />
  12. 12. Why “Cascading”?<br />Priority scheme determining which style rules apply to element<br />Cascade priorities or weights are calculated and assigned to the rules<br />Child elements in the HTML DOM tree inherit the styles from their parent<br />Can override them<br />Control via !important rule<br />8<br />
  13. 13. Why “Cascading”? (2)<br />9<br />
  14. 14. Style Sheets Syntax<br />CSS has simple syntax, based on English words<br />Contains a set of cascading rules<br />Each rule consists of one or more selectors and declaration block<br />Declaration block consists of one or more semicolon-terminated declarations in curly braces<br />Declaration consists of property, a colon and value<br />10<br />h1,h2,h3,h4,h5,h6 { color: green }<br />
  15. 15. Style Sheets Syntax (2)<br />Selectors determine which element the rule applies to: <br />All elements of specific type<br />Those that mach specific attribute<br />Elements may be matched depending on how they are nested in the document (HTML)<br />Examples:<br />11<br />h1 .title { color: green }<br />#menu li { padding-top: 8px }<br />
  16. 16. Style Sheets Syntax (3)<br />Pseudo-classes define further behavior<br />Appended to a selector <br />:hover, :first-letter, :visited, :active, :before, :after<br />Not all browsers support them fully<br />12<br />a:link {text-decoration: none}a:visited {text-decoration: none}a:active {text-decoration: none}a:hover {text-decoration: underline; color: red}<br />.title:before { content: "»" }<br />.title:after { content: "«" }<br />
  17. 17. Style Sheets Syntax (4)<br />Three primary types of selectors:<br />By tag:<br />By element id:<br />By element class name (only for HTML): <br />Selectors can be combined with commas:<br />This will match <h1> tags, elements with class link and element with id top-link<br />13<br />h1 {font-face: Verdana}<br />#element_id {color:#FF0000}<br />.class_name {border: 1px solid red}<br />h1, .link, #top-link {font-weight: bold}<br />
  18. 18. Style Sheets Syntax (5)<br />Match relative to element placement:<br />This will match all <a> tags that are inside of <p><br />* – universal selector:<br />This will match all child nodes of <p> tag<br />+ selector – used to match “the following” tag:<br /> This will match all elements with class name link that appear immediately after <img> tag<br />14<br />p a {text-decoration: underline}<br />p * {color: black}<br />img + .link {float:right}<br />
  19. 19. Style Sheets Syntax (5)<br />> selector – matches direct child nodes of element:<br /> This will match all elements with class error, direct children of <p> tag<br />[] – match tag attributes by regular expression:<br />This will match all <img> tags with alt attribute containing the word logo<br />There are more rules to select attributes<br />Not well supported in all browsers<br />15<br />p > .error {font-size: 8px}<br />img[alt~=logo] {border: none}<br />
  20. 20. Default Browser Styles<br />Browsers have default CSS styles<br />Used when there is no CSS information or any other style information in the document<br />Silently inherited in all documents<br />Caution: default styles differ in browsers<br />E.g. Firefox default page background is white, while IE7 uses about 5% gray background<br />16<br />
  21. 21. Linking HTML and CSS<br />HTML (content) and CSS (presentation) can be linked in three ways:<br />Inline: the CSS rules in the style attribute<br />No selectors are needed<br />Embedded: in the HTML in <style> tag<br />External: CSS rules are in separate file <br />Usually a file with .css extension<br />Linked via <linkrel="stylesheet"href=…>tag or @import directive in embedded CSS block<br />17<br />
  22. 22. Linking HTML and CSS (2)<br />Inline styles have highest priority<br />Then are the embedded styles<br />External styles are last<br />Using external files is highly recommended<br />Simplify the HTML document <br />Benefit from browser's cache<br />Inline styles are about to be deprecated by the W3C<br />18<br />
  23. 23. Inline Styles<br />Inline CSS styles<br />Individual element’s style defined using styleattribute<br />Contains only declaration, no selectors:<br />Override any other styles<br />Apply to all descendant elements<br />Used for styles that are not needed anywhere else in the Web site<br />19<br /><p style="font-size:20pt; color: #0000FF"><br />
  24. 24. Inline Styles: Example<br />20<br />inline-styles.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Inline Styles</title><br /></head><br /><body><br /> <p>Here is some text</p><br /><!--Separate multiple styles with a semicolon--><br /> <p style="font-size: 20pt">Here is some<br /> more text</p><br /> <p style="font-size: 20pt;color:<br /> #0000FF" >Even more text</p> <br /></body><br /></html><br />
  25. 25. Inline Styles: Example<br />21<br />inline-styles.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Inline Styles</title><br /></head><br /><body><br /> <p>Here is some text</p><br /><!--Separate multiple styles with a semicolon--><br /> <p style="font-size: 20pt">Here is some<br /> more text</p><br /> <p style="font-size: 20pt;color:<br /> #0000FF" >Even more text</p> <br /></body><br /></html><br />
  26. 26. CSS Rules Precedence<br />Inline CSS rules have precedence over the external CSS rules:<br />22<br />precedence.html<br /><!DOCTYPE html …><br /><html xmlns="http://www.w3.org/1999/xhtml" ><br /><head><br /> <title>CSS Rules Precedence - Example</title><br /> <style type="text/css"> span {color:red} </style><br /> <link type="text/css" rel="stylesheet" href="" /><br /></head><br /><body><br /> <span>Some text</span><br /> <span style="color:Blue">Some text</span><br /></body><br /></html><br />
  27. 27. CSS Rules Precedence<br />Inline CSS rules have precedence over the external CSS rules:<br />23<br />precedence.html<br /><!DOCTYPE html …><br /><html xmlns="http://www.w3.org/1999/xhtml" ><br /><head><br /> <title>CSS Rules Precedence - Example</title><br /> <style type="text/css"> span {color:red} </style><br /> <link type="text/css" rel="stylesheet" href="" /><br /></head><br /><body><br /> <span>Some text</span><br /> <span style="color:Blue">Some text</span><br /></body><br /></html><br />
  28. 28. Embedded Styles<br />Embedded in the HTML in the <style> tag:<br />The <style> tag is placed in the <head> section of the document<br />Styles apply to the whole document<br />type attribute specifies the MIME type<br />MIME is a describes the format of the content<br />Other MIME types include text/html, image/gif, text/javascript …<br />Used for document-specific styles<br />24<br /><style type="text/css"><br />
  29. 29. Embedded Styles: Example<br />25<br />embedded-stylesheets.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Style Sheets</title><br /> <style type="text/css"><br /> em {background-color:#8000FF; color:white}<br /> h1 {font-family:Arial, sans-serif}<br /> p {font-size:18pt}<br /> .blue {color:blue}<br /> </style><br /><head><br />
  30. 30. Embedded Styles: Example (2)<br />26<br />…<br /><body><br /> <h1 class="blue">A Heading</h1><br /> <p>Here is some text. Here is some text. Here<br /> is some text. Here is some text. Here is some<br /> text.</p> <br /> <h1>Another Heading</h1> <br /> <p class="blue">Here is some more text.<br /> Here is some more text.</p><br /> <p class="blue">Here is some <em>more</em><br /> text. Here is some more text.</p> <br /></body><br /></html><br />
  31. 31. …<br /><body><br /> <h1 class="blue">A Heading</h1><br /> <p>Here is some text. Here is some text. Here<br /> is some text. Here is some text. Here is some<br /> text.</p> <br /> <h1>Another Heading</h1> <br /> <p class="blue">Here is some more text.<br /> Here is some more text.</p><br /> <p class="blue">Here is some <em>more</em><br /> text. Here is some more text.</p> <br /></body><br /></html><br />Embedded Styles: Example (3)<br />27<br />
  32. 32. External CSS Styles<br />External linking<br />Separate pages can all use shared style sheet<br />Only modify a single file to change the styles across your entire Web site<br />link tag (with rel attribute)<br />Specifies a relationship between current document and another document<br />link element can stay only in the HTML header<br />28<br /><link rel="stylesheet" type="text/css"<br /> href="styles.css"><br />
  33. 33. External CSS Styles (2)<br />@import<br />Another way to link external CSS files<br />Example:<br />Not all browsers recognize such rules<br />You can specify this way browser-specific styles (IE6 ignores the @import)<br />29<br /><style type="text/css"><br /> @import url(styles.css);<br /></style><br />
  34. 34. External Styles: Example<br />30<br />styles.css<br />/* CSS Document */<br />a { text-decoration: none }<br />a:hover { text-decoration: underline;<br /> color: red;<br /> background-color: #CCFFCC }<br />li em { color: red; <br /> font-weight: bold }<br />ul { margin-left: 2cm }<br />ul ul { text-decoration: underline; <br /> margin-left: .5cm }<br />
  35. 35. External Styles: Example (2)<br />31<br />external-styles.html<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <br /> Transitional//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Importing style sheets</title><br /> <link type="text/css" rel="stylesheet"<br /> href="styles.css" /><br /></head><br /><body><br /> <h1>Shopping list for <em>Monday</em>:</h1><br /> <li>Milk</li><br /> …<br />
  36. 36. External Styles: Example (3)<br />32<br /> …<br /> <li>Bread<br /> <ul><br /> <li>White bread</li><br /> <li>Rye bread</li><br /> <li>Whole wheat bread</li><br /> </ul><br /> </li><br /> <li>Rice</li><br /> <li>Potatoes</li><br /> <li>Pizza <em>with mushrooms</em></li><br /></ul><br /><a href="http://food.com" title="grocery<br /> store">Go to the Grocery store</a><br /></body><br /></html><br />
  37. 37. …<br /> <li>Bread<br /> <ul><br /> <li>White bread</li><br /> <li>Rye bread</li><br /> <li>Whole wheat bread</li><br /> </ul><br /> </li><br /> <li>Rice</li><br /> <li>Potatoes</li><br /> <li>Pizza <em>with mushrooms</em></li><br /></ul><br /><a href="http://food.com" title="grocery<br /> store">Go to the Grocery store</a><br /></body><br /></html><br />External Styles: Example (4)<br />33<br />
  38. 38. Values in the CSS Rules<br />Colors are specified in RGB format, in hex form: <br />Example: #A0A6AA<br />Predefined color aliases exist: black, blue, etc.<br />Numeric values are specified in:<br />Pixels, e.g. 12px<br />Points, e.g. 10pt<br />Inches, centimeters, millimeters<br />E.g. 1in, 1cm, 1mm<br />Percentages, e.g. 50%<br />Percentage is relative to the parent element<br />34<br />
  39. 39. CSS Rules for Fonts<br />color – specifies the color of the text<br />font-size – size of font: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger or numeric value<br />font-family – comma separated font names<br />Example: Verdana, Sans-Serif, etc. <br />The browser loads the first one that is available<br />There should always be at least one serif font<br />font-weight –normal, bold, bolder, lighter or number in range [100…900]<br />35<br />
  40. 40. CSS Rules for Fonts (2)<br />font-style – styles the font<br />Values: normal, italic, oblique<br />text-decoration – decorates the text<br />Values: none, underline, line-trough, overline, blink<br />text-align – defines the alignment of text or other content<br />Values: left, right, center, justify<br />36<br />
  41. 41. Short Font Rules<br />font<br />Shorthand rule for setting multiple font properties at the same time<br /> is equal to writing this:<br />37<br />font: italic normal bold 12px Verdana;<br />font-style: italic;<br />font-variant: normal;<br />font-weight: bold;<br />font-size:12px;<br />font-family: Verdana;<br />
  42. 42. Fonts<br />Live Demo<br />font-rules.html<br />
  43. 43. Background CSS Rules<br />background-color<br />Solid color background<br />background-image<br />URL of image to be used as background, e.g.:<br />background-repeat<br />repeat-x, repeat-y, repeat, no-repeat<br />background-attachment<br />fixed / scroll<br />39<br />background-image:url("back.gif");<br />
  44. 44. Background CSS Rules (2)<br />background-position: specifies vertical and horizontal position of the background image<br />Vertical position: top, center, bottom<br />Horizontal position: left, center, right<br />Both can be specified in percentage or other numerical values<br />Examples:<br />40<br />background-position: top left;<br />background-position: -5px 50%;<br />
  45. 45. Background Short Rule<br />background: shorthand rule for setting background properties at the same time:<br /> is equal to writing:<br />Some browsers will not apply BOTH color and image for background if using shorthand rule<br />41<br />background: #FFF0C0 url("back.gif") no-repeat fixed top;<br />background-color: #FFF0C0;<br />background-image: url("back.gif");<br />background-repeat: no-repeat;<br />background-attachment: fixed;<br />background-position: top;<br />
  46. 46. Background-image or <img>?<br />Background images allow you to save many image tags from the HTML <br />Leads to less code<br />More content-oriented approach<br />All images that are not part of the page content should be moved to the CSS<br />42<br />
  47. 47. Background Styles<br />Live Demo<br />background-rules.html<br />
  48. 48. Border CSS Rules<br />border-width: thin, medium, thick or numerical value (e.g. 10px)<br />border-color: color alias or RGB value<br />border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset<br />Each property can be defined separately for left, top, bottom and right<br />border-top-style, border-left-color, …<br />44<br />
  49. 49. Border Short Rules<br />border: shorthand rule for setting border properties at once:<br /> is equal to writing:<br />Specify different borders for the sides via shorthand rules: border-top, border-left, border-right, border-bottom<br />45<br />border: 1px solid red;<br />border-width:1px;<br />border-color:red;<br />border-style:solid;<br />
  50. 50. Borders<br />Live Demo<br />border-rules.html<br />
  51. 51. Width, Height CSS Rules<br />width – defines numerical value for the width of element, e.g. 200px<br />height – defines numerical value for the height of element, e.g. 100px<br />Important: not all elements and browsers follow this value!<br />Usually the height of an element is defined by its content<br />Common mistake is to apply height to tables or table cells<br />47<br />
  52. 52. Width / Height<br />Live Demo<br />size-rules.html<br />
  53. 53. Margin and Padding<br />margin and padding define the spacing around the element<br />Numerical value, e.g. 10px or -5px<br />Can be defined for each of the four sides separately<br />margin-top, padding-left, …<br />margin is the spacing outside of the border<br />padding is the spacing between the border and the content<br />49<br />
  54. 54. Margin and Padding: Short Rules<br />margin: 5px;<br />Sets all four sides to have margin of 5 px;<br />margin: 10px 20px;<br />Sets margins: top and bottom to 10px, left and right to 20px;<br />margin: 1px 3px 5px 7px;<br />Sets top, right, bottom, left margins to 1px, 3px, 5px and 7px respectively<br />Same shorthand rules apply for padding<br />50<br />
  55. 55. The Box Model<br />51<br />
  56. 56. Gecko and W3C vs. IE<br />Major difference between browsers when applying border, padding and width/height<br />To avoid you need either “CSS hacks” or just don’t specify for the same element width/height and padding or border, different than 0<br />52<br />
  57. 57. Margins and Paddings<br />Live Demo<br />margins-paddings-rules.html<br />
  58. 58. CSS Rules for Positioning<br />position: defines the positioning of the element, depending on the parent elements<br /> The value is one of:<br />static (default)<br />relative – relative position according to where the element would appear with static position<br />absolute – position according the parent element<br />fixed – fix element on screen, ignore page scrolling<br />54<br />
  59. 59. CSS Rules for Positioning (2)<br />Fixed and absolute positioned elements “float” over the rest of elements<br />Moved to separate document layer<br />Their position and size is ignored when calculating the size of parent element or position of surrounding elements<br />Ordered by their z-index<br />55<br />
  60. 60. Positioning<br />Live Demo<br />positioning-rules.html<br />
  61. 61. CSS Rules for Positioning<br />top, left, bottom, right: specifies offset of absolute/fixed/relative positioned element as numerical values<br />vertical-align: sets the vertical-alignment of an element<br />Usually used for table cells<br />Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom or numeric<br />z-index: specifies the depth-order of element<br />57<br />
  62. 62. Alignment and Z-Index<br />Live Demo<br />alignments-and-z-index-rules.html<br />
  63. 63. Float CSS Rule<br />float: the element “floats” above the elements<br />similar to position:absolute and the align HTML property of <img> tag <br />element is taken into account when rendering the surrounding text and elements<br />left: places the element on the left<br />right: places the element on the right<br />59<br />
  64. 64. Clear CSS Rule<br />clear<br />Sets the sides of the element where other floating elements are NOT allowed<br />Possible values: left, right, both<br />This rule can be applied only to “floating” elements<br />60<br />
  65. 65. Floating Elements<br />Live Demo<br />float-rules.html<br />
  66. 66. Opacity CSS Rule<br />opacity: specifies the opacity of the element<br />Floating point number from 0 to 1<br />Supported only by Safari browser <br />For Mozilla use –moz-opacity CSS rule<br />For IE use filter:alpha(opacity=value) where value is from 0 to 100<br />Need to apply all three rules<br />62<br />
  67. 67. Opacity<br />Live Demo<br />opacity-rule.html<br />
  68. 68. Visibility CSS Rule<br />visibility<br />Determines whether the element is visible<br />hidden: element is not rendered, but still takes place in the rendering (acts like opacity:0)<br />visible: element is rendered normally<br />64<br />
  69. 69. Visibility<br />Live Demo<br />visibility-rule.html<br />
  70. 70. Display CSS Rule<br />display: controls the display of the element and the way it is rendered and if breaks should be placed before and after the element<br />inline: no breaks are placed before and after (<span> is inline element)<br />block: breaks are placed before AND after the element (<div> is block element)<br />66<br />
  71. 71. Display CSS Rule (2)<br />none: element is hidden and its dimensions are not used to calculate the surrounding elements rendering (differs from visibility:hidden!)<br />There are some more possible values, but not all browsers support them<br />Specific displays like table-cell and table-row<br />67<br />
  72. 72. Display<br />Live Demo<br />display-rule.html<br />
  73. 73. Overflow CSS Rule<br />overflow: defines the behavior of element when content needs more space than you have specified by the size properties or for other reasons. Values: <br />visible (default) – element size is increased to make space for content or the content “overflows” out of the element<br />scroll – show horizontal/vertical scroll bar in the element<br />hidden – any content in the element that cannot be placed inside is hidden<br />69<br />
  74. 74. Overflow<br />Live Demo<br />overflow-rule.html<br />
  75. 75. Other CSS Rules<br />cursor: specifies the look of the mouse cursor when placed over the element<br /> Values: crosshair, help, pointer, progress, move, hair, col-resize, row-resize, text, wait, copy, drop, and others<br />white-space – controls the line breaking of text. Value is one of:<br />nowrap – keeps the text on one line<br />normal (default) – browser decides whether to brake the lines if needed<br />71<br />
  76. 76. Benefits of using CSS<br />More powerful formatting than using presentation tags<br />Your pages load faster, because browsers cache the .css files<br />Increased accessibility, because rules can be defined according given media<br />Pages are easier to maintain and update<br />72<br />
  77. 77. Maintenance Example<br />73<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />one CSS file<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />Title<br />Some random text here. You can’t read it anyway! Harharhar! Use Css.<br />
  78. 78. What to Avoid<br />Don’t use <font> or other presentation tags to change the look of your text<br /><font color=...><br /><b>text that is bold<br /><center> this text is centered<br />Do not use complex CSS rules-sets because may slow down page rendering<br />Move as much as possible to external files<br />Avoid inline CSS<br />74<br />
  79. 79. CSS Development Tools<br />Visual Studio – CSS Editor<br />75<br />
  80. 80. CSS Development Tools (2)<br />Firebug – add-on to Firefox used to examine and adjust CSS and HTML<br />76<br />
  81. 81. CSS Development Tools (3)<br />IE Developer Toolbar – add-on to IE used to examine CSS and HTML (press [F12])<br />77<br />
  82. 82. CSS<br />?<br />?<br />?<br />?<br />?<br />Questions?<br />?<br />?<br />?<br />?<br />?<br />http://schoolacademy.telerik.com<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×