/
Basics of  Web Design Chapter 6 Basics of  Web Design Chapter 6

Basics of Web Design Chapter 6 - PowerPoint Presentation

nersonvisa
nersonvisa . @nersonvisa
Follow
345 views
Uploaded On 2020-06-22

Basics of Web Design Chapter 6 - PPT Presentation

More CSS Basics Key Concepts Copyright 2018 Terry Ann Morris EdD 1 Learning Outcomes Describe and apply the CSS Box Model Configure width and height with CSS Configure margin border and padding with CSS ID: 782690

2018 morris terry ann morris 2018 ann terry copyright color margin padding border background width css css3 image box

Share:

Link:

Embed:

Download Presentation from below link

Download The PPT/PDF document "Basics of Web Design Chapter 6" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

Basics of Web Design

Chapter 6More CSS BasicsKey ConceptsCopyright © 2018 Terry Ann Morris, Ed.D

1

Slide2

Learning OutcomesDescribe and apply the CSS Box Model

Configure width and height with CSSConfigure margin, border, and padding with CSSCenter web page content with CSSApply shadows with CSS3Configure rounded corners with CSS3Configure background images with CSS3Configure opacity, RGBA color, HSLA color and gradients with CSS3

2

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide3

Configure Width and Height with CSS

width propertyConfigures the width of an element’s contentmin-width propertyConfigures minimum width of an elementmax-width propertyConfigures the maximum width of an elementheight propertyConfigures the height of an element

h1 { width: 80%; }

h1 { height: 100px; }

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide4

The

Box ModelContentText & web page elements in the containerPaddingArea between the content and the borderBorder

Between the padding and the margin

Margin

Determines the empty space between the element and adjacent elements

4

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide5

Configure Margin with CSS

The margin property

Related properties:

margin-top, margin-right, margin-left, margin-bottom

Configures empty space between the element and adjacent elements

Syntax examplesh1 { margin: 0; }h1 { margin: 20px 10px; }h1 { margin: 10px 30px 20px; }

h1 { margin: 20px 30px 0 30px; }

Copyright © 2018 Terry Ann Morris, Ed. D.

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide6

Configure Padding with CSS

The padding property

Related properties:

padding-top, padding-right, padding-left,

padding-bottom

Configures empty space between the content of the HTML element (such as text) and the borderSyntax examplesh1 { padding: 0; }h1 { padding : 20px 10px; }

h1 { padding : 10px 30px 20px; }

h1 { padding : 20px 30px 0 30px; }

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide7

The CSS border Property

Configures a border on the top, right, bottom, and left sides of an elementConsists of border-widthborder-styleborder-color h2 { border: 2px solid #ff0000 }

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide8

Valid border-style Values

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide9

Configuring Specific Sides of a Border

Use CSS to configure a line on one or more sides of an elementborder-bottomborder-leftborder-rightborder-top h2 { border-bottom: 2px solid #ff0000 }

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide10

CSS3 Rounded Corners

border-radius propertyExample:h1 { border: 1px solid #000033; border-radius: 15px; }

10

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide11

Centering Page Content with CSS

#container { margin-left: auto; margin-right: auto; width:80%; }

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide12

CSS3 box-shadow PropertyConfigure the

horizontal offset, vertical offset, blur radius, and valid color valueExample:#wrapper { box-shadow: 5px 5px 5px #828282;}

Note: Optional keyword: inset

12

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide13

CSS3 text-shadow PropertyConfigure the

horizontal offset, vertical offset, blur radius, and valid color valueExample:#wrapper { text-shadow: 3px 3px 3px #666; }

13

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide14

CSS3 Background Image Propertiesbackground-clip

confines the display of the background image background-originpositions the background image relative to the content, padding or borderbackground-sizecan be used to resize or scale the background image

14

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide15

CSS3 opacity PropertyConfigure the opacity of the background color

Opacity range:0 Completely Transparent1 Completely Opaquehorizontal offset, vertical offset, blur radius, and valid color valueExample: h1{ background-color: #FFFFFF; opacity: 0.6; }

15

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide16

RGBA Color

Four values are required:

red color, green color, blue color, and alpha(transparency)

The values for red, green, and blue

must be decimal values from 0 to 255.

The alpha value must be a number between 0 (transparent) and 1 (opaque).Example:

h1 { color: #ffffff;

color: rgba(255, 255, 255, 0.7);

font-size: 5em; padding-right: 10px;

text-align: right;

font-family: Verdana, Helvetica, sans-serif; }

16

Slide17

HSLA Color

hue, saturation, light, alphaHue is a value between 0 and 360Saturation: percentLightness: percentOptional alpha: from 0 to 1

17

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide18

CSS3 GradientsGradient: a smooth blending of shades

from one color to anotherUse the background-image propertyLinear Gradient Examplebody { background-color: #8FA5CE; background-image: linear-gradient (to bottom, #FFFFFF, #8FA5CE);}Radial Gradient Example

body { background-color: #8FA5CE;

background-image: radial-gradient(#FFFFFF, #0000FF);

}

18

Copyright © 2018 Terry Ann Morris, Ed. D.

Slide19

Summary

This chapter expanded your CSS skillset.You were introduced to the box model.You configured CSS properties related to the box model, such as margin, border, padding, height, and width.You centered a web page using CSS.You explored new CSS3 properties including: border-radius, box-shadow,

text-shadow, opacity.

19

Copyright © 2018 Terry Ann Morris, Ed. D.