An Introduction to Cascading Style Sheets (CSS3)

2,917 views
2,740 views

Published on

An Introduction to Cascading Style Sheets (CSS3).
Slide in English.

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

No Downloads
Views
Total views
2,917
On SlideShare
0
From Embeds
0
Number of Embeds
1,250
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Nearest Tagalog counterpart: patong-patong Overlapping windows metaphor
  • An Introduction to Cascading Style Sheets (CSS3)

    1. 1. Cascading Style Sheets (CSS3) IT 107 Mr. Ardee Aram Lecturer Treston International College
    2. 2. What is CSS? Cascading Style Sheets (CSS) form the presentation layer of the user interface. Structure (HTML5) Behavior (Javascript) Presentation (CSS) Tells the browser agent how the element is to be presented to the user.
    3. 3. Why CSS? ● CSS removes the presentation attributes from the structure allowing reusability, ease of maintainability, and an interchangeable presentation layer.
    4. 4. Why CSS? ● HTML was never meant to be a presentation language. Proprietary vendors have created tags to add presentation to structure. <font> <b> <i> <center>
    5. 5. Why CSS? ● CSS allows us to make global and instantaneous changes easily.
    6. 6. The Cascade ● The process of combining several style sheets and resolving conflicts between them
    7. 7. The Cascade ● The power of CSS is found in the “cascade” which is the combination of the browser’s default styles, external style sheets, embedded, inline, and even user-defined styles. ● The cascade sets priorities on the individual styles which effects inheritance.
    8. 8. CSS Inheritance ● Unless a more specific style is set on a child element, the element looks to the parent element for its styles. <div id=“make_me_green“> <ul> <li>First item</li> <li>Second item</li> </ul> </div> If I make this green... This becomes green as well! (Unless another rule specifically targets the "li")
    9. 9. CSS Inheritance ● Helpful in reducing the amount of CSS to set styles for child elements.
    10. 10. Using stylesheets External Style Sheet <link href=“stylesheet” type=“text/css” href=“location.css” /> Preferred method. In our class, the ONLY method. You will get this better if you are creating large web applications of several hundred thousand lines of code, and styles are everywhere. DISCIPLINE!
    11. 11. Using stylesheets Embedded Styles <style type=“text/css”> body {} </style> Inline Styles <p style=“font-size: 12px”>Lorem ipsum</p>
    12. 12. Syntax selector { property1: value1; property2: value2; } The selector selects which part of the hypertext document a style applies to. The selector can either be an HTML element tag, an identifier, a class, or a combination of these three.
    13. 13. Syntax selector { property1: value1; property2: value2; } A declaration is combination of CSS property and its corresponding value. These properties affect how a part of the HTML document looks like.
    14. 14. Syntax selector { property1: value1; property2: value2; } A set of declarations associated to a single selector is called the declaration block
    15. 15. Syntax selector { property1: value1; property2: value2; } The combination of the selector and the declaration block is called a rule.
    16. 16. Type (Element) Selector Specify the style(s) for a single HTML element. p { margin: 0; padding: 0; border-top: 1px solid #ff0; }
    17. 17. The Class Selector <p class=“intro”> This is my introduction text </p> .intro { font-size: 12px; font-family: verdana, sans-serif; margin: 10px; }
    18. 18. The Identifier Selector <p id=“intro”> This is my introduction text</p> #intro { border-bottom: 2px dashed #fff; }
    19. 19. Identifier vs. Class Identifier or class? What’s the difference? An identifier is specified only once on a page and has a higher inheritance specificity (“priority”) than a class. A class is reusable as many times as needed in a page.
    20. 20. Combination of selectors ● An element, identifier, and class selector can be combined to select a more specific element p#intro { color: red; } <p> Hello, world. </p> <p id="intro”> Hello, world. </p>
    21. 21. Combination of selectors ● An element, identifier, and class selector can be combined to select a more specific element p#intro.impt { color: red; } <p id="intro"> Hello, world. </p> <p id="intro” class="impt"> Hello, world. </p> <p> Hello, world. </p>
    22. 22. Multiple Selectors ● Several selectors can have the same declarations by combining them with a comma. p#intro.impt, h1.header { color: red; } <p id="intro" class="impt"> Hello, world. </p> <h1 class="header"> Hello, world. </h1>
    23. 23. Multiple Selectors h1,h2,h3,div.important { color: red; }
    24. 24. Tag Relationships <!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <header> </header> <div id="content"> <h1>Hey there</h1> </div> <footer> </footer> </body> </html>
    25. 25. Tag Relationships html head body title header div footer h1 node
    26. 26. Tag Relationships html head body title header div footer h1 parent child
    27. 27. Tag Relationships html head body title header div footer h1 parent child
    28. 28. Tag Relationships html head body title header div footer h1 descendants parent
    29. 29. Tag Relationships html head body title header div footer h1 ancestors node
    30. 30. Descendant Selectors header p{ color: red; } <p> Hello, world. </p> <header> <p> Hello, world. </p> </header>
    31. 31. Descendant Selectors header p{ color: red; } ● Note: only p is color red. header (the parent) is not affected. <header> <p> Hello, world. </p> </header>
    32. 32. Descendant Selectors ● Not only direct descendants, but also indirect descendants header p{ color: red; } <header> <div> <p> Hello, world. </p> </div> </header>
    33. 33. Descendant Selectors header p.impt{ color: red; } <header> <p> Hello, world. </p> </header> <header> <p class="impt"> Hello, world. </p> </header>
    34. 34. Adjacent Sibling Selectors h2+p { color: red; } <h2>Heading</h2> <p>The selector above matches this paragraph.</p> <p>The selector above does not match this paragraph.</p> Note: it does NOT match the second <p> because it is NOT adjacent to h2 (although it is a sibling
    35. 35. Child selector header > p{ color: red; } <header> <p> Hello, world. </p> </header>
    36. 36. Child selector header > p{ color: red; } <header> <div> <p> Hello, world. </p> </div> </header>
    37. 37. Universal selector * { color: red; } Makes any tag red ● Matches any one (and only one) selector
    38. 38. Universal selector div * em { color: red; } <div> <h1> The <em>Universal</em> Selector </h1> <p>We must <em>emphasize</em> the following:</p> <ul> <li>It's <em>not</em> a wildcard.</li> <li>It matches elements regardless of <em>type</em>.</li> </ul> This is an <em>immediate</em> child of the division. </div> div * em { color: red; } div h1 em div p em div ul em div li em Nope :(
    39. 39. Attribute selector input[type="password"] { color: red; } <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" value="Log-in" />
    40. 40. Attribute selector ● *= attribute contains certain value somewhere div[id*="at"] { color: red; } <div id="great"></div> <div id="cattle"></div> <div id="attack"></div> <div id="feet"></div>
    41. 41. Attribute selector ● ^= attribute begins with certain value div[id^="at"] { color: red; } <div id="great"></div> <div id="cattle"></div> <div id="attack"></div> <div id="feet"></div>
    42. 42. Attribute selector ● $= attribute ends with certain value div[id$="at"] { color: red; } <div id="great"></div> <div id="cattle"></div> <div id="attack"></div> <div id="feet"></div>
    43. 43. Attribute selector ● ~= attribute is within space separated list div[rel~="red"] { color: red; } <div rel="blue red green"></div> <div rel="violet infrared"></div> <div rel="ultraviolet red"></div> <div rel="reddish"></div>
    44. 44. Attribute selector ● |= attribute is within dash separated list div[rel|="red"] { color: red; } <div rel="blue red green"></div> <div rel="blue-red-green"></div> <div rel="violet-infrared"></div> <div rel="ultraviolet-red"></div> <div rel="reddish"></div>
    45. 45. Multiple attribute selector a[href*="google"][rel="outside"] { color: red; } <a href="http://yahoo.com" rel="outside">Click here</a> <a href="http://google.com" rel="outside">Click here</a> <a href="http://google.com">Click here</a>
    46. 46. Pseudo-class selector a:link { color: black; text-decoration:none; } a:hover { color: red; text-decoration:underline; } a:active { color: blue; text-decoration:underline; } a:visited { color: green; text-decoration:none; } LOVE-HATE
    47. 47. The Cascade ● How do you know which rules take effect if multiple rules target the same element? ● Rule #1: element < .class < #id
    48. 48. The Cascade ● Rule #2: Count the number of elements, class, and identifier in the selector. The most number of identifier wins. If tie, the most number of classes wins. If tie again, the most number of elements wins. If it is still a tie, the rule that has been declared last wins.
    49. 49. The Cascade <div id="kangkong" class="talong"> <div class="pechay"> <p class="upo">Hello</p> </div> </div> div > div p { color: red; } div.talong .pechay p.upo { color: blue; } #kangkong .upo { color: green; } div#kangkong div p { color: pink; } ?
    50. 50. The Cascade <div id="kangkong" class="talong"> <div class="pechay"> <p class="upo">Hello</p> </div> </div> div > div p { color: red; } div.talong .pechay p.upo { color: blue; } #kangkong .upo { color: green; } div#kangkong div p { color: pink; } id – 0 class – 0 element - 3 id – 0 class – 3 element - 2 id – 1 class – 1 element - 0 id – 1 class – 0 element - 3
    51. 51. CSS Text ● color: red/green/#ff0000/... ● text-decoration: overline/line-through/underline/... ● text-transform: uppercase/lowercase/capitalize ● text-align: left/right/center
    52. 52. CSS Fonts ● font-family: arial, tahoma, sans-serif; ● font-weight: bold; ● font-style: italic; ● font-size: 18px;
    53. 53. CSS Display ● display: inline; Display as inline-level element Does not cause elements to be pushed downward to a new line. Width is as wide as the containing elements.
    54. 54. CSS Display This is a paragraph that contains <span class="impt">something very important,</span> and must be emphasized. ● display: inline; This is a paragraph that contains something very important, and must be emphasized. span.impt { font-weight: bold; color: red; display: inline; }
    55. 55. CSS Display ● display: block; Display as block-level element Causes elements to be pushed downward to a new line. Width gets 100% of the parent element.
    56. 56. CSS Display This is a paragraph that contains <span class="impt">something very important,</span> and must be emphasized. ● display: block; span.impt { font-weight: bold; color: red; display: block; } This is a paragraph that contains something very important, and must be emphasized.
    57. 57. Box Model Every element in the DOM (Document Object Model) has a conceptual “box” for presentation. The box consists of margin, padding, border, content (width, height), and offset (top, left)
    58. 58. Box Model
    59. 59. Box Model: Border ● border-width: 1px; ● border-style: solid/dashed/... ● border-color: #ffaeae; ● border-right-width: 3px; Shorthand: ● border: border-width border-style border- color; border: 1px solid green;
    60. 60. Box Model: Margin ● margin-top: 2px; ● margin-right: 2px; ● margin-bottom: 2px; ● margin-left: 2px; Shorthand: ● margin: margin-top margin-right margin-bottom margin-left;
    61. 61. Box Model: Margin ● How to center a block element .the_block { margin-left: auto; margin-right: auto; }
    62. 62. Box Model: Padding ● padding-top: 2px; ● padding-right: 2px; ● padding-bottom: 2px; ● padding-left: 2px; Shorthand: ● padding: padding-top padding-right padding- bottom padding-left;
    63. 63. Box Model ● width: 1024px; ● height: 40px; ● min-width: 300px; ● min-height: 300px;
    64. 64. CSS Background ● background-color: #aeaeae; ● background-image: url('picture.png'); ● background-position:; ● background-repeat: repeat-x/repeat-y/no-repeat;
    65. 65. Positioning ● position: static; – Default positioning – always positioned according to the normal flow of the page. – NOT affected by the top, bottom, left, and right properties.
    66. 66. Positioning ● position: relative; Moves the element relative to its original position ● left: 20px; ● top: 20px; Can also be ● right: 20px; ● bottom: 20px;
    67. 67. Positioning position: relative; top:20px; left:20px; top: 20px left: 20px
    68. 68. Positioning ● position: absolute; ● positioned relative to the first parent element that has a position other than static. (whut? Again) ● positioned relative to the first parent element that has a position other than static (e.g. relative or absolute).
    69. 69. Positioning position: relative; position: absolute; left: 0px; bottom: 0px; For absolute to work, there should be a relative, absolute, or fixed positioned element in the nodes ancestor. Coordinates are relative to that ancestor
    70. 70. Positioning ● position: fixed; ● An element with fixed position is positioned relative to the browser window. ● It will not move even if the window is scrolled.
    71. 71. Columns via Floats float: left; width: 250px; float: left; width: 250px; float: left; width: 250px; clear: both;
    72. 72. References ● Chris Poteet, 2007 ,Cascading Style Sheets (CSS), An Introduction, http://www.slideshare.net/cpoteet/introduction-to-cascading-s ● http://people.opera.com/howcome/2006/phd/#h-357 ● http://www.w3.org/TR/CSS21/syndata.html#q10 ● http://reference.sitepoint.com/css/adjacentsiblingselector ● http://reference.sitepoint.com/css/universalselector ● http://css-tricks.com/attribute-selectors/ ● http://css-tricks.com/pseudo-class-selectors/
    73. 73. References ● http://www.w3schools.com/css/css_positio ning.asp

    ×