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 define how to display HTML elements
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• CSS can solve many design problems without
adding images or changing the HTML
What is CSS?
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 "find" (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 specific 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 specific element on the page and
can only be used once (e.g. #main, #content, #footer)
• The class Selector selects elements with the specific class
names and cans be reused
(e.g. .wrapper, .column, .panel, .panel-pane)
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 files (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 define the font family, boldness, size,
and the style of a text.
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
• font-weight Specifies the weight of a font
CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
• font-weight Specifies the weight of a font
• font Sets all the font properties in one declaration
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 specifies 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 specifies the decoration
• text-indent specifies the indentation of the first 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 specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
• text-transform controls the capitalization of text
CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
• text-transform controls the capitalization of text
• word-spacing changes the space between words
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 differently 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 differently 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 differently 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 differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
• a:hover Selects links on mouse over
CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
• a:hover Selects links on mouse over
• p::first-letter Selects the first letter of a paragraph
CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
• a:hover Selects links on mouse over
• p::first-letter Selects the first letter of a paragraph
• p::first-line Selects the first line of a paragraph
CSS Background
CSS Background
• CSS background properties are used to define the background
effects of an element.
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
• background-position sets the starting position of a background
image
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
• background-position sets the starting position of a background
image
• background sets all the background properties in one declaration
CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
• background-position sets the starting position of a background
image
• background sets all the background properties in one declaration
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 float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
CSS Float
• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
• clear Specifies which sides of an element where
other floating elements are not allowed.
CSS Float
• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
• clear Specifies which sides of an element where
other floating elements are not allowed.
• float Specifies whether or not a box should float
to the left or right.
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 specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
• display:none hides an element, and it will not take up any
space.
CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
• display:none hides an element, and it will not take up any
space.
• display:inline tells an element to only take up as much
width as necessary, and will not force line breaks.
CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
• display:none hides an element, and it will not take up any
space.
• display:inline tells an element to only take up as much
width as necessary, and will not force line breaks.
• display:block tells an element will takes up the full width
available, and will have a line break before and after it
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
different layout for screen, print, mobile phone,
tablet, etc.
CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
• print Used for printers
CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
• print Used for printers
• screen Used for computer screens
CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
• print Used for printers
• screen Used for computer screens
• tv Used for television-type devices
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 files compile into css files
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 efficient, 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 efficient, and easier to maintain
• Using COMPASS with SASS allows us to write many lines
of cross-browser compatible CSS in a single line of code!
Why do we use SASS?
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;!
}
Define the placeholder selector
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
Define the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
Define the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
Define the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
SASS Mixins
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
Define the mixin
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
Define the mixin
.box {@include my-background(12px);}
Include the mixin
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
Define the mixin
.box {@include my-background(12px);}
Include the mixin
SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
Define the mixin
.box {@include my-background(12px);}
Include the mixin
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

More Related Content

What's hot (20)

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
 
성장을 좋아하는 사람이, 성장하고 싶은 사람에게
성장을 좋아하는 사람이, 성장하고 싶은 사람에게성장을 좋아하는 사람이, 성장하고 싶은 사람에게
성장을 좋아하는 사람이, 성장하고 싶은 사람에게
Seongyun Byeon
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
 
One step in the future: CSS variables
One step in the future: CSS variablesOne step in the future: CSS variables
One step in the future: CSS variables
Giacomo Zinetti
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
Mind IT Systems
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
Reed Crouch
 
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMA story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Frans Rosén
 
Vi Cheat Sheet v 1 00
Vi Cheat Sheet v 1 00Vi Cheat Sheet v 1 00
Vi Cheat Sheet v 1 00
Nicole Cordes
 
Less presentation
Less presentationLess presentation
Less presentation
Todd Shelton
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
DSpace 4.2 Transmission: Import/Export
DSpace 4.2 Transmission: Import/ExportDSpace 4.2 Transmission: Import/Export
DSpace 4.2 Transmission: Import/Export
DuraSpace
 
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
 
Css
CssCss
Css
Hemant Saini
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB DayAmazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Web Services Korea
 
Bootstrap
BootstrapBootstrap
Bootstrap
AvinashChunduri2
 
CSS Grid vs. Flexbox
CSS Grid vs. FlexboxCSS Grid vs. Flexbox
CSS Grid vs. Flexbox
Ecaterina Moraru (Valica)
 
JCR - Java Content Repositories
JCR - Java Content RepositoriesJCR - Java Content Repositories
JCR - Java Content Repositories
Carsten Ziegeler
 
elasticsearch_적용 및 활용_정리
elasticsearch_적용 및 활용_정리elasticsearch_적용 및 활용_정리
elasticsearch_적용 및 활용_정리
Junyi Song
 
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
 
성장을 좋아하는 사람이, 성장하고 싶은 사람에게
성장을 좋아하는 사람이, 성장하고 싶은 사람에게성장을 좋아하는 사람이, 성장하고 싶은 사람에게
성장을 좋아하는 사람이, 성장하고 싶은 사람에게
Seongyun Byeon
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
 
One step in the future: CSS variables
One step in the future: CSS variablesOne step in the future: CSS variables
One step in the future: CSS variables
Giacomo Zinetti
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
Mind IT Systems
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
Reed Crouch
 
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMA story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Frans Rosén
 
Vi Cheat Sheet v 1 00
Vi Cheat Sheet v 1 00Vi Cheat Sheet v 1 00
Vi Cheat Sheet v 1 00
Nicole Cordes
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
DSpace 4.2 Transmission: Import/Export
DSpace 4.2 Transmission: Import/ExportDSpace 4.2 Transmission: Import/Export
DSpace 4.2 Transmission: Import/Export
DuraSpace
 
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
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB DayAmazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Web Services Korea
 
JCR - Java Content Repositories
JCR - Java Content RepositoriesJCR - Java Content Repositories
JCR - Java Content Repositories
Carsten Ziegeler
 
elasticsearch_적용 및 활용_정리
elasticsearch_적용 및 활용_정리elasticsearch_적용 및 활용_정리
elasticsearch_적용 및 활용_정리
Junyi Song
 

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
 
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
SassSass
Sass
Tayseer_Emam
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
 
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
 
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
 
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
 

Similar to Intro to css & sass (20)

CSS
CSSCSS
CSS
DivyaKS12
 
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptxChapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
eyasu6
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
M Ashraful Islam Jewel
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Seble Nigussie
 
CSS
CSSCSS
CSS
People Strategists
 
css3.0.( Cascading Style Sheets ) pptx
css3.0.( Cascading  Style  Sheets ) pptxcss3.0.( Cascading  Style  Sheets ) pptx
css3.0.( Cascading Style Sheets ) pptx
neelkamal72809
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
Nosheen Qamar
 
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptxUnitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
VikasTuwar1
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
Jalpesh Vasa
 
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdfcascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
hinalsomani93
 
Css
CssCss
Css
actacademy
 
Css
CssCss
Css
actacademy
 
Css
CssCss
Css
NIRMAL FELIX
 
05. session 05 introducing css
05. session 05   introducing css05. session 05   introducing css
05. session 05 introducing css
Phúc Đỗ
 
Css
CssCss
Css
Abhishek Kesharwani
 
Css
CssCss
Css
Yudha Arif Budiman
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptxChapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
eyasu6
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
css3.0.( Cascading Style Sheets ) pptx
css3.0.( Cascading  Style  Sheets ) pptxcss3.0.( Cascading  Style  Sheets ) pptx
css3.0.( Cascading Style Sheets ) pptx
neelkamal72809
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
Nosheen Qamar
 
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptxUnitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
VikasTuwar1
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
Jalpesh Vasa
 
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdfcascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
hinalsomani93
 
05. session 05 introducing css
05. session 05   introducing css05. session 05   introducing css
05. session 05 introducing css
Phúc Đỗ
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 

Recently uploaded (20)

IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]
Ayesha khan
 
Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]
Designer
 
