intro to css & sass

An introduction to

CSS & SASS

What is HTML?

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

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?

CSS Syntax

CSS Syntax

html

Selector

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

• 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


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

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

Ways to use CSS

<head>! <link rel="stylesheet" type="text/css" href=“style.css">!</head>

External Style Sheet reference

Ways to use CSS



p {color:red;}

style.css

Ways to use CSS



Some TextResult

p {color:red;}

style.css

CSS Lists

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


• unordered lists - the list items are marked with

bullets



bullets• ordered lists - the list items are marked with

numbers or letters




numbers or letters

• Fusce cursus ante a sem egestas. • Maecenas at lectus vitae libero • Mauris lobortis enim vitae • scelerisque. • Aliquam adipiscing tellus

unordered list




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


border).• The margin does not have a background color,

and is completely transparent.


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


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)






italic)

• font-variant Specifies if text should be small-caps






italic)


• font-weight Specifies the weight of a font






italic)


• 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


Sans-serif Arial, Verdana

CSS Fonts


Sans-serif Arial, Verdana

Monospace Courier New, Lucida Console

CSS 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







• 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• CSS pseudo-classes are used to select the current condition of

an element.


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


an element.• The most common pseudo-classes are links • Links can be styled differently depending on what state they

are in.



are in.

• a:link Selects an unvisited link



are in.


• a:visited Selects visited links



are in.



• a:active Selects the active link



are in.




• a:hover Selects links on mouse over



are in.





• p::first-letter Selects the first letter of a paragraph



are in.





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



• 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






repeated

• background-attachment sets whether a background image is

fixed or scrolls with the rest of the page






repeated



• background-position sets the starting position of a background

image






repeated



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


element.

• Elements can be positioned using the top, bottom, left, and

right properties.


element.


right properties.

• position:static is the default position of an element


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


element.


right properties.




• position:relative tells an element to be positioned relative to

its normal position.


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.

CSS Positioning

{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

CSS Float• With CSS float, an element can be pushed to the

left or right, allowing other elements to wrap

around it.



around it.

• clear Specifies which sides of an element where

other floating elements are not allowed.



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;}


• 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

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.



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 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.1;} {opacity:0.5;}




{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 Media Types

CSS Media Types• By using the @media rule, a website can have a

different layout for screen, print, mobile phone,

tablet, etc.



tablet, etc.

• all Used for all media type devices



tablet, etc.


• braille Used for braille tactile feedback devices



tablet, etc.



• print Used for printers



tablet, etc.




• screen Used for computer screens



tablet, etc.




• screen Used for computer screens

• tv Used for television-type devices

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

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

Mixin or Extend

?

Mixin or Extend

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

Resources• www.w3schools.com/css

http://www.w3schools.com/css

http://css-tricks.com/

http://alistapart.com/

http://thesassway.com/

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?

[email protected]

mailto:[email protected]

intro to css & sass

Design

css css

css lists

html elements css

css selectors css selectors

css sass

css margin margin

types of css selectors

html stands