SlideShare a Scribd company logo
An introduction to
CSS & SASS
What is HTML?
โ€ข HTML stands for Hyper Text Markup Language
What is HTML?
โ€ข HTML stands for Hyper Text Markup Language
โ€ข HTML is a markup language
What is HTML?
โ€ข HTML stands for Hyper Text Markup Language
โ€ข HTML is a markup language
โ€ข HTML documents contain HTML tags and plain text
What is HTML?
What is HTML?
What is HTML?
What is CSS?
โ€ข CSS stands for Cascading Style Sheets
What is CSS?
โ€ข CSS stands for Cascading Style Sheets
โ€ข Styles de๏ฌne how to display HTML elements
What is CSS?
โ€ข CSS stands for Cascading Style Sheets
โ€ข Styles de๏ฌne how to display HTML elements
โ€ข CSS can solve many design problems without
adding images or changing the HTML
What is CSS?
What is CSS?
What is CSS?
CSS Syntax
CSS Syntax
html
Selector
CSS Syntax
html
Selector
{margin:0; padding:0}
Declaration Declaration
CSS Syntax
html
Selector
PropertyProperty
{margin:0; padding:0}
Declaration Declaration
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
body {background-color:#d20c0c;}
h1 {font-size:12px;}
CSS Selectors
CSS Selectors
โ€ข CSS selectors allow you to select and manipulate
HTML element(s).
CSS Selectors
โ€ข CSS selectors allow you to select and manipulate
HTML element(s).
โ€ข CSS selectors are used to "๏ฌnd" (or select) HTML
elements based on their id, classes, types,
attributes, and more.
Types of CSS Selectors
Types of CSS Selectors
โ€ข The element Selector selects elements based on the
element name. (e.g. body, header, p, footer)
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 speci๏ฌc element on the page and
can only be used once (e.g. #main, #content, #footer)
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 speci๏ฌc element on the page and
can only be used once (e.g. #main, #content, #footer)
โ€ข The class Selector selects elements with the speci๏ฌc class
names and cans be reused
(e.g. .wrapper, .column, .panel, .panel-pane)
Intro to css & sass
elements
IDโ€™s
elements
IDโ€™s
classes
elements
Ways to use CSS
โ€ข CSS can be attached to HTML in 3 ways
โ€ข Inline (wysiwyg for example)
โ€ข Embedded (wysiwyg for example)
โ€ข Links CSS ๏ฌles (the preferred method)
Ways to use CSS
Ways to use CSS
<p style=โ€œcolor:red;โ€>Some Text</p>
Inline Styles
Ways to use CSS
<p style=โ€œcolor:red;โ€>Some Text</p>
Inline Styles
Some Text
Result
Ways to use CSS
<p style=โ€œcolor:red;โ€>Some Text</p>
Inline Styles
Some Text
Result
Ways to use CSS
Ways to use CSS
<head>!
<style>p {color:red;}</style>!
</head>
Embedded Styles
Ways to use CSS
<head>!
<style>p {color:red;}</style>!
</head>
Embedded Styles
Some Text
Result
Ways to use CSS
<head>!
<style>p {color:red;}</style>!
</head>
Embedded Styles
Some Text
Result
Ways to use CSS
Ways to use CSS
<head>!
<link rel="stylesheet"โ€จ
type="text/css" href=โ€œstyle.css">!
</head>
External Style Sheet reference
Ways to use CSS
<head>!
<link rel="stylesheet"โ€จ
type="text/css" href=โ€œstyle.css">!
</head>
External Style Sheet reference
p {color:red;}
style.css
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
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
CSS Lists
CSS Lists
โ€ข In HTML, there are two types of lists:
CSS Lists
โ€ข In HTML, there are two types of lists:
โ€ข unordered lists - the list items are marked with
bullets
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
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
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
CSS Margin
CSS Margin
โ€ข Margin is the space around elements (outside the
border).
CSS Margin
โ€ข Margin is the space around elements (outside the
border).
โ€ข The margin does not have a background color,
and is completely transparent.
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.
CSS Margin
CSS Margin
{margin:25px 50px 75px 100px;}
25px
50px
75px
100px
CSS Margin
{margin:25px 50px 75px 100px;}
CSS Padding
CSS Padding
โ€ข Padding is the space between the element
border and the element content
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.
CSS Padding
{padding:25px 50px 75px 100px;}
CSS Padding
{padding:25px 50px 75px 100px;}
CSS Padding
25px
50px
75px
100px
CSS Padding & Margin
CSS Padding & Margin
CSS Padding & Margin
CSS Padding & Margin
{padding:25px 50px 75px 100px;}
{margin:25px 50px 75px 100px;}
CSS Padding & Margin
{padding:25px 50px 75px 100px;}
CSS Fonts
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
โ€ข font-family Speci๏ฌes the font family for text
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
โ€ข font-family Speci๏ฌes the font family for text
โ€ข font-size Speci๏ฌes the font size of text
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
โ€ข font-family Speci๏ฌes the font family for text
โ€ข font-size Speci๏ฌes the font size of text
โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or
italic)
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
โ€ข font-family Speci๏ฌes the font family for text
โ€ข font-size Speci๏ฌes the font size of text
โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or
italic)
โ€ข font-variant Speci๏ฌes if text should be small-caps
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
โ€ข font-family Speci๏ฌes the font family for text
โ€ข font-size Speci๏ฌes the font size of text
โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or
italic)
โ€ข font-variant Speci๏ฌes if text should be small-caps
โ€ข font-weight Speci๏ฌes the weight of a font
CSS Fonts
โ€ข CSS font properties de๏ฌne the font family, boldness, size,
and the style of a text.
โ€ข Not all computers have the same fonts installed
โ€ข font-family Speci๏ฌes the font family for text
โ€ข font-size Speci๏ฌes the font size of text
โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or
italic)
โ€ข font-variant Speci๏ฌes if text should be small-caps
โ€ข font-weight Speci๏ฌes the weight of a font
โ€ข font Sets all the font properties in one declaration
CSS Fonts
CSS Fonts
Serif Times New Roman, Georgia
CSS Fonts
Serif Times New Roman, Georgia
Sans-serif Arial, Verdana
CSS Fonts
Serif Times New Roman, Georgia
Sans-serif Arial, Verdana
Monospace Courier New, Lucida Console
CSS Text
CSS Text
โ€ข color sets the color of text
CSS Text
โ€ข color sets the color of text
โ€ข letter-spacing adjusts the space between characters
CSS Text
โ€ข color sets the color of text
โ€ข letter-spacing adjusts the space between characters
โ€ข line-height sets the distance between lines of text
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 speci๏ฌes the decoration
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 speci๏ฌes the decoration
โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line
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 speci๏ฌes the decoration
โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line
โ€ข text-shadow speci๏ฌes the shadow e๏ฌ€ect
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 speci๏ฌes the decoration
โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line
โ€ข text-shadow speci๏ฌes the shadow e๏ฌ€ect
โ€ข text-transform controls the capitalization of text
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 speci๏ฌes the decoration
โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line
โ€ข text-shadow speci๏ฌes the shadow e๏ฌ€ect
โ€ข text-transform controls the capitalization of text
โ€ข word-spacing changes the space between words
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
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
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
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
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
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
CSS Pseudo-classes
CSS Pseudo-classes
โ€ข CSS pseudo-classes are used to select the current condition of
an element.
CSS Pseudo-classes
โ€ข CSS pseudo-classes are used to select the current condition of
an element.
โ€ข The most common pseudo-classes are links
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 di๏ฌ€erently depending on what state they
are in.
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 di๏ฌ€erently depending on what state they
are in.
โ€ข a:link Selects an unvisited link
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 di๏ฌ€erently depending on what state they
are in.
โ€ข a:link Selects an unvisited link
โ€ข a:visited Selects visited links
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 di๏ฌ€erently depending on what state they
are in.
โ€ข a:link Selects an unvisited link
โ€ข a:visited Selects visited links
โ€ข a:active Selects the active link
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 di๏ฌ€erently 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
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 di๏ฌ€erently 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 ๏ฌrst letter of a paragraph
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 di๏ฌ€erently 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 ๏ฌrst letter of a paragraph
โ€ข p::first-line Selects the ๏ฌrst line of a paragraph
CSS Background
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects of an element.
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects of an element.
โ€ข background-color sets the background color of an element
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects of an element.
โ€ข background-color sets the background color of an element
โ€ข background-image sets the background image for an element
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects 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
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects 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
๏ฌxed or scrolls with the rest of the page
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects 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
๏ฌxed or scrolls with the rest of the page
โ€ข background-position sets the starting position of a background
image
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects 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
๏ฌxed 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
CSS Background
โ€ข CSS background properties are used to de๏ฌne the background
e๏ฌ€ects 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
๏ฌxed 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
CSS Positioning
CSS Positioning
โ€ข The CSS positioning properties allow you to position an
element.
CSS Positioning
โ€ข The CSS positioning properties allow you to position an
element.
โ€ข Elements can be positioned using the top, bottom, left, and
right properties.
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
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
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.
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.
CSS Positioning
Intro to css & sass
{position:static;}
{position:static;}
{position:static;}
{position:static;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
{position:relative;}
{position:absolute;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
{position:relative;}
{position:absolute;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
CSS Float
CSS Float
โ€ข With CSS ๏ฌ‚oat, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
CSS Float
โ€ข With CSS ๏ฌ‚oat, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
โ€ข clear Speci๏ฌes which sides of an element where
other ๏ฌ‚oating elements are not allowed.
CSS Float
โ€ข With CSS ๏ฌ‚oat, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
โ€ข clear Speci๏ฌes which sides of an element where
other ๏ฌ‚oating elements are not allowed.
โ€ข float Speci๏ฌes whether or not a box should ๏ฌ‚oat
to the left or right.
CSS Float
img {float:none;}
CSS Float
img {float:none;}
img {float:left;}
CSS Float
img {float:none;}
img {float:left;}
img {float:right;}
CSS Float
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
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
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
CSS Display and Visibility
CSS Display and Visibility
โ€ข The display property speci๏ฌes if/how an element is displayed,
and the visibility property speci๏ฌes if an element should be
visible or hidden.
CSS Display and Visibility
โ€ข The display property speci๏ฌes if/how an element is displayed,
and the visibility property speci๏ฌes if an element should be
visible or hidden.
โ€ข visibility:hidden hides an element, but it will still take up
the same space as before.
CSS Display and Visibility
โ€ข The display property speci๏ฌes if/how an element is displayed,
and the visibility property speci๏ฌes 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.
CSS Display and Visibility
โ€ข The display property speci๏ฌes if/how an element is displayed,
and the visibility property speci๏ฌes 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.
CSS Display and Visibility
โ€ข The display property speci๏ฌes if/how an element is displayed,
and the visibility property speci๏ฌes 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
CSS Image Opacity / Transparency
CSS Image Opacity / Transparency
โ€ข The CSS3 property for transparency is opacity.
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.
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;}
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;}
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;}
CSS Image Sprites
CSS Image Sprites
โ€ข An image sprite is a collection of images put into
a single image.
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.
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.
CSS Media Types
CSS Media Types
โ€ข By using the @media rule, a website can have a
di๏ฌ€erent layout for screen, print, mobile phone,
tablet, etc.
CSS Media Types
โ€ข By using the @media rule, a website can have a
di๏ฌ€erent layout for screen, print, mobile phone,
tablet, etc.
โ€ข all Used for all media type devices
CSS Media Types
โ€ข By using the @media rule, a website can have a
di๏ฌ€erent layout for screen, print, mobile phone,
tablet, etc.
โ€ข all Used for all media type devices
โ€ข braille Used for braille tactile feedback devices
CSS Media Types
โ€ข By using the @media rule, a website can have a
di๏ฌ€erent 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
CSS Media Types
โ€ข By using the @media rule, a website can have a
di๏ฌ€erent 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
CSS Media Types
โ€ข By using the @media rule, a website can have a
di๏ฌ€erent 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
What is SASS?
What is SASS?
โ€ข SASS stands for Syntactically Awesome Style Sheets
What is SASS?
โ€ข SASS stands for Syntactically Awesome Style Sheets
โ€ข Sass is a CSS preprocessor
What is SASS?
โ€ข 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?
โ€ข SASS stands for Syntactically Awesome Style Sheets
โ€ข Sass is a CSS preprocessor
โ€ข Sass can be written in either the sass or scss syntax
โ€ข Sass ๏ฌles compile into css ๏ฌles
What is SASS?
Why do we use SASS?
โ€ข CSS doesnโ€™t allow variables
Why do we use SASS?
โ€ข CSS doesnโ€™t allow variables
โ€ข SASS uses mixins (reusable blocks of styles)
Why do we use SASS?
โ€ข CSS doesnโ€™t allow variables
โ€ข SASS uses mixins (reusable blocks of styles)
โ€ข SASS is faster, more e๏ฌƒcient, and easier to maintain
Why do we use SASS?
โ€ข CSS doesnโ€™t allow variables
โ€ข SASS uses mixins (reusable blocks of styles)
โ€ข SASS is faster, more e๏ฌƒcient, 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?
SCSS Syntax
$yellow: #9d9624;
Variable name Value
Mixin
Extend
SCSS Syntax
$yellow: #9d9624;
Variable name Value
body {@include my-background;}
Mixin
Extend
SCSS Syntax
$yellow: #9d9624;
Variable name Value
body {@include my-background;}
h1 {@extend %my-background;}
Mixin
Extend
SCSS vs SASS
Intro to css & sass
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;!
}!
}
SCSS
nav!
ul!
margin: 0!
li display: block!
a!
padding: 6px 12px!
color: $yellow
SASS
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
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
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
SASS Extend
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
De๏ฌne the placeholder selector
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
De๏ฌne the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
De๏ฌne the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
De๏ฌne the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
SASS Mixins
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
De๏ฌne the mixin
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
De๏ฌne the mixin
.box {@include my-background(12px);}
Include the mixin
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
De๏ฌne the mixin
.box {@include my-background(12px);}
Include the mixin
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
De๏ฌne the mixin
.box {@include my-background(12px);}
Include the mixin
Mixin or Extend
?
Mixin or Extend
Mixin or Extend
.box,.footer {@include my-background(12px);}
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
.box,.footer {@extend %my-background;}
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
.box,.footer {@extend %my-background;}
Smaller CSS
Resources
Resources
โ€ข www.w3schools.com/css
Resources
โ€ข www.w3schools.com/css
โ€ข css-tricks.com
Resources
โ€ข www.w3schools.com/css
โ€ข css-tricks.com
โ€ข alistapart.com
Resources
โ€ข www.w3schools.com/css
โ€ข css-tricks.com
โ€ข alistapart.com
โ€ข thesassway.com
Thank You!
Questions?
sean@zivtech.com
Ad

