O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Intro to css & sass

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Intro to SASS CSS
Intro to SASS CSS
Carregando em…3
×

Confira estes a seguir

1 de 212 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Intro to css & sass (20)

Mais recentes (20)

Anúncio

Intro to css & sass

  1. 1. An introduction to CSS & SASS
  2. 2. What is HTML?
  3. 3. • HTML stands for Hyper Text Markup Language What is HTML?
  4. 4. • HTML stands for Hyper Text Markup Language • HTML is a markup language What is HTML?
  5. 5. • HTML stands for Hyper Text Markup Language • HTML is a markup language • HTML documents contain HTML tags and plain text What is HTML?
  6. 6. What is HTML?
  7. 7. What is HTML?
  8. 8. What is CSS?
  9. 9. • CSS stands for Cascading Style Sheets What is CSS?
  10. 10. • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements What is CSS?
  11. 11. • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • CSS can solve many design problems without adding images or changing the HTML What is CSS?
  12. 12. What is CSS?
  13. 13. What is CSS?
  14. 14. CSS Syntax
  15. 15. CSS Syntax html Selector
  16. 16. CSS Syntax html Selector {margin:0; padding:0} Declaration Declaration
  17. 17. CSS Syntax html Selector PropertyProperty {margin:0; padding:0} Declaration Declaration
  18. 18. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration
  19. 19. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;}
  20. 20. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  21. 21. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  22. 22. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  23. 23. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  24. 24. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  25. 25. CSS Selectors
  26. 26. CSS Selectors • CSS selectors allow you to select and manipulate HTML element(s).
  27. 27. CSS Selectors • CSS selectors allow you to select and manipulate HTML element(s). • CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, and more.
  28. 28. Types of CSS Selectors
  29. 29. Types of CSS Selectors • The element Selector selects elements based on the element name. (e.g. body, header, p, footer)
  30. 30. Types of CSS Selectors • The element Selector selects elements based on the element name. (e.g. body, header, p, footer) • The id Selector selects a specific element on the page and can only be used once (e.g. #main, #content, #footer)
  31. 31. Types of CSS Selectors • The element Selector selects elements based on the element name. (e.g. body, header, p, footer) • The id Selector selects a specific element on the page and can only be used once (e.g. #main, #content, #footer) • The class Selector selects elements with the specific class names and cans be reused (e.g. .wrapper, .column, .panel, .panel-pane)
  32. 32. elements
  33. 33. ID’s elements
  34. 34. ID’s classes elements
  35. 35. Ways to use CSS • CSS can be attached to HTML in 3 ways • Inline (wysiwyg for example) • Embedded (wysiwyg for example) • Links CSS files (the preferred method)
  36. 36. Ways to use CSS
  37. 37. Ways to use CSS <p style=“color:red;”>Some Text</p> Inline Styles
  38. 38. Ways to use CSS <p style=“color:red;”>Some Text</p> Inline Styles Some Text Result
  39. 39. Ways to use CSS <p style=“color:red;”>Some Text</p> Inline Styles Some Text Result
  40. 40. Ways to use CSS
  41. 41. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles
  42. 42. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles Some Text Result
  43. 43. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles Some Text Result
  44. 44. Ways to use CSS
  45. 45. Ways to use CSS <head>! <link rel="stylesheet"
 type="text/css" href=“style.css">! </head> External Style Sheet reference
  46. 46. Ways to use CSS <head>! <link rel="stylesheet"
 type="text/css" href=“style.css">! </head> External Style Sheet reference p {color:red;} style.css
  47. 47. Ways to use CSS <head>! <link rel="stylesheet"
 type="text/css" href=“style.css">! </head> External Style Sheet reference Some Text Result p {color:red;} style.css
  48. 48. Ways to use CSS <head>! <link rel="stylesheet"
 type="text/css" href=“style.css">! </head> External Style Sheet reference Some Text Result p {color:red;} style.css
  49. 49. CSS Lists
  50. 50. CSS Lists • In HTML, there are two types of lists:
  51. 51. CSS Lists • In HTML, there are two types of lists: • unordered lists - the list items are marked with bullets
  52. 52. CSS Lists • 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
  53. 53. CSS Lists • 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 • Fusce cursus ante a sem egestas. • Maecenas at lectus vitae libero • Mauris lobortis enim vitae • scelerisque. • Aliquam adipiscing tellus unordered list
  54. 54. CSS Lists • 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 • Fusce cursus ante a sem egestas. • Maecenas at lectus vitae libero • Mauris lobortis enim vitae • scelerisque. • Aliquam adipiscing tellus unordered list 1. Fusce cursus ante a sem egestas. 2. Maecenas at lectus vitae libero 3. Mauris lobortis enim vitae 4. scelerisque. 5. Aliquam adipiscing tellus ordered list
  55. 55. CSS Margin
  56. 56. CSS Margin • Margin is the space around elements (outside the border).
  57. 57. CSS Margin • Margin is the space around elements (outside the border). • The margin does not have a background color, and is completely transparent.
  58. 58. CSS Margin • Margin is the space around elements (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.
  59. 59. CSS Margin
  60. 60. CSS Margin {margin:25px 50px 75px 100px;}
  61. 61. 25px 50px 75px 100px CSS Margin {margin:25px 50px 75px 100px;}
  62. 62. CSS Padding
  63. 63. CSS Padding • Padding is the space between the element border and the element content
  64. 64. CSS Padding • Padding is the space between the element border and the element content • The top, right, bottom, and left padding can be changed independently using separate properties.
  65. 65. CSS Padding
  66. 66. {padding:25px 50px 75px 100px;} CSS Padding
  67. 67. {padding:25px 50px 75px 100px;} CSS Padding 25px 50px 75px 100px
  68. 68. CSS Padding & Margin
  69. 69. CSS Padding & Margin
  70. 70. CSS Padding & Margin
  71. 71. CSS Padding & Margin {padding:25px 50px 75px 100px;}
  72. 72. {margin:25px 50px 75px 100px;} CSS Padding & Margin {padding:25px 50px 75px 100px;}
  73. 73. CSS Fonts
  74. 74. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text.
  75. 75. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed
  76. 76. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text
  77. 77. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text
  78. 78. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic)
  79. 79. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic) • font-variant Specifies if text should be small-caps
  80. 80. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic) • font-variant Specifies if text should be small-caps • font-weight Specifies the weight of a font
  81. 81. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic) • font-variant Specifies if text should be small-caps • font-weight Specifies the weight of a font • font Sets all the font properties in one declaration
  82. 82. CSS Fonts
  83. 83. CSS Fonts Serif Times New Roman, Georgia
  84. 84. CSS Fonts Serif Times New Roman, Georgia Sans-serif Arial, Verdana
  85. 85. CSS Fonts Serif Times New Roman, Georgia Sans-serif Arial, Verdana Monospace Courier New, Lucida Console
  86. 86. CSS Text
  87. 87. CSS Text • color sets the color of text
  88. 88. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters
  89. 89. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text
  90. 90. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text • text-decoration specifies the decoration
  91. 91. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text • text-decoration specifies the decoration • text-indent specifies the indentation of the first line
  92. 92. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text • text-decoration specifies the decoration • text-indent specifies the indentation of the first line • text-shadow specifies the shadow effect
  93. 93. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text • text-decoration specifies the decoration • text-indent specifies the indentation of the first line • text-shadow specifies the shadow effect • text-transform controls the capitalization of text
  94. 94. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text • text-decoration specifies the decoration • text-indent specifies the indentation of the first line • text-shadow specifies the shadow effect • text-transform controls the capitalization of text • word-spacing changes the space between words
  95. 95. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. CSS Text
  96. 96. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. p {font-family:Georgia Times serif;} CSS Text
  97. 97. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. p {font-family:Georgia Times serif;} a {color:$blue; text-decoration:underline;} CSS Text
  98. 98. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. p {font-family:Georgia Times serif;} a {color:$blue; text-decoration:underline;} .quote {color:$red; font-style:italic;} CSS Text
  99. 99. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. p {font-family:Georgia Times serif;} a {color:$blue; text-decoration:underline;} .quote {color:$red; font-style:italic;} CSS Text
  100. 100. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. p {font-family:Georgia Times serif;} a {color:$blue; text-decoration:underline;} .quote {color:$red; font-style:italic;} CSS Text
  101. 101. CSS Pseudo-classes
  102. 102. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element.
  103. 103. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links
  104. 104. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in.
  105. 105. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link
  106. 106. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links
  107. 107. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link
  108. 108. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link • a:hover Selects links on mouse over
  109. 109. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link • a:hover Selects links on mouse over • p::first-letter Selects the first letter of a paragraph
  110. 110. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link • a:hover Selects links on mouse over • p::first-letter Selects the first letter of a paragraph • p::first-line Selects the first line of a paragraph
  111. 111. CSS Background
  112. 112. CSS Background • CSS background properties are used to define the background effects of an element.
  113. 113. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element
  114. 114. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element
  115. 115. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated
  116. 116. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page
  117. 117. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page • background-position sets the starting position of a background image
  118. 118. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page • background-position sets the starting position of a background image • background sets all the background properties in one declaration
  119. 119. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page • background-position sets the starting position of a background image • background sets all the background properties in one declaration
  120. 120. CSS Positioning
  121. 121. CSS Positioning • The CSS positioning properties allow you to position an element.
  122. 122. CSS Positioning • The CSS positioning properties allow you to position an element. • Elements can be positioned using the top, bottom, left, and right properties.
  123. 123. CSS Positioning • The CSS positioning properties allow you to position an element. • Elements can be positioned using the top, bottom, left, and right properties. • position:static is the default position of an element
  124. 124. CSS Positioning • The CSS positioning properties allow you to position an element. • Elements can be positioned using the top, bottom, left, and right properties. • position:static is the default position of an element • position:fixed tells an element to be positioned relative to the browser window. It will not move even if the window is scrolled
  125. 125. CSS Positioning • The CSS positioning properties allow you to position an element. • Elements can be positioned using the top, bottom, left, and right properties. • position:static is the default position of an element • position:fixed tells an element to be positioned relative to the browser window. It will not move even if the window is scrolled • position:relative tells an element to be positioned relative to its normal position.
  126. 126. CSS Positioning • The CSS positioning properties allow you to position an element. • Elements can be positioned using the top, bottom, left, and right properties. • position:static is the default position of an element • position:fixed tells an element to be positioned relative to the browser window. It will not move even if the window is scrolled • position:relative tells an element to be positioned relative to its normal position. • position:absolute tells an element where to be positioned relative to its parent element.
  127. 127. CSS Positioning
  128. 128. {position:static;} {position:static;}
  129. 129. {position:static;} {position:static;}
  130. 130. {position:static;} {position:static;} {position:fixed;} {position:static;}
  131. 131. {position:static;} {position:static;} {position:fixed;} {position:static;}
  132. 132. {position:relative;} {position:absolute;} {position:static;} {position:static;} {position:fixed;} {position:static;}
  133. 133. {position:relative;} {position:absolute;} {position:static;} {position:static;} {position:fixed;} {position:static;}
  134. 134. CSS Float
  135. 135. CSS Float • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
  136. 136. CSS Float • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. • clear Specifies which sides of an element where other floating elements are not allowed.
  137. 137. CSS Float • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. • clear Specifies which sides of an element where other floating elements are not allowed. • float Specifies whether or not a box should float to the left or right.
  138. 138. CSS Float
  139. 139. img {float:none;} CSS Float
  140. 140. img {float:none;} img {float:left;} CSS Float
  141. 141. img {float:none;} img {float:left;} img {float:right;} CSS Float
  142. 142. img {float:none;} img {float:left;} img {float:right;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie CSS Float
  143. 143. img {float:none;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie • purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. img {float:left;} img {float:right;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie CSS Float
  144. 144. img {float:none;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie • purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie • purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. img {float:left;} img {float:right;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“Donec et molestie CSS Float
  145. 145. CSS Display and Visibility
  146. 146. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
  147. 147. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before.
  148. 148. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before. • display:none hides an element, and it will not take up any space.
  149. 149. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before. • display:none hides an element, and it will not take up any space. • display:inline tells an element to only take up as much width as necessary, and will not force line breaks.
  150. 150. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before. • display:none hides an element, and it will not take up any space. • display:inline tells an element to only take up as much width as necessary, and will not force line breaks. • display:block tells an element will takes up the full width available, and will have a line break before and after it
  151. 151. CSS Image Opacity / Transparency
  152. 152. CSS Image Opacity / Transparency • The CSS3 property for transparency is opacity.
  153. 153. CSS Image Opacity / Transparency • The CSS3 property for transparency is opacity. • The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.
  154. 154. CSS Image Opacity / Transparency • The CSS3 property for transparency is opacity. • The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. {opacity:0.1;}
  155. 155. CSS Image Opacity / Transparency • The CSS3 property for transparency is opacity. • The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. {opacity:0.1;} {opacity:0.5;}
  156. 156. CSS Image Opacity / Transparency • The CSS3 property for transparency is opacity. • The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. {opacity:0.1;} {opacity:0.5;} {opacity:1.0;}
  157. 157. CSS Image Sprites
  158. 158. CSS Image Sprites • An image sprite is a collection of images put into a single image.
  159. 159. CSS Image Sprites • An image sprite is a collection of images put into a single image. • A web page with many images can take a long time to load and generates multiple server requests.
  160. 160. CSS Image Sprites • An image sprite is a collection of images put into a single image. • A web page with many images can take a long time to load and generates multiple server requests.
  161. 161. CSS Media Types
  162. 162. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.
  163. 163. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices
  164. 164. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices
  165. 165. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices • print Used for printers
  166. 166. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices • print Used for printers • screen Used for computer screens
  167. 167. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices • print Used for printers • screen Used for computer screens • tv Used for television-type devices
  168. 168. What is SASS?
  169. 169. What is SASS?
  170. 170. • SASS stands for Syntactically Awesome Style Sheets What is SASS?
  171. 171. • SASS stands for Syntactically Awesome Style Sheets • Sass is a CSS preprocessor What is SASS?
  172. 172. • SASS stands for Syntactically Awesome Style Sheets • Sass is a CSS preprocessor • Sass can be written in either the sass or scss syntax What is SASS?
  173. 173. • SASS stands for Syntactically Awesome Style Sheets • Sass is a CSS preprocessor • Sass can be written in either the sass or scss syntax • Sass files compile into css files What is SASS?
  174. 174. Why do we use SASS?
  175. 175. • CSS doesn’t allow variables Why do we use SASS?
  176. 176. • CSS doesn’t allow variables • SASS uses mixins (reusable blocks of styles) Why do we use SASS?
  177. 177. • CSS doesn’t allow variables • SASS uses mixins (reusable blocks of styles) • SASS is faster, more efficient, and easier to maintain Why do we use SASS?
  178. 178. • CSS doesn’t allow variables • SASS uses mixins (reusable blocks of styles) • SASS is faster, more efficient, and easier to maintain • Using COMPASS with SASS allows us to write many lines of cross-browser compatible CSS in a single line of code! Why do we use SASS?
  179. 179. SCSS Syntax $yellow: #9d9624; Variable name Value Mixin Extend
  180. 180. SCSS Syntax $yellow: #9d9624; Variable name Value body {@include my-background;} Mixin Extend
  181. 181. SCSS Syntax $yellow: #9d9624; Variable name Value body {@include my-background;} h1 {@extend %my-background;} Mixin Extend
  182. 182. SCSS vs SASS
  183. 183. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS
  184. 184. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS nav! ul! margin: 0! li display: block! a! padding: 6px 12px! color: $yellow SASS
  185. 185. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS nav! ul! margin: 0! li display: block! a! padding: 6px 12px! color: $yellow SASS
  186. 186. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS nav! ul! margin: 0! li display: block! a! padding: 6px 12px! color: $yellow SASS
  187. 187. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS nav! ul! margin: 0! li display: block! a! padding: 6px 12px! color: $yellow SASS
  188. 188. SASS Extend
  189. 189. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector
  190. 190. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  191. 191. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  192. 192. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  193. 193. SASS Mixins
  194. 194. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin
  195. 195. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin .box {@include my-background(12px);} Include the mixin
  196. 196. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin .box {@include my-background(12px);} Include the mixin
  197. 197. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin .box {@include my-background(12px);} Include the mixin
  198. 198. Mixin or Extend ?
  199. 199. Mixin or Extend
  200. 200. Mixin or Extend .box,.footer {@include my-background(12px);}
  201. 201. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments
  202. 202. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments .box,.footer {@extend %my-background;}
  203. 203. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments .box,.footer {@extend %my-background;} Smaller CSS
  204. 204. Resources
  205. 205. Resources • www.w3schools.com/css
  206. 206. Resources • www.w3schools.com/css • css-tricks.com
  207. 207. Resources • www.w3schools.com/css • css-tricks.com • alistapart.com
  208. 208. Resources • www.w3schools.com/css • css-tricks.com • alistapart.com • thesassway.com
  209. 209. Thank You! Questions? sean@zivtech.com

×