CSCI 2133 Rapid Programming Techniques for Innovation CSS, CSS3, - - PowerPoint PPT Presentation

▶
csci 2133 rapid programming techniques for innovation
SMART_READER_LITE
LIVE PREVIEW

CSCI 2133 Rapid Programming Techniques for Innovation CSS, CSS3, - - PowerPoint PPT Presentation

Nov 25, 2022 38 likes •1.38k views

CSCI 2133 Rapid Programming Techniques for Innovation CSS, CSS3, SASS/SCSS CSCI 2133 2 Previous Lecture HTTP 1/2 HTML / HTML5 CSCI 2133 H T M L 5O V E R V I E W HTML5 is the new standard, which includes: New HT

slide-1
SLIDE 1

CSCI 2133

CSCI 2133 – Rapid Programming Techniques for Innovation

CSS, CSS3, SASS/SCSS

slide-2
SLIDE 2

CSCI 2133

Previous Lecture

  • HTTP 1/2
  • HTML / HTML5

2

slide-3
SLIDE 3

CSCI 2133

H T M L 5O V E R V I E W

HTML5 is the new standard, which includes:

◉ New HT ML elements and attributes ◉ Full C S S 3 Support ◉ Video and audio elements ◉ 2D/3D graphics ◉ Local storage ◉ Local S Q L database

slide-4
SLIDE 4

CSCI 2133

HTML5 Interesting New Tags

  • Media Type
  • <audio> and <video> elements are used by HTML5

media content. Please find below the tags used for the same:

  • <audio>: Used for the sound elements
  • <video>: Used for the movie or any video elements
  • <embed>: Used for the external application purpose
  • <track>: Used for the text tracks clarification of <audio>

and <video> contents

  • <source>: Used for the different media resources of

<audio> and <video> elements.

4

slide-5
SLIDE 5

CSCI 2133

HTML5 Interesting New Tags

  • Form Type
  • Date : <input type= “date” name = “day”>
  • Color: <input type= “color” name= “favrtcolor”>
  • Email: <input type= “email” name= “email”>
  • Datetime-local: <input type= “datetime-local” name=

“day_time”>

  • Time: <input type= “time” name= “user_time”>
  • Range: <input type= “range” min= “0” max= “30” step= “3”

value= “5”>

  • URL: <input type= “url” name= “websitename”>
  • Telephone: <input type= “tel” name=”usertel”>
  • Number: <input type= “number” name= “quantity” min= “1”

max= “10”>

  • Search: <input type= “search” name=”test”>

5

slide-6
SLIDE 6

CSCI 2133

Interesting Canvas and SVG

  • You might want try it out:

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 100); </script>

  • AND

<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Sorry, your browser does not support inline SVG. </svg>

6

slide-7
SLIDE 7

CSCI 2133

LocalStorage vs SessionStorage

LOcalStorage Usage: // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); SessionStorage usage: //Assign:

sessionStorage.yourAttr = yourVal;

7

slide-8
SLIDE 8

CSCI 2133

Good References

  • https://medium.com/@factoryhr/http-2-the-

difference-between-http-1-1-benefits-and-how-to- use-it-38094fa0e95b

8

slide-9
SLIDE 9

CSCI 2133

Agenda - CSS

  • 1, Quick introduction
  • 2, Structure of CSS
  • 3, Common usages and tips:
  • CSS Box Models
  • Pseudo-class
  • Positions
  • SASS/SCSS
  • Next Class is For CSS Layout

9

slide-10
SLIDE 10

CSCI 2133

What is C S S ?

slide-11
SLIDE 11

CSCI 2133

  • CSS stands for Cascading Style Sheets

What is C S S ?

slide-12
SLIDE 12

CSCI 2133

  • CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

What is C S S ?

slide-13
SLIDE 13

CSCI 2133

  • CSS stands for Cascading Style Sheets

Styles define how to display HTML elements C S S can solve many design problems without adding images or changing the HTML