More Related Content

What's hot (20)

Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
Knoldus Inc.
ย 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
Meenakshi Paul
ย 
Css
CssCss
Css
mohamed ashraf
ย 
CSS
CSSCSS
CSS
Akila Iroshan
ย 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
ย 
Css
CssCss
Css
Hemant Saini
ย 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
ย 
Css Basics
Css BasicsCss Basics
Css Basics
Jay Patel
ย 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexbox
Jyoti Gautam
ย 
Css Preprocessors
Css PreprocessorsCss Preprocessors
Css Preprocessors
Saulo Oliveira
ย 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
Yaowaluck Promdee
ย 
CSS
CSSCSS
CSS
DivyaKS12
ย 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
ย 
Css
CssCss
Css
shanmuga rajan
ย 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
ย 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
ssuser2f6682
ย 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
ย 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
Yaowaluck Promdee
ย 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
ย 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
Yaowaluck Promdee
ย 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
Knoldus Inc.
ย 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
Meenakshi Paul
ย 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
ย 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
ย 
Css Basics
Css BasicsCss Basics
Css Basics
Jay Patel
ย 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexbox
Jyoti Gautam
ย 
Css Preprocessors
Css PreprocessorsCss Preprocessors
Css Preprocessors
Saulo Oliveira
ย 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
Yaowaluck Promdee
ย 
CSS
CSSCSS
CSS
DivyaKS12
ย 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
ย 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
ย 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
ssuser2f6682
ย 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
ย 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
Yaowaluck Promdee
ย 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
ย 

