Intro to css & sass

• HTML stands for Hyper Text Markup Language
What is HTML?

• HTML is a markup language
What is HTML?

• HTML is a markup language
• HTML documents contain HTML tags and plain text
What is HTML?

• CSS stands for Cascading Style Sheets
What is CSS?

• Styles deﬁne how to display HTML elements
What is CSS?

• Styles deﬁne how to display HTML elements
• CSS can solve many design problems without
adding images or changing the HTML
What is CSS?

CSS Syntax
html
Selector
{margin:0; padding:0}
Declaration Declaration

CSS Syntax
html
Selector
PropertyProperty

CSS Syntax
html
Selector
ValueValue PropertyProperty

CSS Syntax
html
Selector
body {background-color:#d20c0c;}

CSS Syntax
html
Selector
body {background-color:#d20c0c;}
h1 {font-size:12px;}

CSS Selectors
• CSS selectors allow you to select and manipulate
HTML element(s).

CSS Selectors
• CSS selectors allow you to select and manipulate
HTML element(s).
• CSS selectors are used to "ﬁnd" (or select) HTML
elements based on their id, classes, types,
attributes, and more.

Types of CSS Selectors
• The element Selector selects elements based on the
element name. (e.g. body, header, p, footer)

• The id Selector selects a speciﬁc element on the page and
can only be used once (e.g. #main, #content, #footer)

• The id Selector selects a speciﬁc element on the page and
can only be used once (e.g. #main, #content, #footer)
• The class Selector selects elements with the speciﬁc class
names and cans be reused
(e.g. .wrapper, .column, .panel, .panel-pane)

Ways to use CSS
• CSS can be attached to HTML in 3 ways
• Inline (wysiwyg for example)
• Embedded (wysiwyg for example)
• Links CSS ﬁles (the preferred method)

Ways to use CSS
<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
<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>!
<link rel="stylesheet" 
type="text/css" href=“style.css">!
</head>
External Style Sheet reference

Ways to use CSS
<head>!
</head>
p {color:red;}
style.css

Ways to use CSS
<head>!
</head>
Some Text
Result
p {color:red;}
style.css

CSS Lists
• In HTML, there are two types of lists:

CSS Lists
• unordered lists - the list items are marked with
bullets

CSS Lists
bullets
• ordered lists - the list items are marked with
numbers or letters

CSS Lists
bullets
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
bullets
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
• Margin is the space around elements (outside the
border).

CSS Margin
border).
• The margin does not have a background color,
and is completely transparent.

CSS Margin
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
{margin:25px 50px 75px 100px;}

25px
50px
75px
100px
CSS Margin

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.

{padding:25px 50px 75px 100px;}
CSS Padding

CSS Padding
25px
50px
75px
100px

CSS Padding & Margin

CSS Fonts
• CSS font properties deﬁne the font family, boldness, size,
and the style of a text.

CSS Fonts
• Not all computers have the same fonts installed

CSS Fonts
• font-family Speciﬁes the font family for text

CSS Fonts
• font-size Speciﬁes the font size of text

CSS Fonts
• font-style Speciﬁes the font style for text (e.g. normal or
italic)

CSS Fonts
italic)
• font-variant Speciﬁes if text should be small-caps

CSS Fonts
italic)
• font-weight Speciﬁes the weight of a font

CSS Fonts
italic)
• font-weight Speciﬁes the weight of a font
• font Sets all the font properties in one declaration

CSS Fonts
Serif Times New Roman, Georgia

CSS Fonts
Sans-serif Arial, Verdana

CSS Fonts
Sans-serif Arial, Verdana
Monospace Courier New, Lucida Console

CSS Text
• color sets the color of text

CSS Text
• letter-spacing adjusts the space between characters

CSS Text
• line-height sets the distance between lines of text

CSS Text
• text-decoration speciﬁes the decoration

CSS Text
• text-indent speciﬁes the indentation of the ﬁrst line

CSS Text
• text-shadow speciﬁes the shadow eﬀect

CSS Text
• text-transform controls the capitalization of text

CSS Text
• 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

p {font-family:Georgia Times serif;}
CSS Text

a {color:$blue; text-decoration:underline;}
CSS Text

a {color:$blue; text-decoration:underline;}
.quote {color:$red; font-style:italic;}
CSS Text

CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.

CSS Pseudo-classes
an element.
• The most common pseudo-classes are links

CSS Pseudo-classes
an element.
• Links can be styled diﬀerently depending on what state they
are in.

CSS Pseudo-classes
an element.
are in.
• a:link Selects an unvisited link

CSS Pseudo-classes
an element.
are in.
• a:visited Selects visited links

CSS Pseudo-classes
an element.
are in.
• a:active Selects the active link

CSS Pseudo-classes
an element.
are in.
• a:hover Selects links on mouse over

CSS Pseudo-classes
an element.
are in.
• p::first-letter Selects the ﬁrst letter of a paragraph