Seven Park Residences, Hallandale Beach.
Seven Park Residences, Hallandale Beach.Seven Park Residences, Hallandale Beach.
Seven Park Residences, Hallandale Beach.
TAMZ
 
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]
Designer
 
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
Yahoo
 
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Yahoo
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
Yahoo
 
Service Design.. staging and Change management
Service Design.. staging and Change managementService Design.. staging and Change management
Service Design.. staging and Change management
sdnswitzerland
 
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]FontLab 7.2.0.7608 with Crack Free Download [Latest Version]
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]
Yahoo
 
Errors and error rates: workshop for X-Gov content clubpptx
Errors and error rates: workshop for X-Gov content clubpptxErrors and error rates: workshop for X-Gov content clubpptx
Errors and error rates: workshop for X-Gov content clubpptx
Caroline Jarrett
 
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]
Designer
 
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]
Designer
 
Service Design in Zürich's city government
Service Design in Zürich's city governmentService Design in Zürich's city government
Service Design in Zürich's city government
sdnswitzerland
 
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]
Yahoo
 
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Yantram Animation Studio Corporation
 
OntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptxOntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptx
Jessica DuVerneay
 
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWoheeHot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
boheewohee
 
Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025
Google
 
Security Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free DownloadSecurity Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free Download
Software
 
IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]
Ayesha khan
 
Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]
Designer
 
Seven Park Residences, Hallandale Beach.
Seven Park Residences, Hallandale Beach.Seven Park Residences, Hallandale Beach.
Seven Park Residences, Hallandale Beach.
TAMZ
 
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]
Designer
 
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
Yahoo
 
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Yahoo
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
Yahoo
 
Service Design.. staging and Change management
Service Design.. staging and Change managementService Design.. staging and Change management
Service Design.. staging and Change management
sdnswitzerland
 
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]FontLab 7.2.0.7608 with Crack Free Download [Latest Version]
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]
Yahoo
 
Errors and error rates: workshop for X-Gov content clubpptx
Errors and error rates: workshop for X-Gov content clubpptxErrors and error rates: workshop for X-Gov content clubpptx
Errors and error rates: workshop for X-Gov content clubpptx
Caroline Jarrett
 
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]
Designer
 
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]
Designer
 
Service Design in Zürich's city government
Service Design in Zürich's city governmentService Design in Zürich's city government
Service Design in Zürich's city government
sdnswitzerland
 
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]
Yahoo
 
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Yantram Animation Studio Corporation
 
OntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptxOntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptx
Jessica DuVerneay
 
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWoheeHot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
boheewohee
 
Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025
Google
 