Viewers also liked (20)

SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
ย 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
ย 
LESS CSS
LESS CSSLESS CSS
LESS CSS
Mathi Rajalingam
ย 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
ย 
Start using less css
Start using less cssStart using less css
Start using less css
Ali MasudianPour
ย 
CSS Preprocessors with an introduction to LESS/SASS
CSS Preprocessors with an introduction to LESS/SASSCSS Preprocessors with an introduction to LESS/SASS
CSS Preprocessors with an introduction to LESS/SASS
visual28
ย 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Sean Wolfe
ย 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
Neha Sharma
ย 
Front end basics - Sass
Front end basics - SassFront end basics - Sass
Front end basics - Sass
Nadal Soler
ย 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
ย 
Sass presentation
Sass presentationSass presentation
Sass presentation
Davin Abraham
ย 
ES2015 and Beyond
ES2015 and BeyondES2015 and Beyond
ES2015 and Beyond
Jay Phelps
ย 
[Cordova] Empezando con Ionic
[Cordova] Empezando con Ionic[Cordova] Empezando con Ionic
[Cordova] Empezando con Ionic
Moises Alexander Salazar Vila
ย 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
ย 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
ย 
From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
Stephen Hay
ย 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
Billy Shih
ย 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
Shaho Toofani
ย 
7 steps to get beyond excuses
7 steps to get beyond excuses7 steps to get beyond excuses
7 steps to get beyond excuses
Harish
ย 
Front-end Basics for Developers
Front-end Basics for DevelopersFront-end Basics for Developers
Front-end Basics for Developers
Nadal Soler
ย 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
ย 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
ย 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
ย 
Start using less css
Start using less cssStart using less css
Start using less css
Ali MasudianPour
ย 
CSS Preprocessors with an introduction to LESS/SASS
CSS Preprocessors with an introduction to LESS/SASSCSS Preprocessors with an introduction to LESS/SASS
CSS Preprocessors with an introduction to LESS/SASS
visual28
ย 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Sean Wolfe
ย 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
Neha Sharma
ย 
Front end basics - Sass
Front end basics - SassFront end basics - Sass
Front end basics - Sass
Nadal Soler
ย 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
ย 
Sass presentation
Sass presentationSass presentation
Sass presentation
Davin Abraham
ย 
ES2015 and Beyond
ES2015 and BeyondES2015 and Beyond
ES2015 and Beyond
Jay Phelps
ย 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
ย 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
ย 
From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
Stephen Hay
ย 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
Billy Shih
ย 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
Shaho Toofani
ย 
7 steps to get beyond excuses
7 steps to get beyond excuses7 steps to get beyond excuses
7 steps to get beyond excuses
Harish
ย 
Front-end Basics for Developers
Front-end Basics for DevelopersFront-end Basics for Developers
Front-end Basics for Developers
Nadal Soler
ย 
Ad