CSS Pseudo-classes
an element.
are in.
• p::first-letter Selects the ﬁrst letter of a paragraph
• p::first-line Selects the ﬁrst line of a paragraph

CSS Background
• CSS background properties are used to deﬁne the background
eﬀects of an element.

CSS Background
• background-color sets the background color of an element

CSS Background
• background-image sets the background image for an element

CSS Background
• background-repeat sets how a background image will be
repeated

CSS Background
repeated
• background-attachment sets whether a background image is
ﬁxed or scrolls with the rest of the page

CSS Background
repeated
• background-position sets the starting position of a background
image

CSS Background
repeated
• background-position sets the starting position of a background
image
• background sets all the background properties in one declaration

CSS Positioning
• The CSS positioning properties allow you to position an
element.

CSS Positioning
element.
• Elements can be positioned using the top, bottom, left, and
right properties.

CSS Positioning
element.
right properties.
• position:static is the default position of an element

CSS Positioning
element.
right properties.
• 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
element.
right properties.
• position:relative tells an element to be positioned relative to
its normal position.

CSS Positioning
element.
right properties.
• 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.

{position:static;}
{position:static;}

{position:static;}
{position:static;}
{position:fixed;}
{position:static;}

{position:relative;}
{position:absolute;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}

CSS Float
• With CSS ﬂoat, an element can be pushed to the
left or right, allowing other elements to wrap
around it.

CSS Float
around it.
• clear Speciﬁes which sides of an element where
other ﬂoating elements are not allowed.

CSS Float
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.

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;}
• 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;}
CSS Float

img {float:none;}
img {float:left;}
img {float:right;}
CSS Float

CSS Display and Visibility
• The display property speciﬁes if/how an element is displayed,
and the visibility property speciﬁes if an element should be
visible or hidden.

visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.

visible or hidden.
• display:none hides an element, and it will not take up any
space.

visible or hidden.
space.
• display:inline tells an element to only take up as much
width as necessary, and will not force line breaks.

visible or hidden.
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

• 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.

transparent.
{opacity:0.1;}

transparent.
{opacity:0.1;} {opacity:0.5;}

transparent.
{opacity:0.1;} {opacity:0.5;} {opacity:1.0;}

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 Media Types
• By using the @media rule, a website can have a
diﬀerent layout for screen, print, mobile phone,
tablet, etc.

CSS Media Types
tablet, etc.
• all Used for all media type devices

CSS Media Types
tablet, etc.
• braille Used for braille tactile feedback devices

CSS Media Types
tablet, etc.
• print Used for printers

CSS Media Types
tablet, etc.
• screen Used for computer screens

CSS Media Types
tablet, etc.
• screen Used for computer screens
• tv Used for television-type devices

• SASS stands for Syntactically Awesome Style Sheets
What is SASS?

• Sass is a CSS preprocessor
What is SASS?

• Sass can be written in either the sass or scss syntax
What is SASS?

• Sass can be written in either the sass or scss syntax
• Sass ﬁles compile into css ﬁles
What is SASS?

• CSS doesn’t allow variables
Why do we use SASS?

• SASS uses mixins (reusable blocks of styles)
Why do we use SASS?

• SASS is faster, more eﬃcient, and easier to maintain
Why do we use SASS?

• SASS is faster, more eﬃcient, and easier to maintain
• Using COMPASS with SASS allows us to write many lines
of cross-browser compatible CSS in a single line of code!
Why do we use SASS?

SCSS Syntax
$yellow: #9d9624;
Variable name Value
Mixin
Extend

SCSS Syntax
$yellow: #9d9624;
Variable name Value
body {@include my-background;}
Mixin
Extend

SCSS Syntax
$yellow: #9d9624;
Variable name Value
body {@include my-background;}
h1 {@extend %my-background;}
Mixin
Extend

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

SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
Deﬁne the placeholder selector

SASS Extend
%my-background {!
margin-top: 12px;!
height: 10px;!
background: red;!
border: 1px solid $yellow;!
}
Deﬁne the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector

SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
Deﬁne the mixin

SASS Mixins
@mixin my-background($radius) {!
margin-top: 12px;!
height: 10px;!
background: red;!
border-radius: $radius;!
}
Deﬁne the mixin
.box {@include my-background(12px);}
Include the mixin

Mixin or Extend
.box,.footer {@include my-background(12px);}

Mixin or Extend
Arguments

Mixin or Extend
Arguments
.box,.footer {@extend %my-background;}

Mixin or Extend
Arguments
.box,.footer {@extend %my-background;}
Smaller CSS

Resources
• www.w3schools.com/css

Resources
• css-tricks.com

Resources
• css-tricks.com
• alistapart.com

Resources
• css-tricks.com
• alistapart.com
• thesassway.com

Thank You!
Questions?
sean@zivtech.com

Intro to css & sass

In this document

More Related Content

What's hot

Viewers also liked

Similar to Intro to css & sass

Recently uploaded

Intro to css & sass