What is C S S ?

slide-14
SLIDE 14

CSCI 2133

Because of CSS

slide-15
SLIDE 15

CSCI 2133

C S S Syntax

slide-16
SLIDE 16

CSCI 2133

C S S Syntax

html

Selector

slide-17
SLIDE 17

CSCI 2133

C S S Syntax

Selector Declaration Declaration

html {margin:0; padding:0}

slide-18
SLIDE 18

CSCI 2133

C S S Syntax

Property Property Selector Declaration Declaration

html {margin:0; padding:0}

slide-19
SLIDE 19

CSCI 2133

C S S Syntax

Value Value Property Property Selector Declaration Declaration

html {margin:0; padding:0}

slide-20
SLIDE 20

CSCI 2133

C S S Syntax

Value Value Property Property Selector Declaration Declaration

html {margin:0; padding:0} body {background-color:#d20c0c;}

slide-21
SLIDE 21

CSCI 2133

C S S Syntax

Value Value Property Property Selector Declaration Declaration

html {margin:0; padding:0} body {background-color:#d20c0c;} h1 {font-size:12px;}

slide-22
SLIDE 22

CSCI 2133

C S S Selectors

slide-23
SLIDE 23

CSCI 2133

C S S Selectors

  • CSS selectors allow you to select and manipulate

HTML element(s).

slide-24
SLIDE 24

CSCI 2133

C S S 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.

slide-25
SLIDE 25

CSCI 2133

Types of C S S Selectors

slide-26
SLIDE 26

CSCI 2133

Types of C S S Selectors

  • The element Selector selects elements based on the

element name. (e.g. body, header, p,footer)

slide-27
SLIDE 27

CSCI 2133

Types of C S S 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)

slide-28
SLIDE 28

CSCI 2133

Types of C S S 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)

slide-29
SLIDE 29

CSCI 2133

slide-30
SLIDE 30

CSCI 2133

elements

slide-31
SLIDE 31

CSCI 2133

ID’s elements

slide-32
SLIDE 32

CSCI 2133

ID’s classes elements

slide-33
SLIDE 33

CSCI 2133

Ways to use C S S

  • CSS can be attached to HTML in 3 ways
  • Inline (wysiwyg for example)
  • Embedded (wysiwyg for example)

Links C S S files (the preferred method)

slide-34
SLIDE 34

CSCI 2133

Ways to use C S S

<p style=“color:red;”>Some Text</p>

Inline Styles

Some Text

Result

slide-35
SLIDE 35

CSCI 2133

Ways to use C S S

{color:red;}</style> <head> <style>p </head>

Embedded Styles

Some Text

Result

slide-36
SLIDE 36

CSCI 2133

Ways to use C S S

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

External Style Sheet reference

Some Text

Result

p {color:red;}

style.css

slide-37
SLIDE 37

CSCI 2133

CSS Box Model

slide-38
SLIDE 38

CSCI 2133

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.

slide-39
SLIDE 39

CSCI 2133

50px 75px 100px

CSS Margin

{margin:25px 50px 75px 100px;}

25px

slide-40
SLIDE 40

CSCI 2133

CSS Padding

  • Padding is the space between the element border

and the elementcontent The top, right, bottom, and left padding can be changed independently using separate properties.

slide-41
SLIDE 41

CSCI 2133

CSS Padding

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

25px 50px 75px 100px

slide-42
SLIDE 42

CSCI 2133

CSS Padding & Margin

{padding:25px 50px 75px 100px;} {margin:25px 50px 75px 100px;}

border

slide-43
SLIDE 43

CSCI 2133

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

slide-44
SLIDE 44

CSCI 2133

CSS Pseudo-classes

slide-45
SLIDE 45

CSCI 2133

CSS Pseudo-classes

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

element. The most common pseudo-classesare links Links can be styled differently depending on what state they are in.

a:link Selects a unvisited link a:visited Selects visited links a:active Selects the active link a:hoverSelects links on mouse

  • ver

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