Similar to Intro to css & sass (20)

Css
CssCss
Css
Nasla C.K
ย 
Css
CssCss
Css
Yudha Arif Budiman
ย 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Week11 Lecture: CSS
Katherine McCurdy-Lapierre, R.G.D.
ย 
Web technologies-course 03.pptx
Web technologies-course 03.pptxWeb technologies-course 03.pptx
Web technologies-course 03.pptx
Stefan Oprea
ย 
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
CSS INTRODUCTION SLIDES WITH HTML CODE.pdfCSS INTRODUCTION SLIDES WITH HTML CODE.pdf
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
Aasma13
ย 
css.pdf
css.pdfcss.pdf
css.pdf
dhruvsharma8716
ย 
2 introduction css
2 introduction css2 introduction css
2 introduction css
Jalpesh Vasa
ย 
Unit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxUnit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptx
Tanu524249
ย 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Irfan Maulana
ย 
CSS-part-1.ppt
CSS-part-1.pptCSS-part-1.ppt
CSS-part-1.ppt
AshwaniKumarYadav19
ย 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
RasheedMohammad6
ย 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
ย 
Css
CssCss
Css
Abhishek Kesharwani
ย 
Css
CssCss
Css
Kamal Acharya
ย 
Css present
Css presentCss present
Css present
MissaGiles
ย 
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
Divya Tiwari
ย 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
karthiksmart21
ย 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
MattMarino13
ย 
it-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptxit-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptx
Shwetamaurya36
ย 
CSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.ECSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
ย 
Css
CssCss
Css
Nasla C.K
ย 
Web technologies-course 03.pptx
Web technologies-course 03.pptxWeb technologies-course 03.pptx
Web technologies-course 03.pptx
Stefan Oprea
ย 
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
CSS INTRODUCTION SLIDES WITH HTML CODE.pdfCSS INTRODUCTION SLIDES WITH HTML CODE.pdf
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
Aasma13
ย 
2 introduction css
2 introduction css2 introduction css
2 introduction css
Jalpesh Vasa
ย 
Unit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxUnit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptx
Tanu524249
ย 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Irfan Maulana
ย 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
ย 
Css present
Css presentCss present
Css present
MissaGiles
ย 
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
Divya Tiwari
ย 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
karthiksmart21
ย 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
MattMarino13
ย 
it-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptxit-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptx
Shwetamaurya36
ย 
CSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.ECSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
ย 
Ad

