intro to css & sass
Post on 15-Jan-2015
178 Views
Preview:
DESCRIPTION
TRANSCRIPT
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)
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 TextResult
Ways to use CSS
<p style=“color:red;”>Some Text</p>
Inline Styles
Some TextResult
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 TextResult
Ways to use CSS
<head>! <style>p {color:red;}</style>!</head>
Embedded Styles
Some TextResult
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 TextResult
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 TextResult
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
{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
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
top related