slide-46
SLIDE 46

CSCI 2133

Advanced Psudo-Class Usages

46

slide-47
SLIDE 47

CSCI 2133

CSS Background

slide-48
SLIDE 48

CSCI 2133

CSS Background

  • CSS background properties are used to define the background

effects of an element.

slide-49
SLIDE 49

CSCI 2133

CSS Background

  • CSS background properties are used to define the background

effects of an element. background-color sets the background color of an element

slide-50
SLIDE 50

CSCI 2133

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

slide-51
SLIDE 51

CSCI 2133

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

slide-52
SLIDE 52

CSCI 2133

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

slide-53
SLIDE 53

CSCI 2133

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

slide-54
SLIDE 54

CSCI 2133

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

slide-55
SLIDE 55

CSCI 2133

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

slide-56
SLIDE 56

CSCI 2133

CSS Positioning

slide-57
SLIDE 57

CSCI 2133

  • CSS Positioning

The CSS positioning properties allow you to position an element.

slide-58
SLIDE 58

CSCI 2133

CSS Positioning

  • The CSS positioning properties allow you to position an

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

slide-59
SLIDE 59

CSCI 2133

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

slide-60
SLIDE 60

CSCI 2133

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

slide-61
SLIDE 61

CSCI 2133

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.

slide-62
SLIDE 62

CSCI 2133

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.

slide-63
SLIDE 63

CSCI 2133

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

slide-64
SLIDE 64

CSCI 2133

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

slide-65
SLIDE 65

CSCI 2133

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

slide-66
SLIDE 66

CSCI 2133

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

slide-67
SLIDE 67

CSCI 2133

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

slide-68
SLIDE 68

CSCI 2133

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

slide-69
SLIDE 69

CSCI 2133

CSS Float

slide-70
SLIDE 70

CSCI 2133

  • CSS Float

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

slide-71
SLIDE 71

CSCI 2133

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

  • ther floating elements are notallowed.
slide-72
SLIDE 72

CSCI 2133

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

  • ther floating elements are notallowed.

float Specifies whether or not a box should float to the left or right.

slide-73
SLIDE 73

CSCI 2133

img {float:none;}

CSS Float

slide-74
SLIDE 74

CSCI 2133

img {float:none;} img {float:left;}

CSS Float

slide-75
SLIDE 75

CSCI 2133

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

CSS Float

slide-76
SLIDE 76

CSCI 2133

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

slide-77
SLIDE 77

CSCI 2133

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

slide-78
SLIDE 78

CSCI 2133

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

slide-79
SLIDE 79

CSCI 2133

CSS Display and Visibility

slide-80
SLIDE 80

CSCI 2133

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.

slide-81
SLIDE 81

CSCI 2133

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

slide-82
SLIDE 82

CSCI 2133

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 asbefore. display:none hides an element, and it will not take up any space.

slide-83
SLIDE 83

CSCI 2133

Box shadow, text shadow Media Types Font face _____________________ Opacity -- demo Border radius -- demo Gradients -- demo

CSS3 Quick Views

slide-84
SLIDE 84

CSCI 2133

C S S Image Opacity / Transparency

slide-85
SLIDE 85

CSCI 2133

C S S Image Opacity / Transparency

  • The CSS3 property for transparency is opacity.
slide-86
SLIDE 86

CSCI 2133

C S S Image Opacity / Transparency

  • The CSS3 property for transparency is
  • pacity. 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;}

slide-87
SLIDE 87

CSCI 2133

C S S Media Types

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

different layout for screen, print, mobile phone, tablet, etc.

slide-88
SLIDE 88

CSCI 2133

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

slide-89
SLIDE 89

CSCI 2133

C S S 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 printUsed for printers

slide-90
SLIDE 90

CSCI 2133

C S S 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 printUsed for printers screen Used for computer screens

slide-91
SLIDE 91

CSCI 2133