Recently uploaded (20)

STOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan sSTOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan s
kfdpontianak2012
ย 
Emirates Agriculture Prensentation Badges GOLD.pdf
Emirates Agriculture Prensentation Badges GOLD.pdfEmirates Agriculture Prensentation Badges GOLD.pdf
Emirates Agriculture Prensentation Badges GOLD.pdf
asfianoor1
ย 
PayPros-Journey-Overcoming-Challenges-Through-Governance.pptx
PayPros-Journey-Overcoming-Challenges-Through-Governance.pptxPayPros-Journey-Overcoming-Challenges-Through-Governance.pptx
PayPros-Journey-Overcoming-Challenges-Through-Governance.pptx
rayyansiddiqui034
ย 
Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!
vanzan01
ย 
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxPPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
rachmatunnisa29
ย 
Designing Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum ExhibitsDesigning Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum Exhibits
Peach Prime Consultancy
ย 
Minimalist Business Slides XL by Slidesgo.pptx
Minimalist Business Slides XL by Slidesgo.pptxMinimalist Business Slides XL by Slidesgo.pptx
Minimalist Business Slides XL by Slidesgo.pptx
karenalavamoran
ย 
Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...
kochars428
ย 
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€
Friends of Figm a, Sydney
ย 
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptxCOTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
ayushjadon04
ย 
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
SlidesBrain
ย 
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfMOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
asfianoor1
ย 
4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free
Designer
ย 
Flowers Coloring Pages Activity Worksheet in Black and White Illustrative Style
Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleFlowers Coloring Pages Activity Worksheet in Black and White Illustrative Style
Flowers Coloring Pages Activity Worksheet in Black and White Illustrative Style
Likazelika
ย 
dFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptxdFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptx
AKSHAYKAMBLE806728
ย 
Templates Wind Generator.pdf ahรญ. Ais d Ai d f
Templates Wind Generator.pdf ahรญ. Ais d Ai d fTemplates Wind Generator.pdf ahรญ. Ais d Ai d f
Templates Wind Generator.pdf ahรญ. Ais d Ai d f
jeremysegundob
ย 
2nd taxonomy, nomen microorganisms-.pptx
2nd  taxonomy, nomen  microorganisms-.pptx2nd  taxonomy, nomen  microorganisms-.pptx
2nd taxonomy, nomen microorganisms-.pptx
ayeleasefa2
ย 
DOC-20250121-WA0008._20250121_105938_0000.pptx
DOC-20250121-WA0008._20250121_105938_0000.pptxDOC-20250121-WA0008._20250121_105938_0000.pptx
DOC-20250121-WA0008._20250121_105938_0000.pptx
laugolac31
ย 
19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accounts19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accounts
https://sellsusa.com/product/buy-verified-cash-app-accounts/
ย 
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptxDesign of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
BapujiBanothu
ย 
STOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan sSTOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan s
kfdpontianak2012
ย 
Emirates Agriculture Prensentation Badges GOLD.pdf
Emirates Agriculture Prensentation Badges GOLD.pdfEmirates Agriculture Prensentation Badges GOLD.pdf
Emirates Agriculture Prensentation Badges GOLD.pdf
asfianoor1
ย 
PayPros-Journey-Overcoming-Challenges-Through-Governance.pptx
PayPros-Journey-Overcoming-Challenges-Through-Governance.pptxPayPros-Journey-Overcoming-Challenges-Through-Governance.pptx
PayPros-Journey-Overcoming-Challenges-Through-Governance.pptx
rayyansiddiqui034
ย 
Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!
vanzan01
ย 
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxPPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
rachmatunnisa29
ย 
Designing Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum ExhibitsDesigning Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum Exhibits
Peach Prime Consultancy
ย 
Minimalist Business Slides XL by Slidesgo.pptx
Minimalist Business Slides XL by Slidesgo.pptxMinimalist Business Slides XL by Slidesgo.pptx
Minimalist Business Slides XL by Slidesgo.pptx
karenalavamoran
ย 
Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...
kochars428
ย 
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—ฎ๐—น๐—น: ๐—œ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ฃ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ถ๐—ฐ๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—•๐—ฒ๐˜๐˜๐—ฒ๐—ฟ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ๐˜€
Friends of Figm a, Sydney
ย 
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptxCOTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
ayushjadon04
ย 
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
SlidesBrain
ย 
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfMOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
asfianoor1
ย 
4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free
Designer
ย 
Flowers Coloring Pages Activity Worksheet in Black and White Illustrative Style
Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleFlowers Coloring Pages Activity Worksheet in Black and White Illustrative Style
Flowers Coloring Pages Activity Worksheet in Black and White Illustrative Style
Likazelika
ย 
dFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptxdFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptx
AKSHAYKAMBLE806728
ย 
Templates Wind Generator.pdf ahรญ. Ais d Ai d f
Templates Wind Generator.pdf ahรญ. Ais d Ai d fTemplates Wind Generator.pdf ahรญ. Ais d Ai d f
Templates Wind Generator.pdf ahรญ. Ais d Ai d f
jeremysegundob
ย 
2nd taxonomy, nomen microorganisms-.pptx
2nd  taxonomy, nomen  microorganisms-.pptx2nd  taxonomy, nomen  microorganisms-.pptx
2nd taxonomy, nomen microorganisms-.pptx
ayeleasefa2
ย 
DOC-20250121-WA0008._20250121_105938_0000.pptx
DOC-20250121-WA0008._20250121_105938_0000.pptxDOC-20250121-WA0008._20250121_105938_0000.pptx
DOC-20250121-WA0008._20250121_105938_0000.pptx
laugolac31
ย 
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptxDesign of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
BapujiBanothu
ย 

