Intro to css & sass
-
Upload
sean-wolfe -
Category
Design
-
view
171 -
download
0
description
Transcript of Intro to css & sass
![Page 1: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/1.jpg)
An introduction to
CSS & SASS
![Page 2: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/2.jpg)
What is HTML?
![Page 3: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/3.jpg)
• HTML stands for Hyper Text Markup Language
What is HTML?
![Page 4: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/4.jpg)
• HTML stands for Hyper Text Markup Language
• HTML is a markup language
What is HTML?
![Page 5: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/5.jpg)
• HTML stands for Hyper Text Markup Language
• HTML is a markup language• HTML documents contain HTML tags and plain text
What is HTML?
![Page 6: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/6.jpg)
What is HTML?
![Page 7: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/7.jpg)
What is HTML?
![Page 8: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/8.jpg)
What is CSS?
![Page 9: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/9.jpg)
• CSS stands for Cascading Style Sheets
What is CSS?
![Page 10: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/10.jpg)
• CSS stands for Cascading Style Sheets• Styles define how to display HTML elements
What is CSS?
![Page 11: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/11.jpg)
• 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?
![Page 12: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/12.jpg)
What is CSS?
![Page 13: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/13.jpg)
What is CSS?
![Page 14: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/14.jpg)
CSS Syntax
![Page 15: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/15.jpg)
CSS Syntax
html
Selector
![Page 16: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/16.jpg)
CSS Syntax
html
Selector
{margin:0; padding:0}
Declaration Declaration
![Page 17: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/17.jpg)
CSS Syntax
html
Selector
PropertyProperty
{margin:0; padding:0}
Declaration Declaration
![Page 18: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/18.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
![Page 19: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/19.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
![Page 20: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/20.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
![Page 21: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/21.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
![Page 22: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/22.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
![Page 23: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/23.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
![Page 24: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/24.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
![Page 25: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/25.jpg)
CSS Selectors
![Page 26: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/26.jpg)
CSS Selectors
• CSS selectors allow you to select and manipulate HTML element(s).
![Page 27: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/27.jpg)
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.
![Page 28: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/28.jpg)
Types of CSS Selectors
![Page 29: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/29.jpg)
Types of CSS Selectors
• The element Selector selects elements based on the
element name. (e.g. body, header, p, footer)
![Page 30: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/30.jpg)
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)
![Page 31: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/31.jpg)
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)
![Page 32: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/32.jpg)
![Page 33: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/33.jpg)
elements
![Page 34: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/34.jpg)
ID’s
elements
![Page 35: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/35.jpg)
ID’s
classes
elements
![Page 36: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/36.jpg)
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)
![Page 37: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/37.jpg)
Ways to use CSS
![Page 38: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/38.jpg)
Ways to use CSS
<p style=“color:red;”>Some Text</p>
Inline Styles
![Page 39: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/39.jpg)
Ways to use CSS
<p style=“color:red;”>Some Text</p>
Inline Styles
Some TextResult
![Page 40: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/40.jpg)
Ways to use CSS
<p style=“color:red;”>Some Text</p>
Inline Styles
Some TextResult
![Page 41: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/41.jpg)
Ways to use CSS
![Page 42: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/42.jpg)
Ways to use CSS
<head>! <style>p {color:red;}</style>!</head>
Embedded Styles
![Page 43: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/43.jpg)
Ways to use CSS
<head>! <style>p {color:red;}</style>!</head>
Embedded Styles
Some TextResult
![Page 44: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/44.jpg)
Ways to use CSS
<head>! <style>p {color:red;}</style>!</head>
Embedded Styles
Some TextResult
![Page 45: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/45.jpg)
Ways to use CSS
![Page 46: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/46.jpg)
Ways to use CSS
<head>! <link rel="stylesheet" type="text/css" href=“style.css">!</head>
External Style Sheet reference
![Page 47: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/47.jpg)
Ways to use CSS
<head>! <link rel="stylesheet" type="text/css" href=“style.css">!</head>
External Style Sheet reference
p {color:red;}
style.css
![Page 48: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/48.jpg)
Ways to use CSS
<head>! <link rel="stylesheet" type="text/css" href=“style.css">!</head>
External Style Sheet reference
Some TextResult
p {color:red;}
style.css
![Page 49: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/49.jpg)
Ways to use CSS
<head>! <link rel="stylesheet" type="text/css" href=“style.css">!</head>
External Style Sheet reference
Some TextResult
p {color:red;}
style.css
![Page 50: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/50.jpg)
CSS Lists
![Page 51: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/51.jpg)
CSS Lists• In HTML, there are two types of lists:
![Page 52: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/52.jpg)
CSS Lists• In HTML, there are two types of lists:
• unordered lists - the list items are marked with
bullets
![Page 53: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/53.jpg)
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
![Page 54: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/54.jpg)
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
![Page 55: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/55.jpg)
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
![Page 56: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/56.jpg)
CSS Margin
![Page 57: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/57.jpg)
CSS Margin• Margin is the space around elements (outside the
border).
![Page 58: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/58.jpg)
CSS Margin• Margin is the space around elements (outside the
border).• The margin does not have a background color,
and is completely transparent.
![Page 59: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/59.jpg)
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.
![Page 60: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/60.jpg)
CSS Margin
![Page 61: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/61.jpg)
CSS Margin{margin:25px 50px 75px 100px;}
![Page 62: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/62.jpg)
25px
50px
75px
100px
CSS Margin{margin:25px 50px 75px 100px;}
![Page 63: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/63.jpg)
CSS Padding
![Page 64: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/64.jpg)
CSS Padding• Padding is the space between the element
border and the element content
![Page 65: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/65.jpg)
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.
![Page 66: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/66.jpg)
CSS Padding
![Page 67: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/67.jpg)
{padding:25px 50px 75px 100px;}
CSS Padding
![Page 68: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/68.jpg)
{padding:25px 50px 75px 100px;}
CSS Padding
25px
50px
75px
100px
![Page 69: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/69.jpg)
CSS Padding & Margin
![Page 70: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/70.jpg)
CSS Padding & Margin
![Page 71: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/71.jpg)
CSS Padding & Margin
![Page 72: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/72.jpg)
CSS Padding & Margin{padding:25px 50px 75px 100px;}
![Page 73: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/73.jpg)
{margin:25px 50px 75px 100px;}
CSS Padding & Margin{padding:25px 50px 75px 100px;}
![Page 74: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/74.jpg)
CSS Fonts
![Page 75: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/75.jpg)
CSS Fonts• CSS font properties define the font family, boldness, size,
and the style of a text.
![Page 76: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/76.jpg)
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
![Page 77: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/77.jpg)
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
![Page 78: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/78.jpg)
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
![Page 79: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/79.jpg)
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)
![Page 80: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/80.jpg)
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
![Page 81: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/81.jpg)
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
![Page 82: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/82.jpg)
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
![Page 83: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/83.jpg)
CSS Fonts
![Page 84: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/84.jpg)
CSS Fonts
Serif Times New Roman, Georgia
![Page 85: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/85.jpg)
CSS Fonts
Serif Times New Roman, Georgia
Sans-serif Arial, Verdana
![Page 86: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/86.jpg)
CSS Fonts
Serif Times New Roman, Georgia
Sans-serif Arial, Verdana
Monospace Courier New, Lucida Console
![Page 87: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/87.jpg)
CSS Text
![Page 88: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/88.jpg)
CSS Text• color sets the color of text
![Page 89: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/89.jpg)
CSS Text• color sets the color of text
• letter-spacing adjusts the space between characters
![Page 90: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/90.jpg)
CSS Text• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
![Page 91: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/91.jpg)
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
![Page 92: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/92.jpg)
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
![Page 93: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/93.jpg)
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
![Page 94: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/94.jpg)
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
![Page 95: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/95.jpg)
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
![Page 96: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/96.jpg)
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
![Page 97: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/97.jpg)
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
![Page 98: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/98.jpg)
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
![Page 99: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/99.jpg)
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
![Page 100: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/100.jpg)
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
![Page 101: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/101.jpg)
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
![Page 102: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/102.jpg)
CSS Pseudo-classes
![Page 103: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/103.jpg)
CSS Pseudo-classes• CSS pseudo-classes are used to select the current condition of
an element.
![Page 104: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/104.jpg)
CSS Pseudo-classes• CSS pseudo-classes are used to select the current condition of
an element.• The most common pseudo-classes are links
![Page 105: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/105.jpg)
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.
![Page 106: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/106.jpg)
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
![Page 107: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/107.jpg)
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
![Page 108: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/108.jpg)
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
![Page 109: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/109.jpg)
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
![Page 110: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/110.jpg)
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
![Page 111: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/111.jpg)
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
![Page 112: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/112.jpg)
CSS Background
![Page 113: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/113.jpg)
CSS Background• CSS background properties are used to define the background
effects of an element.
![Page 114: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/114.jpg)
CSS Background• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
![Page 115: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/115.jpg)
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
![Page 116: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/116.jpg)
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
![Page 117: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/117.jpg)
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
![Page 118: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/118.jpg)
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
![Page 119: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/119.jpg)
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
![Page 120: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/120.jpg)
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
![Page 121: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/121.jpg)
CSS Positioning
![Page 122: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/122.jpg)
CSS Positioning• The CSS positioning properties allow you to position an
element.
![Page 123: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/123.jpg)
CSS Positioning• The CSS positioning properties allow you to position an
element.
• Elements can be positioned using the top, bottom, left, and
right properties.
![Page 124: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/124.jpg)
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
![Page 125: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/125.jpg)
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
![Page 126: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/126.jpg)
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.
![Page 127: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/127.jpg)
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.
![Page 128: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/128.jpg)
CSS Positioning
![Page 129: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/129.jpg)
![Page 130: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/130.jpg)
{position:static;}
{position:static;}
![Page 131: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/131.jpg)
{position:static;}
{position:static;}
![Page 132: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/132.jpg)
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
![Page 133: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/133.jpg)
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
![Page 134: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/134.jpg)
{position:relative;}
{position:absolute;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
![Page 135: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/135.jpg)
{position:relative;}
{position:absolute;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
![Page 136: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/136.jpg)
CSS Float
![Page 137: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/137.jpg)
CSS Float• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
![Page 138: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/138.jpg)
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.
![Page 139: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/139.jpg)
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.
![Page 140: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/140.jpg)
CSS Float
![Page 141: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/141.jpg)
img {float:none;}
CSS Float
![Page 142: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/142.jpg)
img {float:none;}
img {float:left;}
CSS Float
![Page 143: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/143.jpg)
img {float:none;}
img {float:left;}
img {float:right;}
CSS Float
![Page 144: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/144.jpg)
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
![Page 145: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/145.jpg)
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
![Page 146: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/146.jpg)
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
![Page 147: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/147.jpg)
CSS Display and Visibility
![Page 148: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/148.jpg)
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.
![Page 149: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/149.jpg)
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.
![Page 150: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/150.jpg)
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.
![Page 151: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/151.jpg)
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.
![Page 152: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/152.jpg)
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
![Page 153: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/153.jpg)
CSS Image Opacity / Transparency
![Page 154: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/154.jpg)
CSS Image Opacity / Transparency
• The CSS3 property for transparency is opacity.
![Page 155: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/155.jpg)
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.
![Page 156: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/156.jpg)
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;}
![Page 157: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/157.jpg)
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;}
![Page 158: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/158.jpg)
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;}
![Page 159: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/159.jpg)
CSS Image Sprites
![Page 160: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/160.jpg)
CSS Image Sprites• An image sprite is a collection of images put into
a single image.
![Page 161: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/161.jpg)
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.
![Page 162: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/162.jpg)
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.
![Page 163: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/163.jpg)
CSS Media Types
![Page 164: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/164.jpg)
CSS Media Types• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
![Page 165: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/165.jpg)
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
![Page 166: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/166.jpg)
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
![Page 167: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/167.jpg)
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
![Page 168: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/168.jpg)
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
![Page 169: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/169.jpg)
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
![Page 170: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/170.jpg)
What is SASS?
![Page 171: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/171.jpg)
What is SASS?
![Page 172: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/172.jpg)
• SASS stands for Syntactically Awesome Style Sheets
What is SASS?
![Page 173: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/173.jpg)
• SASS stands for Syntactically Awesome Style Sheets• Sass is a CSS preprocessor
What is SASS?
![Page 174: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/174.jpg)
• 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?
![Page 175: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/175.jpg)
• 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?
![Page 176: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/176.jpg)
Why do we use SASS?
![Page 177: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/177.jpg)
• CSS doesn’t allow variables
Why do we use SASS?
![Page 178: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/178.jpg)
• CSS doesn’t allow variables• SASS uses mixins (reusable blocks of styles)
Why do we use SASS?
![Page 179: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/179.jpg)
• 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?
![Page 180: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/180.jpg)
• 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?
![Page 181: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/181.jpg)
SCSS Syntax
$yellow: #9d9624;
Variable name Value
Mixin
Extend
![Page 182: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/182.jpg)
SCSS Syntax
$yellow: #9d9624;
Variable name Value
body {@include my-background;}
Mixin
Extend
![Page 183: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/183.jpg)
SCSS Syntax
$yellow: #9d9624;
Variable name Value
body {@include my-background;}
h1 {@extend %my-background;}
Mixin
Extend
![Page 184: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/184.jpg)
SCSS vs SASS
![Page 185: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/185.jpg)
![Page 186: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/186.jpg)
nav {! ul {! margin: 0;!}! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }!}
SCSS
![Page 187: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/187.jpg)
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
![Page 188: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/188.jpg)
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
![Page 189: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/189.jpg)
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
![Page 190: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/190.jpg)
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
![Page 191: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/191.jpg)
SASS Extend
![Page 192: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/192.jpg)
SASS Extend
%my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;!}
Define the placeholder selector
![Page 193: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/193.jpg)
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
![Page 194: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/194.jpg)
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
![Page 195: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/195.jpg)
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
![Page 196: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/196.jpg)
SASS Mixins
![Page 197: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/197.jpg)
SASS Mixins
@mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;!}
Define the mixin
![Page 198: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/198.jpg)
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
![Page 199: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/199.jpg)
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
![Page 200: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/200.jpg)
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
![Page 201: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/201.jpg)
Mixin or Extend
?
![Page 202: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/202.jpg)
Mixin or Extend
![Page 203: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/203.jpg)
Mixin or Extend
.box,.footer {@include my-background(12px);}
![Page 204: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/204.jpg)
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
![Page 205: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/205.jpg)
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
.box,.footer {@extend %my-background;}
![Page 206: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/206.jpg)
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
.box,.footer {@extend %my-background;}
Smaller CSS
![Page 207: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/207.jpg)
Resources
![Page 208: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/208.jpg)
Resources• www.w3schools.com/css
![Page 209: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/209.jpg)
Resources• www.w3schools.com/css• css-tricks.com
![Page 210: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/210.jpg)
Resources• www.w3schools.com/css• css-tricks.com• alistapart.com
![Page 211: Intro to css & sass](https://reader034.fdocuments.us/reader034/viewer/2022051014/54b6b2b54a79599f7b8b46bc/html5/thumbnails/211.jpg)
Resources• www.w3schools.com/css• css-tricks.com• alistapart.com• thesassway.com