C S S 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 printUsed for printers screen Used for computer screens tv Used for television-type devices

slide-92
SLIDE 92

CSCI 2133

Good Example

credit t to w3 w3school

  • Change the background color of the <body> element to

"lightblue" when the browser window is 600px wide or less:

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }

  • You can also have different stylesheets for different

media, like this:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

92

slide-93
SLIDE 93

CSCI 2133

Box Shadow with Inside/Outside

93

slide-94
SLIDE 94

CSCI 2133

Blend Mode

94

There is also: screen, overlay, darken, lighten, color-dodge, color-

burn, hard-light, soft-light, difference, exclusion, hue, saturation, color,

and luminosity. And also normal which reset it.

slide-95
SLIDE 95

CSCI 2133

Open Font face

  • “The @font-face rule allows custom fonts to be

loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.”

  • - Quoted from “css-tricks.com”

95

slide-96
SLIDE 96

CSCI 2133

Font Face Usage

  • Definition:

@font-face { font-family: 'MyWebFont’; src: url('myfont.woff2') format('woff2’), url('myfont.woff') format('woff’); }

  • How to use:

@import url(//fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans', sans-serif; }

96

slide-97
SLIDE 97

CSCI 2133

What is S A S S ?

slide-98
SLIDE 98

CSCI 2133

  • SASS stands for Syntactically Awesome Style Sheets

What is S A S S ?

slide-99
SLIDE 99

CSCI 2133

  • SASS stands for Syntactically Awesome Style Sheets

Sass is a C S S preprocessor

What is S A S S ?

slide-100
SLIDE 100

CSCI 2133

  • SASS stands for Syntactically Awesome Style Sheets

Sass is a C S S preprocessor Sass can be written in either the sass or scss syntax

What is S A S S ?

slide-101
SLIDE 101

CSCI 2133

  • SASS stands for Syntactically Awesome Style Sheets

Sass is a C S S preprocessor Sass can be written in either the sass or scss syntax Sass files compile into css files

What is S A S S ?

slide-102
SLIDE 102

CSCI 2133

W hy do we use S A S S ?

slide-103
SLIDE 103

CSCI 2133

  • C S S doesn’t allow variables

W hy do we use S A S S ?

slide-104
SLIDE 104

CSCI 2133

  • C S S doesn’t allow variables

SA S S uses mixins (reusable blocks of styles)

W hy do we use S A S S ?

slide-105
SLIDE 105

CSCI 2133

  • C S S doesn’t allow variables

SA S S uses mixins (reusable blocks of styles) SASS is faster, more efficient, and easier to maintain

W hy do we use S A S S ?

slide-106
SLIDE 106

CSCI 2133

  • C S S doesn’t allow variables

SA S S uses mixins (reusable blocks of styles) SASS is faster, more efficient, and easier to maintain Using COMPASS with SA S S allows us to write many lines

  • f cross-browser compatible CSS in a single line of code!

W hy do we use S A S S ?

slide-107
SLIDE 107

CSCI 2133

S C S S Syntax

Variable name Value

$yellow: #9d9624;

Mixin Extend

slide-108
SLIDE 108

CSCI 2133

S C S S Syntax

Variable name Value

$yellow: #9d9624; body

Mixin

{@include my-background;}

Extend

slide-109
SLIDE 109

CSCI 2133

S C S S Syntax

Variable name Value

$yellow: #9d9624; body h1

Mixin

{@include my-background;}

Extend

{@extend %my-background;}

slide-110
SLIDE 110

CSCI 2133

S C S S vs S A S S

slide-111
SLIDE 111

CSCI 2133

nav { ul { } margin: 0; li { display: block; } a { padding: 6px 12px; color: $yellow; } }

SCSS

slide-112
SLIDE 112

CSCI 2133

nav { ul { } margin: 0; li { display: block; } a { padding: 6px 12px; color: $yellow; } }

SCSS

nav ul margin: 0 block li display: a padding: 6px 12px color: $yellow

SASS

slide-113
SLIDE 113

CSCI 2133

S A S S Extend

slide-114
SLIDE 114

CSCI 2133

S A S S Extend

%my-background { margin-top: 12px; height: 10px; background: border: 1px red; solid $yellow; }

Define the placeholder selector

slide-115
SLIDE 115

CSCI 2133

S A S S Extend

%my-background { margin-top: 12px; height: 10px; background: border: 1px red; solid $yellow; }

Define the placeholder selector

.box

Extend the placeholder selector

{@extend %my-background;}

slide-116
SLIDE 116

CSCI 2133

S A S S Extend

%my-background { margin-top: 12px; height: 10px; background: border: 1px red; solid $yellow; }

Define the placeholder selector

.box

Extend the placeholder selector

{@extend %my-background;}

slide-117
SLIDE 117

CSCI 2133

S A S S Extend

%my-background { margin-top: 12px; height: 10px; background: border: 1px red; solid $yellow; }

Define the placeholder selector

.box

Extend the placeholder selector

{@extend %my-background;}

slide-118
SLIDE 118

CSCI 2133

S A S S Mixins

slide-119
SLIDE 119

CSCI 2133

S A S S Mixins

@mixin my-background($radius) { margin-top: 12px; height: 10px; background: red; border-radius: $radius; }

Define the mixin

slide-120
SLIDE 120

CSCI 2133

S A S S Mixins

@mixin my-background($radius) { margin-top: 12px; height: 10px; background: red; border-radius: $radius; }

Define the mixin

.box

Include the mixin

{@include my-background(12px);}

slide-121
SLIDE 121

CSCI 2133

S A S S Mixins

@mixin my-background($radius) { margin-top: 12px; height: 10px; background: red; border-radius: $radius; }

Define the mixin

.box

Include the mixin

{@include my-background(12px);}

slide-122
SLIDE 122

CSCI 2133

S A S S Mixins

@mixin my-background($radius) { margin-top: 12px; height: 10px; background: red; border-radius: $radius; }

Define the mixin

.box

Include the mixin

{@include my-background(12px);}

slide-123
SLIDE 123

CSCI 2133

Mixin or Extend

?

slide-124
SLIDE 124

CSCI 2133

Mixin or Extend

slide-125
SLIDE 125

CSCI 2133

Mixin or Extend

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

slide-126
SLIDE 126

CSCI 2133

Mixin or Extend

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

Arguments

slide-127
SLIDE 127

CSCI 2133

Mixin or Extend

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

Arguments

.box,.footer {@extend %my-background;}

slide-128
SLIDE 128

CSCI 2133

Mixin or Extend

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

Arguments

.box,.footer {@extend %my-background;}

Smaller CSS

slide-129
SLIDE 129

CSCI 2133

Resourc es

slide-130
SLIDE 130

CSCI 2133

Resourc es

  • www.w3schools.com/css
slide-131
SLIDE 131

CSCI 2133

Resourc es

  • www.w3schools.com/css

css-tricks.com

slide-132
SLIDE 132

CSCI 2133

Exercise in Class

  • https://web.cs.dal.ca/~gang/csci2133/April-25-

class-exericse.pdf

132

slide-133
SLIDE 133

CSCI 2133

CSS/CSS3 Frequent Questions

  • Q1. What are the advantages of CSS?
  • Q2. Explain the CSS components?
  • Q3. Explain the different kinds of selectors and ways to

target the elements?

  • Q4. Explain the CSS box model and its elements?
  • Q5. Explain the preferred way of font sizing?
  • Q6. Explain the term graceful degradation?
  • Q7. What are the defined dimension properties?
  • Q8. Explain the various media types?
  • Q9. Explain how to handle the browser differences in CSS?
  • Q10. Explain Flexbox and CSS grid? – Next Class Question

133

slide-134
SLIDE 134

CSCI 2133