Security Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free DownloadSecurity Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free Download
Software
 

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 define how to display HTML elements What is CSS?
  • 11. • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • CSS can solve many design problems without adding images or changing the HTML What is CSS?
  • 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 "find" (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 specific 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 specific element on the page and can only be used once (e.g. #main, #content, #footer) • The class Selector selects elements with the specific class names and cans be reused (e.g. .wrapper, .column, .panel, .panel-pane)
  • 36. Ways to use CSS • CSS can be attached to HTML in 3 ways • Inline (wysiwyg for example) • Embedded (wysiwyg for example) • Links CSS files (the preferred method)
  • 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 define the font family, boldness, size, and the style of a text.
  • 76. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed
  • 77. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text
  • 78. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text
  • 79. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic)
  • 80. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic) • font-variant Specifies if text should be small-caps
  • 81. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic) • font-variant Specifies if text should be small-caps • font-weight Specifies the weight of a font
  • 82. CSS Fonts • CSS font properties define the font family, boldness, size, and the style of a text. • Not all computers have the same fonts installed • font-family Specifies the font family for text • font-size Specifies the font size of text • font-style Specifies the font style for text (e.g. normal or italic) • font-variant Specifies if text should be small-caps • font-weight Specifies the weight of a font • font Sets all the font properties in one declaration
  • 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 specifies 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 specifies the decoration • text-indent specifies the indentation of the first 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 specifies the decoration • text-indent specifies the indentation of the first line • text-shadow specifies the shadow effect
  • 94. CSS Text • color sets the color of text • letter-spacing adjusts the space between characters • line-height sets the distance between lines of text • text-decoration specifies the decoration • text-indent specifies the indentation of the first line • text-shadow specifies the shadow effect • text-transform controls the capitalization of text
  • 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 specifies the decoration • text-indent specifies the indentation of the first line • text-shadow specifies the shadow effect • text-transform controls the capitalization of text • word-spacing changes the space between words
  • 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 differently 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 differently 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 differently 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 differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link
  • 109. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link • a:hover Selects links on mouse over
  • 110. CSS Pseudo-classes • CSS pseudo-classes are used to select the current condition of an element. • The most common pseudo-classes are links • Links can be styled differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link • a:hover Selects links on mouse over • p::first-letter Selects the first letter of a paragraph
  • 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 differently depending on what state they are in. • a:link Selects an unvisited link • a:visited Selects visited links • a:active Selects the active link • a:hover Selects links on mouse over • p::first-letter Selects the first letter of a paragraph • p::first-line Selects the first line of a paragraph
  • 113. CSS Background • CSS background properties are used to define the background effects of an element.
  • 114. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element
  • 115. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element
  • 116. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated
  • 117. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page
  • 118. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page • background-position sets the starting position of a background image
  • 119. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page • background-position sets the starting position of a background image • background sets all the background properties in one declaration
  • 120. CSS Background • CSS background properties are used to define the background effects of an element. • background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be repeated • background-attachment sets whether a background image is fixed or scrolls with the rest of the page • background-position sets the starting position of a background image • background sets all the background properties in one declaration
  • 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 float, an element can be pushed to the left or right, allowing other elements to wrap around it.
  • 138. CSS Float • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. • clear Specifies which sides of an element where other floating elements are not allowed.
  • 139. CSS Float • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. • clear Specifies which sides of an element where other floating elements are not allowed. • float Specifies whether or not a box should float to the left or right.
  • 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 specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
  • 149. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before.
  • 150. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before. • display:none hides an element, and it will not take up any space.
  • 151. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before. • display:none hides an element, and it will not take up any space. • display:inline tells an element to only take up as much width as necessary, and will not force line breaks.
  • 152. CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. • visibility:hidden hides an element, but it will still take up the same space as before. • display:none hides an element, and it will not take up any space. • display:inline tells an element to only take up as much width as necessary, and will not force line breaks. • display:block tells an element will takes up the full width available, and will have a line break before and after it
  • 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 different layout for screen, print, mobile phone, tablet, etc.
  • 165. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices
  • 166. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices
  • 167. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices • print Used for printers
  • 168. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices • print Used for printers • screen Used for computer screens
  • 169. CSS Media Types • By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc. • all Used for all media type devices • braille Used for braille tactile feedback devices • print Used for printers • screen Used for computer screens • tv Used for television-type devices
  • 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 files compile into css files 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 efficient, 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 efficient, and easier to maintain • Using COMPASS with SASS allows us to write many lines of cross-browser compatible CSS in a single line of code! Why do we use SASS?
  • 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;! } Define the placeholder selector
  • 193. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  • 194. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  • 195. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } Define the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
  • 197. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin
  • 198. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin .box {@include my-background(12px);} Include the mixin
  • 199. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin .box {@include my-background(12px);} Include the mixin
  • 200. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } Define the mixin .box {@include my-background(12px);} Include the mixin
  • 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