Intro to css & sass

  • 3. โ€ข HTML stands for Hyper Text Markup Language What is HTML?
  • 4. โ€ข HTML stands for Hyper Text Markup Language โ€ข HTML is a markup language What is HTML?
  • 5. โ€ข HTML stands for Hyper Text Markup Language โ€ข HTML is a markup language โ€ข HTML documents contain HTML tags and plain text What is HTML?
  • 9. โ€ข CSS stands for Cascading Style Sheets What is CSS?
  • 10. โ€ข CSS stands for Cascading Style Sheets โ€ข Styles de๏ฌne how to display HTML elements What is CSS?
  • 11. โ€ข CSS stands for Cascading Style Sheets โ€ข Styles de๏ฌne how to display HTML elements โ€ข CSS can solve many design problems without adding images or changing the HTML What is CSS?
  • 19. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;}
  • 20. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  • 21. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  • 22. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  • 23. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  • 24. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration body {background-color:#d20c0c;} h1 {font-size:12px;}
  • 26. CSS Selectors โ€ข CSS selectors allow you to select and manipulate HTML element(s).
  • 27. CSS Selectors โ€ข CSS selectors allow you to select and manipulate HTML element(s). โ€ข CSS selectors are used to "๏ฌnd" (or select) HTML elements based on their id, classes, types, attributes, and more.
  • 28. Types of CSS Selectors
  • 29. Types of CSS Selectors โ€ข The element Selector selects elements based on the element name. (e.g. body, header, p, footer)
  • 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 speci๏ฌc element on the page and can only be used once (e.g. #main, #content, #footer)
  • 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 speci๏ฌc element on the page and can only be used once (e.g. #main, #content, #footer) โ€ข The class Selector selects elements with the speci๏ฌc class names and cans be reused (e.g. .wrapper, .column, .panel, .panel-pane)
  • 36. Ways to use CSS โ€ข CSS can be attached to HTML in 3 ways โ€ข Inline (wysiwyg for example) โ€ข Embedded (wysiwyg for example) โ€ข Links CSS ๏ฌles (the preferred method)
  • 37. Ways to use CSS
  • 38. Ways to use CSS <p style=โ€œcolor:red;โ€>Some Text</p> Inline Styles
  • 39. Ways to use CSS <p style=โ€œcolor:red;โ€>Some Text</p> Inline Styles Some Text Result
  • 40. Ways to use CSS <p style=โ€œcolor:red;โ€>Some Text</p> Inline Styles Some Text Result
  • 41. Ways to use CSS
  • 42. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles
  • 43. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles Some Text Result
  • 44. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles Some Text Result
  • 45. Ways to use CSS
  • 46. Ways to use CSS <head>! <link rel="stylesheet"โ€จ type="text/css" href=โ€œstyle.css">! </head> External Style Sheet reference
  • 47. Ways to use CSS <head>! <link rel="stylesheet"โ€จ type="text/css" href=โ€œstyle.css">! </head> External Style Sheet reference p {color:red;} style.css
  • 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. 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
  • 51. CSS Lists โ€ข In HTML, there are two types of lists:
  • 52. CSS Lists โ€ข In HTML, there are two types of lists: โ€ข unordered lists - the list items are marked with bullets
  • 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
  • 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
  • 55. 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
  • 57. CSS Margin โ€ข Margin is the space around elements (outside the border).
  • 58. CSS Margin โ€ข Margin is the space around elements (outside the border). โ€ข The margin does not have a background color, and is completely transparent.
  • 59. 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.
  • 64. CSS Padding โ€ข Padding is the space between the element border and the element content
  • 65. 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.
  • 67. {padding:25px 50px 75px 100px;} CSS Padding
  • 68. {padding:25px 50px 75px 100px;} CSS Padding 25px 50px 75px 100px
  • 69. CSS Padding & Margin
  • 70. CSS Padding & Margin
  • 71. CSS Padding & Margin
  • 72. CSS Padding & Margin {padding:25px 50px 75px 100px;}
  • 73. {margin:25px 50px 75px 100px;} CSS Padding & Margin {padding:25px 50px 75px 100px;}
  • 75. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text.
  • 76. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed
  • 77. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed โ€ข font-family Speci๏ฌes the font family for text
  • 78. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed โ€ข font-family Speci๏ฌes the font family for text โ€ข font-size Speci๏ฌes the font size of text
  • 79. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed โ€ข font-family Speci๏ฌes the font family for text โ€ข font-size Speci๏ฌes the font size of text โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or italic)
  • 80. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed โ€ข font-family Speci๏ฌes the font family for text โ€ข font-size Speci๏ฌes the font size of text โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or italic) โ€ข font-variant Speci๏ฌes if text should be small-caps
  • 81. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed โ€ข font-family Speci๏ฌes the font family for text โ€ข font-size Speci๏ฌes the font size of text โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or italic) โ€ข font-variant Speci๏ฌes if text should be small-caps โ€ข font-weight Speci๏ฌes the weight of a font
  • 82. CSS Fonts โ€ข CSS font properties de๏ฌne the font family, boldness, size, and the style of a text. โ€ข Not all computers have the same fonts installed โ€ข font-family Speci๏ฌes the font family for text โ€ข font-size Speci๏ฌes the font size of text โ€ข font-style Speci๏ฌes the font style for text (e.g. normal or italic) โ€ข font-variant Speci๏ฌes if text should be small-caps โ€ข font-weight Speci๏ฌes the weight of a font โ€ข font Sets all the font properties in one declaration
  • 84. CSS Fonts Serif Times New Roman, Georgia
  • 85. CSS Fonts Serif Times New Roman, Georgia Sans-serif Arial, Verdana
  • 86. CSS Fonts Serif Times New Roman, Georgia Sans-serif Arial, Verdana Monospace Courier New, Lucida Console
  • 88. CSS Text โ€ข color sets the color of text
  • 89. CSS Text โ€ข color sets the color of text โ€ข letter-spacing adjusts the space between characters
  • 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
  • 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 speci๏ฌes the decoration
  • 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 speci๏ฌes the decoration โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line
  • 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 speci๏ฌes the decoration โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line โ€ข text-shadow speci๏ฌes the shadow e๏ฌ€ect
  • 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 speci๏ฌes the decoration โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line โ€ข text-shadow speci๏ฌes the shadow e๏ฌ€ect โ€ข text-transform controls the capitalization of text
  • 95. 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 speci๏ฌes the decoration โ€ข text-indent speci๏ฌes the indentation of the ๏ฌrst line โ€ข text-shadow speci๏ฌes the shadow e๏ฌ€ect โ€ข text-transform controls the capitalization of text โ€ข word-spacing changes the space between words
  • 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. CSS Text
  • 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;} CSS Text
  • 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;} CSS Text
  • 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. 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. 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
  • 103. CSS Pseudo-classes โ€ข CSS pseudo-classes are used to select the current condition of an element.
  • 104. CSS Pseudo-classes โ€ข CSS pseudo-classes are used to select the current condition of an element. โ€ข The most common pseudo-classes are links
  • 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 di๏ฌ€erently depending on what state they are in.
  • 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 di๏ฌ€erently depending on what state they are in. โ€ข a:link Selects an unvisited link
  • 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 di๏ฌ€erently depending on what state they are in. โ€ข a:link Selects an unvisited link โ€ข a:visited Selects visited links
  • 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 di๏ฌ€erently depending on what state they are in. โ€ข a:link Selects an unvisited link โ€ข a:visited Selects visited links โ€ข a:active Selects the active link
  • 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 di๏ฌ€erently 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
  • 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 di๏ฌ€erently 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 ๏ฌrst letter of a paragraph
  • 111. 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 di๏ฌ€erently 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 ๏ฌrst letter of a paragraph โ€ข p::first-line Selects the ๏ฌrst line of a paragraph
  • 113. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects of an element.
  • 114. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects of an element. โ€ข background-color sets the background color of an element
  • 115. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects of an element. โ€ข background-color sets the background color of an element โ€ข background-image sets the background image for an element
  • 116. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects 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
  • 117. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects 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 ๏ฌxed or scrolls with the rest of the page
  • 118. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects 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 ๏ฌxed or scrolls with the rest of the page โ€ข background-position sets the starting position of a background image
  • 119. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects 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 ๏ฌxed 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. CSS Background โ€ข CSS background properties are used to de๏ฌne the background e๏ฌ€ects 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 ๏ฌxed 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
  • 122. CSS Positioning โ€ข The CSS positioning properties allow you to position an element.
  • 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.
  • 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
  • 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
  • 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.
  • 127. 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.
  • 137. CSS Float โ€ข With CSS ๏ฌ‚oat, an element can be pushed to the left or right, allowing other elements to wrap around it.
  • 138. CSS Float โ€ข With CSS ๏ฌ‚oat, an element can be pushed to the left or right, allowing other elements to wrap around it. โ€ข clear Speci๏ฌes which sides of an element where other ๏ฌ‚oating elements are not allowed.
  • 139. CSS Float โ€ข With CSS ๏ฌ‚oat, an element can be pushed to the left or right, allowing other elements to wrap around it. โ€ข clear Speci๏ฌes which sides of an element where other ๏ฌ‚oating elements are not allowed. โ€ข float Speci๏ฌes whether or not a box should ๏ฌ‚oat to the left or right.
  • 143. img {float:none;} img {float:left;} img {float:right;} CSS Float
  • 144. 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
  • 145. 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
  • 146. 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
  • 147. CSS Display and Visibility
  • 148. CSS Display and Visibility โ€ข The display property speci๏ฌes if/how an element is displayed, and the visibility property speci๏ฌes if an element should be visible or hidden.
  • 149. CSS Display and Visibility โ€ข The display property speci๏ฌes if/how an element is displayed, and the visibility property speci๏ฌes if an element should be visible or hidden. โ€ข visibility:hidden hides an element, but it will still take up the same space as before.
  • 150. CSS Display and Visibility โ€ข The display property speci๏ฌes if/how an element is displayed, and the visibility property speci๏ฌes 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.
  • 151. CSS Display and Visibility โ€ข The display property speci๏ฌes if/how an element is displayed, and the visibility property speci๏ฌes 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.
  • 152. CSS Display and Visibility โ€ข The display property speci๏ฌes if/how an element is displayed, and the visibility property speci๏ฌes 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
  • 153. CSS Image Opacity / Transparency
  • 154. CSS Image Opacity / Transparency โ€ข The CSS3 property for transparency is opacity.
  • 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.
  • 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;}
  • 157. 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;}
  • 158. 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;}
  • 160. CSS Image Sprites โ€ข An image sprite is a collection of images put into a single image.
  • 161. 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.
  • 162. 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.
  • 164. CSS Media Types โ€ข By using the @media rule, a website can have a di๏ฌ€erent layout for screen, print, mobile phone, tablet, etc.
  • 165. CSS Media Types โ€ข By using the @media rule, a website can have a di๏ฌ€erent layout for screen, print, mobile phone, tablet, etc. โ€ข all Used for all media type devices
  • 166. CSS Media Types โ€ข By using the @media rule, a website can have a di๏ฌ€erent layout for screen, print, mobile phone, tablet, etc. โ€ข all Used for all media type devices โ€ข braille Used for braille tactile feedback devices
  • 167. CSS Media Types โ€ข By using the @media rule, a website can have a di๏ฌ€erent 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
  • 168. CSS Media Types โ€ข By using the @media rule, a website can have a di๏ฌ€erent 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
  • 169. CSS Media Types โ€ข By using the @media rule, a website can have a di๏ฌ€erent 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
  • 172. โ€ข SASS stands for Syntactically Awesome Style Sheets What is SASS?
  • 173. โ€ข SASS stands for Syntactically Awesome Style Sheets โ€ข Sass is a CSS preprocessor What is SASS?
  • 174. โ€ข 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?
  • 175. โ€ข SASS stands for Syntactically Awesome Style Sheets โ€ข Sass is a CSS preprocessor โ€ข Sass can be written in either the sass or scss syntax โ€ข Sass ๏ฌles compile into css ๏ฌles What is SASS?
  • 176. Why do we use SASS?
  • 177. โ€ข CSS doesnโ€™t allow variables Why do we use SASS?
  • 178. โ€ข CSS doesnโ€™t allow variables โ€ข SASS uses mixins (reusable blocks of styles) Why do we use SASS?
  • 179. โ€ข CSS doesnโ€™t allow variables โ€ข SASS uses mixins (reusable blocks of styles) โ€ข SASS is faster, more e๏ฌƒcient, and easier to maintain Why do we use SASS?
  • 180. โ€ข CSS doesnโ€™t allow variables โ€ข SASS uses mixins (reusable blocks of styles) โ€ข SASS is faster, more e๏ฌƒcient, 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?
  • 181. SCSS Syntax $yellow: #9d9624; Variable name Value Mixin Extend
  • 182. SCSS Syntax $yellow: #9d9624; Variable name Value body {@include my-background;} Mixin Extend
  • 183. SCSS Syntax $yellow: #9d9624; Variable name Value body {@include my-background;} h1 {@extend %my-background;} Mixin Extend
  • 186. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS
  • 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. 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
  • 189. 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
  • 190. 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
  • 192. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } De๏ฌne the placeholder selector
  • 193. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } De๏ฌne the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  • 194. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } De๏ฌne the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  • 195. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } De๏ฌne the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  • 197. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } De๏ฌne the mixin
  • 198. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } De๏ฌne the mixin .box {@include my-background(12px);} Include the mixin
  • 199. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } De๏ฌne the mixin .box {@include my-background(12px);} Include the mixin
  • 200. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } De๏ฌne the mixin .box {@include my-background(12px);} Include the mixin
  • 203. Mixin or Extend .box,.footer {@include my-background(12px);}
  • 204. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments
  • 205. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments .box,.footer {@extend %my-background;}
  • 206. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments .box,.footer {@extend %my-background;} Smaller CSS