5/19/2019
CIS 273: Web Design and Development home
5.1 Common properties
Common CSS properties
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
Common CSS properties used to to control web page elements include:
StrayerCIS273Spring2019
color: The color property changes the color of the element's content.
background: The background properties changes the element's background to display as a
solid color, slightly or fully transparent, a color gradient, or an image.
font: The font properties changes the text's font name, size, weight, style, and variant.
oat, clear: The oat property allows an element to oat to the left or right so that text
wraps around the element, while the clear property moves the element below any previous
oating elements.
text-align: The text-align property allows text to display left-aligned, right-aligned, centered,
or justi ed.
display: The display property controls the layout of the element on a web page, such as
displaying as an inline element, a block element, or hiding the element.
Color property
The color CSS property changes the color of the text. The value of the color property is speci ed
by a color value.
A color value is speci ed using a color name, RGB or RGBA values, hexadecimal values, or HSL
or HSLA values. CSS also de nes 140 color names, such as White, Blue, Black, Gray,
ForestGreen, Magenta. Color names are not case sensitive, so DarkGray and darkgray are
the same color.
An RGB color value speci es a color using the rgb(red, green, blue) function by
indicating the red, green, and blue intensities. Each intensity for red, green, and blue is
between 0 and 255, where 0 is the lowest intensity and 255 is the highest.
Ex: rgb(0, 0, 0) is black, rgb(0, 0, 255) is blue, rgb(255, 255, 0) is yellow,
and rgb(255, 255, 255) is white.
©zyBooks
05/19/19 07:16
473675
A hexadecimal color speci es a color using the #RRGGBB format
by indicating
the red,
Irving Jimenez
green, and blue intensities. Each intensity for red, green, and blueStrayerCIS273Spring2019
is between 00 and ff
hexadecimal numbers, where 00 is the lowest intensity and ff is the highest.
Ex: #000000 is black, #0000ff is blue, #ffff00 is yellow, and #ffffff is white.
An HSL color value speci es a color using the hsl(hue, saturation, lightness)
function by indicating the hue, saturation, and lightness values. The hue value ranges
between 0 and 360, and the saturation and lightness values range between 0% and 100%.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
1/31
5/19/2019
CIS 273: Web Design and Development home
Ex: hsl(0, 0%, 0%) is black, hsl(120, 100%, 50%) is green, and
hsl(0, 100%, 25%) is dark red.
The HSL color speci cation method is harder to understand and is not used as frequently
as the RGB and hexadecimal color speci cation methods.
The RGB and HSL color values can add an alpha value to allow for transparency. The RGBA
color value speci es a color using the rgba(red, green, blue, alpha) function by
©zyBooks 05/19/19 07:16 473675
indicating the red, green, blue, and alpha intensities. The HSLA color value
speci es a color
Irving Jimenez
using the hsla(hue, saturation,lightness, alpha) function
by indicating the
StrayerCIS273Spring2019
hue, saturation, lightness, and alpha intensities. The intensities have the same ranges as
for RGB or HSL color values, but the alpha intensity is between 0 and 1. An alpha of 0
means fully transparent, 1 means fully opaque, and 0.5 means half transparent.
PARTICIPATION
ACTIVITY
5.1.1: Color values and names.
Match each color value to the color name.
rgb(0, 0, 0)
#006400
rgba(255, 255, 255, 0.5)
rgb(80, 80, 80)
#FFFFFF
#FFD700
#0000FF
rgb(144, 238, 144)
Blue
Black
White
DarkGreen
LightGreen
Gray
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Gold
Semitransparent white
Reset
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
2/31
5/19/2019
CIS 273: Web Design and Development home
PARTICIPATION
ACTIVITY
5.1.2: CSS text color.
Modify or add one CSS rule for each requirement below to change the text color
property as speci ed.
1. By color name: change the text color for byname class elements from black to
©zyBooks 05/19/19 07:16 473675
blue.
Irving Jimenez
2. By RGB values: change the text color for byrgb class elements
from black
StrayerCIS273Spring2019
(rgb(0, 0, 0)) to green by modifying the second number to be 255.
3. By HSL values: change the text color for byhsl class elements from black
(hsl(0, 0%, 0%)) to cyan by modifying the rst number to be 200, the second
number to 100%, and the third number to 50%.
HTML
CSS
1 The text is blue
2
3 The text is green
4
5 The text is cyan
6
Render web page
Reset code
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
3/31
5/19/2019
CIS 273: Web Design and Development home
Your web page
Expected web page
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Background properties
Every element in a web page has a set of background properties. The web browser rst draws
the element's background and then draws the element's content. If the element's background is
not fully opaque, the element's parent will be visible under the element's content. Common
background properties include:
The background-color property speci es the background color.
The background-image property speci es a background image.
The background property is shorthand for setting several of the element's background
properties at the same time.
Background colors are speci ed using color names, a color function (RGB, RGBA, HSL, HSLA), or
one of the values such as transparent. Background images are speci ed with the none value
or the url('URL') function, where URL indicates the location of the image. By default, the
initial background color is transparent and background image is none, which means the
element's parent's background will display underneath the element's content. When a
background color and image are both speci ed, the background image is rendered on top of the
color.
PARTICIPATION
ACTIVITY
5.1.3: Styling background color and image.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Animation captions:
1. The elements display with transparent backgrounds.
2. The p element has a LightSkyBlue background color.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
4/31
5/19/2019
CIS 273: Web Design and Development home
3. The div element uses an image for a background, and is displayed over the p element's
background.
PARTICIPATION
ACTIVITY
5.1.4: Determining background properties.
Given the HTML below, indicate the background properties used ©zyBooks
for the elements.
05/19/19 07:16 473675
Irving
Jimenez
Assume that the smiley.gif image has a transparent background.
StrayerCIS273Spring2019
Below is the word "Hello" in different languages.
Hola
Olá
Salut
Hej
Bog
smiley face on green
smiley face on yellow
smiley face on red
blue
smiley face on clouds
Hola
Olá
Salut
Hej
Bog
Reset
©zyBooks
05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Font properties
Many CSS properties control the font properties for displaying text. CSS font properties include:
The font-family property speci es the font family, such as "Times New Roman" or
serif.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
5/31
5/19/2019
CIS 273: Web Design and Development home
The font-size property changes the font size, such as 120%, small, or 12pt.
The font-weight property speci es the font weight, such as normal or bold.
The font-style property changes the text style, such as normal, italic, or oblique.
The font-variant property speci es the variant of the text, such as normal or
small-caps.
The font property is shorthand for setting several of the element's font properties at the
same time.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
The font family property contains a list of fonts speci ed as a family name
or a generic family
StrayerCIS273Spring2019
separated by commas. A family name is the name of a speci c font, like "Times New Roman",
"Arial", or "Georgia". Family names containing spaces must be wrapped in quotations marks,
while family names without spaces do not. A generic family is a more general group of fonts, like
serif, sans-serif, cursive, fantasy, or monospace. The web browser will use the rst font listed
that is available. Good practice is to start the list with the intended font and end with a generic
family.
Example 5.1.1: Generic family names.
Generic
family
Distinguishing features
Example CSS
Displayed
Serif
"Embellishments" like nishing
strokes or are ends
font-family:
serif;
Generic
Family
Sans-Serif
Plain stroke ends
font-family:
sans-serif;
Generic
Family
Cursive
Cursive or calligraphy
characteristics like joined strokes
font-family:
cursive;
Generic
Family
Fantasy
Decorative
font-family:
fantasy;
Generic
Family
Monospace
Constant width for letters,
punctuation, and space
font-family:
monospace;
Generic
©zyBooksFamily
05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
The font size can be speci ed using a prede ned size name, a relative size name, a relative
percentage, or a speci c length. The prede ned size names are xx-small, x-small, small,
medium, large, x-large, and xx-large, where medium is the default size. The relative size
names are smaller and larger which change the font size for an element to be smaller or
larger than the font size of the parent element. The relative percentage changes the font size for
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
6/31
5/19/2019
CIS 273: Web Design and Development home
an element to the speci ed percentage of the font size of the parent element. Ex:
font-size: 120%; speci es the font should be 120% times the parents element's font size, or
20% larger. The speci c length changes the font size to be a size, which can be speci ed in pixels
(px), centimeters (cm), points (pt), etc.
PARTICIPATION
ACTIVITY
5.1.5: Computing font properties.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
Given the HTML below, answer the following questions regarding font
properties.
StrayerCIS273Spring2019
p {
font-family: "Verdana", "Arial", sans-serif;
font-size: 10pt;
}
span#band {
font-style: italic;
font-size: 120%;
}
span#music {
font-variant: small-caps;
}
My favorite band is The Shins, because their music is thought provoking!
1) What is the text size for the p
element?
pt
Check
Show answer
2) What is the text size for the span
element with band id attribute?
pt
Check
Show answer
3) What is the most preferred font for
the p element?
Check
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Show answer
4) What is the second most preferred
font for the p element?
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
7/31
5/19/2019
CIS 273: Web Design and Development home
Check
Show answer
5) What is the third most preferred font
for the p element?
Check
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Show answer
6) What is the text variant for the span
element with music id attribute?
Check
Show answer
Float property
CSS properties oat and clear control how text ows around HTML elements, making web pages
look like a magazine or newspaper article where the article's text wraps around the images in the
page.
The oat CSS property speci es whether the element will oat to the right or left of the
element's parent, allowing text to ow around the element.
The clear property moves an element down to avoid previously oated elements on the
left, right, or both sides.
PARTICIPATION
ACTIVITY
5.1.6: Float property values.
Specify the correct CSS values.
1) What CSS style oats an element to
the right?
float:
Check
;
Show answer
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
2) What CSS style avoids left- oating
elements?
clear:
Check
;
Show answer
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
8/31
5/19/2019
Check
PARTICIPATION
ACTIVITY
Show answer
CIS 273: Web Design and Development home
5.1.7: Floating images.
Modify the CSS below to oat to the right the rst image with floatright class, to
05/19/19
07:16 473675
oat to the left the second image with floatleft class, and to ©zyBooks
clear oating
elements
Irving Jimenez
on both sides of the p element with nofloats class.
StrayerCIS273Spring2019
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CSS
Classifieds
8
9
10
11
1
Check
2
3
4
Next
Exploring further:
HTML Tag from W3Schools
HTML Tag from W3Schools
HTML Tag from W3Schools
5.4 and
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
The tag allows a web page to include interactive content, which the browser assumes to
be JavaScript unless indicated otherwise. The optional type attribute is used to indicate the
content type when the content is not JavaScript. The src attribute provides the URL of an
external document containing the interactive content. If a tag does not have the src
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
29/31
5/19/2019
CIS 273: Web Design and Development home
attribute, then the interactive content is contained directly within the tag. The HTML below
shows two ways the tag can be used.
Example 5.4.1: Two ways of using tags.
alert('Hello, World!');
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
A common error is to forget the closing tag when using the src attribute. Even when the
interactive content is located in a separate external document, the closing tag must be
included.
Good practice is to use the src attribute to separate content and functionality and promote
modularity. An external JavaScript le can be edited separately from an HTML le, which allows
a web page's interactive content to be updated even if the content is unchanged. A separate
JavaScript le can also be reused on many web pages to provide the same functionality for
different pieces of content. Additionally, when the JavaScript le is separate, a browser that
doesn't understand JavaScript, such as a screenreader for blind users, can avoid downloading
the JavaScript le that will not be used.
The tag allows the web page to introduce presentational directives, usually CSS. A
tag is placed in an HTML document prior to the tag, because the style section is
designed to describe the presentation of the entire document. Although only needed for non-CSS
content and rarely used, the tag has an optional type attribute that describes the content
inside the tag.
Example 5.4.2: Using the tag.
p {
margin: 1em;
}
The White House is the official residence of the
President of the United States.
Note
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
30/31
5/19/2019
CIS 273: Web Design and Development home
Note
Unlike all other HTML tags, the contents within the and tags are
not displayed by the browser. The and tags' purpose is to provide
interactive functionality and presentational styling.
PARTICIPATION
ACTIVITY
text/css
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
5.4.1: and tags.
text/javascript
Tag that surrounds interactive
content in an HTML document.
Tag that surrounds
presentational content in an
HTML document.
Default type for the tag.
Default type for the tag.
Reset
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
31/31
5/19/2019
CIS 273: Web Design and Development home
6.1 Positioning elements
The CSS position property gives developers more control over where elements should appear in
the browser. position has four possible values:
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
static - Static positioning is the default positioning
relative - Relative positioning positions the element relative to the element's default
position
fixed - Fixed positioning positions the element relative to the viewport in a xed location
absolute - Absolute positioning positions the element relative to the nearest positioned
ancestor
PARTICIPATION
ACTIVITY
6.1.1: Relative positioning.
Animation captions:
1. The "Content" displays in the default location.
2. Adding relative positioning to #content does not change the "Content" position until
"left" and/or "top" properties are speci ed.
3. "left: -20px" moves the left edge 20 pixels left from the default location.
4. "left: 20px" moves the left edge 20 pixels to the right of the default location.
5. Negative values for "top" move the element up, and positive values move the element
down.
PARTICIPATION
ACTIVITY
6.1.2: Relative and static positioning.
1) Where is the image located relative
to the image's default location?
30 pixels to the right
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
30 pixels to the left
No change
2) Where is the image located relative
to the image's default location?
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
1/44
5/19/2019
CIS 273: Web Design and Development home
30 pixels higher
30 pixels lower
No change
3) Where is the image located relative
to the image's default location?
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
20 pixels to the right and 30
pixels higher
20 pixels to the left and 30
pixels lower
No change
Fixed positioning places the element at a xed location in the viewport, and scrolling does not
move the element. A viewport is the visible area of a web page. The xed element is detached
from the normal ow of elements in the page and is layered on top of the page contents.
PARTICIPATION
ACTIVITY
6.1.3: Fixed positioning.
Animation captions:
1. The "Content" displays in the default location.
2. Adding xed positioning to #content detaches the "Content" so the is layered
on top of the underlying content.
3. "left: 60px" moves the 's left edge 60 pixels to the right of the browser's left edge.
4. "top: 50px" moves the 's top edge 50 pixels below the browser's top edge.
PARTICIPATION
ACTIVITY
6.1.4: Fixed and absolute positioning.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Refer to the CSS below.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
2/44
5/19/2019
CIS 273: Web Design and Development home
.special {
position: fixed;
left: 100px;
top: 25px;
}
1) All elements using the "special" class
are displayed 100 pixels from the
browser's left edge and 25 pixels
from the browser's top edge.
True
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
False
2) All elements using the "special" class
scroll with the page contents.
True
False
3) The text "123" is displayed on top of
"ABC".
ABC
123
True
False
Absolute positioning is similar to xed positioning except the position is based on the nearest
positioned ancestor element that uses xed, absolute, or relative positioning. If no positioned
ancestor element exists, the element is positioned relative to the document body. An absolute
positioned element scrolls with the document.
Figure 6.1.1: Cheer is absolute positioned inside a positioned ancestor
(left) and relative to the document body (right).
#container {
border: solid 2px green;
position: relative;
height: 60px;
width: 150px;
}
#cheer {
color: red;
position: absolute;
left: 10px;
top: 25px;
}
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
#container {
StrayerCIS273Spring2019
border: solid 2px green;
/* No positioning */
height: 60px;
width: 150px;
}
#cheer {
color: red;
position: absolute;
left: 10px;
top: 25px;
}
3/44
5/19/2019
CIS 273: Web Design and Development home
Go, fight, win!
Go, fight, win!
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
PARTICIPATION
ACTIVITY
6.1.5: Absolute positioning.
Refer to the CSS below.
.special {
position: absolute;
left: 100px;
top: 25px;
}
1) The is displayed 100 pixels
from the browser's left edge and 25
pixels from the browser's top edge.
Special
True
False
2) Elements using the "special" class
that do not have a positioned
ancestor will scroll with the page
contents.
True
False
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
3) If the "container" class uses xed
positioning, the will not
scroll with the page contents.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
4/44
5/19/2019
CIS 273: Web Design and Development home
Special
True
False
4) If the "container" class uses static
positioning, the is
positioned relative to the .
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Special
True
False
When a relative, absolute, or xed element is placed on top of another positioned element, the
element that is speci ed last in the HTML is placed on top. However, the CSS z-index property is
used to specify a relative distance that orders the appearance of elements. Elements with higher
z-index values are placed on top of elements with lower z-index values.
On the left side of the gure below, the browser renders the square elements in the order the
elements appear in the HTML: The orange square is rendered rst, and the green square is
rendered last. The right side of the gure shows how the ordering changes using the z-index
property: The orange square has the largest z-index and therefore appears on top.
Figure 6.1.2: No z-index is used on the left, but z-index changes the
rendered order on the right.
div {
width: 100px;
height: 100px;
position: absolute;
}
#orange {
background-color: orange;
left: 10px;
top: 10px;
}
#blue {
background-color: blue;
color: white;
left: 30px;
top: 30px;
}
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
5/44
5/19/2019
}
#green {
background-color: green;
left: 50px;
top: 50px;
}
CIS 273: Web Design and Development home
Go orange!
Go blue!
Go green!
div {
width: 100px;
height: 100px;
position: absolute;
©zyBooks 05/19/19 07:23 473675
}
#orange {
Irving Jimenez
background-color:
orange;
StrayerCIS273Spring2019
z-index: 3;
left: 10px;
top: 10px;
}
#blue {
background-color: blue;
color: white;
z-index: 2;
left: 30px;
top: 30px;
}
#green {
background-color: green;
z-index: 1;
left: 50px;
top: 50px;
}
Go orange!
Go blue!
Go green!
PARTICIPATION
ACTIVITY
6.1.6: z-index.
Refer to the gure above.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
1) In the example on the right, what zindex value would make the green
square appear on top of the orange
and blue squares?
1
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
6/44
5/19/2019
CIS 273: Web Design and Development home
2
4
2) If all three squares are given the
same z-index value of 5, which
square appears on top?
orange
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
blue
green
PARTICIPATION
ACTIVITY
6.1.7: Positioning practice.
♥
The web page below displays the iconic "I NY" logo. Use the position and
z-index properties to make the web page render like the expected web page.
1. Use relative positioning to place the t-shirt image 10 pixels further to the right of
the image's default location.
2. Use absolute positioning to place "I", " " and "NY" in the correct con guration on
top of the t-shirt.
♥
HTML
CSS
1 I ♥ Example 2
-5px -5px 1px green;">Example 3
0 0 3px red;">Example 4 ©zyBooks 05/19/19 07:23 473675
0 0 3px red, 0 0 6px purple;">Example
5
Irving
Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
9/44
5/19/2019
CIS 273: Web Design and Development home
PARTICIPATION
ACTIVITY
6.2.1: Text shadows.
1) Positive offset-x and offset-y
make the shadow appear to the right
and below the text, but negative
values make the shadow appear to
the left and above the text.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
True
False
2) The offset-x and offset-y
must be a non-zero value.
True
False
3) A shadow with blur-radius:4px
is less blurry than a shadow with
blur-radius:2px.
True
False
4) Multiple shadows can apply to the
same text.
True
False
Box shadows
The CSS property box-shadow adds a shadow to the box around an element using the following
©zyBooks 05/19/19 07:23 473675
properties:
Irving Jimenez
StrayerCIS273Spring2019
inset - Optional value that draws the shadow inside the box (default is outside the box)
offset-x - Horizontal pixel offset of shadow
offset-y - Vertical pixel offset of shadow
blur-radius - Optional shadow blur (default is 0)
spread-radius - Positive value causes shadow to grow, negative values to shrink
(default is 0)
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
10/44
5/19/2019
CIS 273: Web Design and Development home
color - Optional shadow color (default is usually the current CSS color)
Figure 6.2.2: Examples of different box-shadow values.
p {
width: 100px;
}
#example1 {
background-color: yellow;
box-shadow: 5px 5px;
}
#example2 {
background-color: green;
box-shadow: inset 5px 5px;
}
#example3 {
background-color: blue;
box-shadow: -5px -5px 3px;
}
#example4 {
background-color: violet;
box-shadow: 5px 5px 3px 4px;
}
#example5 {
background-color: orange;
box-shadow: -5px -2px 3px gray, 10px 10px 5px brown;
}
PARTICIPATION
ACTIVITY
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Example
1
2
3
4
5
6.2.2: Box shadows.
1) The box-shadow property creates
a shadow for text.
True
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
False
2) If the box-shadow uses the value
inset, then the shadow appears
inside the box.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
11/44
5/19/2019
CIS 273: Web Design and Development home
True
False
3) A zero spread-radius makes the
shadow the same size as the box.
True
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
False
PARTICIPATION
ACTIVITY
6.2.3: Shadow practice.
The web page below displays three ash cards with web history questions and
answers. Modify the CSS to add shadows to the cards, question text, and answer text.
Make the shadows use different colors, offsets, and blur radiuses.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
Q: Who invented the WWW?
A: Tim Berners-Lee
Q: When was the first website published?
A: 1991
Q: What web browser did most people use in the early 200
A: Internet Explorer
Render web page
Reset code
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
12/44
5/19/2019
CIS 273: Web Design and Development home
Your web page
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Rounded corners
An element border's corners can be rounded using the CSS property border-radius, which is
assigned one to four radius values.
Single value - All four corners are equally rounded
Two values - First value is top-left and bottom-right corners, second value is top-right and
bottom-left corners
Three values - First value is top-left, second is top-right and bottom-left, third is bottomright
Four values - First value is top-left, second is top-right, third is bottom-right, forth is bottomleft
Each corner may also be assigned a radius using four CSS properties:
border-top-left-radius, border-top-right-radius,
border-bottom-left-radius, and border-bottom-right-radius.
PARTICIPATION
ACTIVITY
6.2.4: Rounded corners.
©zyBooks
05/19/19 07:23 473675
Match the square with the CSS that produces the square's rounded
corners.
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
13/44
5/19/2019
CIS 273: Web Design and Development home
D
A
C
B
border-radius: 40px 20px 10px 5px;
border-radius: 40px
20px;
©zyBooks
05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
border-top-left-radius: 20px;
border-bottom-right-radius: 50px;
border-radius: 15px;
Reset
Border images
The CSS property border-image renders an element's border using sections of an image. The
border image takes the place of any border properties speci ed by border-style. The
following CSS properties are speci ed by border-image all at once:
border-image-source - Image URL
border-image-height - Image section height
border-image-width - Image section width
border-image-repeat - "repeat" to repeat the image section, "round" to repeat the
image section but resize the image if needed to t, or "round" to stretch an image section
PARTICIPATION
ACTIVITY
6.2.5: Try different border-image values.
The borderv1.png image is used to display a border image around the in the
web page below. The blue circles and green diamonds in the image are about 30 x 30
pixels.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Change the following CSS property values to see the effect of the border image:
1. Change the image width/height from 31 to 15 and render the page. Observe how
roughly half the circle and half the diamond is used to render the border.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
14/44
5/19/2019
CIS 273: Web Design and Development home
2. Change the 15 to 60 and render the page. Observe how a 60 x 60 pixel section
(2/3 of the image) is used to render the border corners. Since borderv1.png is only
90 x 90 pixels, an unused 60 x 60 pixel section does not exist, so the border sides
are empty.
3. Change the border size from 20px to 30px. Render the web page and observe
how the border size increased.
4. Change the image width/height back to 31 and change "round" to "repeat". Render
©zyBooks 05/19/19 07:23 473675
the page and observe how the green diamonds are repeated but doIrving
not Jimenez
t
perfectly on the left and right sides.
StrayerCIS273Spring2019
5. Change "repeat" to "stretch". Render the page and observe how the green
diamonds stretch to ll the border.
6. Finally, add the number 15 after 31. The 31 is now the height only, and 15 is the
width. Render the page and observe how only half the green diamond is used to
form the left and right borders.
HTML
CSS
1 Example using a border image.
2
Render web page
Reset code
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
15/44
5/19/2019
CIS 273: Web Design and Development home
Your web page
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
PARTICIPATION
ACTIVITY
6.2.6: Border images.
Refer to the CSS below.
border-image: url(some-border.png) 50 repeat;
1) 50 x 50 pixel sections of someborder.png are used to create the
border image.
True
False
2) If some-border.png is 50 x 50 pixels,
then the border will have empty
sides.
True
False
3) If some-border.png is 150 x 150
pixels, the border image section is
stretched on the sides.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
True
False
4) The width and height of a border
image are speci ed by borderhttps://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
16/44
5/19/2019
CIS 273: Web Design and Development home
image-width and borderimage-height.
True
False
CSS3 browser support
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Most modern browsers support CSS3, but some CSS3 properties require vendor
pre xes to work on certain browsers. A vendor pre x is a pre x added to an
experimental or nonstandard CSS property that only works on a speci c browser
type. Typical vendor pre xes are:
-webkit- for Chrome, Safari, and newer versions of Opera
-moz- for Firefox
-ms- for Internet Explorer
-o- for older versions of Opera
The following CSS speci es a border-image property for WebKit and Opera
browsers:
#borderimg {
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
Linear gradients
A CSS background may use gradient colors that transition from one color to another. Two CSS
gradients exist:
1. Linear gradient - A gradient that follows a straight line
2. Radial gradient - A gradient that radiates outward into an ellipse
©zyBooks 05/19/19 07:23 473675
The CSS function linear-gradient(color1, color2) creates a linear gradient
that transitions from
Irving Jimenez
color1 to color2 when moving from the top edge to the bottom edge.
Additional colors can
StrayerCIS273Spring2019
be supplied to the function. Ex: linear-gradient(red, green, blue, yellow)
transitions from red to green to blue to yellow when moving from top to bottom.
To change the gradient's direction, the rst argument to linear-gradient can be a direction
or an angle:
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
17/44
5/19/2019
CIS 273: Web Design and Development home
Direction - A direction of left, right, top, or bottom with the word to in front. Ex:
to left creates a linear gradient that moves from right to left, and to bottom right
goes from the top-left corner to the bottom-right corner.
Angle - A CSS angle that points in the direction of the linear gradient. The angles 0deg,
90deg, 180deg, and 270deg correspond to to top, to right, to bottom, and
to left, respectively.
©zyBooks
07:23are
473675
The repeating-linear-gradient() function repeats a linear gradient where
the 05/19/19
color values
Irving Jimenez
supplied an optional percent. The percentage value after the last colorStrayerCIS273Spring2019
is the percent of the
gradient's total length the repeating gradient should occupy. Ex:
repeating-linear-gradient(red, yellow 10%) means the red to yellow gradient
occupies 10% of the gradient's total length and is repeated to ll the entire background.
Figure 6.2.3: Examples of linear gradients.
#example1 {
background:
}
#example2 {
background:
}
#example3 {
background:
violet);
}
#example4 {
background:
}
PARTICIPATION
ACTIVITY
6.2.7: Linear gradients.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
1) What direction creates the gradient
below?
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
18/44
5/19/2019
CIS 273: Web Design and Development home
background: lineargradient(_______, orange, red);
Check
Show answer
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
2) What angle (direction of red arrow)
creates the gradient below?
background: lineargradient(_______, blue, green);
Check
Show answer
3) What color and percent creates the
repeating linear gradient that ends in
white?
background: repeating-lineargradient(black, _______);
Check
Show answer
Radial gradients
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
A radial gradient is created with the CSS function radial-gradient(color1, color2), which creates
an ellipse-shaped gradient that begins with color1 in the center and ends with color2 on the
perimeter. More than two colors may be speci ed. A percentage or length can be placed after a
color to give more emphasis to the color. Ex: radial-gradient(red 10%, yellow 30%)
gives more emphasis to red and yellow than the default rendering.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
19/44
5/19/2019
CIS 273: Web Design and Development home
The ellipse shape of a radial gradient ts the gradient's bounding rectangle. However, a circular
radial gradient can be created with the circle argument. Ex:
radial-gradient(circle, red, yellow) creates a circle gradient.
Figure 6.2.4: Examples of radial gradients.
#example1 {
background:
}
#example2 {
background:
}
#example3 {
background:
}
#example4 {
background:
}
PARTICIPATION
ACTIVITY
radial-gradient(red, orange);
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
radial-gradient(red, orange 50%);
radial-gradient(red 20%, orange 50%);
radial-gradient(circle, red 20%, orange 50%);
6.2.8: Radial gradient.
1) A radial gradient is always an ellipse
or circle.
True
False
2) The radial gradient below has a blue
interior and a green exterior.
radial-gradient(green, blue);
True
False
3) What arguments to radialgradient() create the radial
gradient below?
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
20/44
5/19/2019
CIS 273: Web Design and Development home
black, white, red
black 40%, white, red
A radial gradient's ellipse or circle is centered by default in the enclosing rectangle, but the center
position can be speci ed using "at centerX centerY" where centerX and centerY specify
a distance or percentage. Ex: radial-gradient(at 50px 10px, yellow, green)
05/19/19 07:23 473675
speci es a center that is 50px from the left edge and 10px from the©zyBooks
top.
Irving Jimenez
StrayerCIS273Spring2019
By default, a radial gradient's shape reaches to the farthest corner of the containing rectangle. An
extent keyword describes the size of the radial gradient's shape:
closest-side - Circle touches the rectangle's side closest to the circle's center. Ellipse
touches the vertical and horizontal sides closest to the ellipse's center.
farthest-side - Circle touches the rectangle's side farthest from the circle's center.
Ellipse touches the vertical and horizontal sides farthest from the ellipse's center.
closest-corner - Circle or ellipse touches the corner closest to the shape's center.
farthest-corner - Circle or ellipse touches the corner farthest from the shape's center.
(Default behavior.)
PARTICIPATION
ACTIVITY
6.2.9: Positioned radial gradients.
Match the background with the radial gradient CSS that produced the background.
E
D
B
A
F
C
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
radial-gradient(at 60px 100px,
yellow, green, black)
radial-gradient(yellow, green,
black)
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
21/44
5/19/2019
CIS 273: Web Design and Development home
radial-gradient(closest-corner at
20% 30%, yellow, green, black)
radial-gradient(farthest-side at
20% 30%, yellow, green, black)
radial-gradient(closest-side at
©zyBooks 05/19/19 07:23 473675
20% 30%, yellow, green, black)Irving Jimenez
StrayerCIS273Spring2019
radial-gradient(farthest-corner at
20% 30%, yellow, green, black)
Reset
PARTICIPATION
ACTIVITY
6.2.10: Gradient practice.
The web page below displays an advertisement with a background produced by the
CSS function repeating-radial-gradient(). Make the following modi cations
to the HTML and CSS so the rendered web page resembles the expected web page:
1. Add a radial gradient background to the using any colors you prefer, and
position the ellipse close to the bottom-right corner.
2. Create two more advertisements like the ads in the expected web page. Choose
whatever fonts and colors you prefer. One ad should have a linear gradient
background and the other a repeating linear gradient background.
HTML
CSS
1 Vote this Tuesday!
2
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
22/44
5/19/2019
CIS 273: Web Design and Development home
Render web page
Reset code
Your web page
Expected web page
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
CHALLENGE
ACTIVITY
6.2.1: Special effects.
Start
For the tag, set the text-shadow to be green with an offset-x of 3px and offset-y of
12px. SHOW EXPECTED
CSS
HTML
1 p {
2
3
/* Your solution goes here */
4
5 }
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
23/44
5/19/2019
CIS 273: Web Design and Development home
1
2
3
4
Next
Check
Exploring further:
CSS3 text-shadow Property from W3Schools
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
CSS3 box-shadow Property from W3Schools
CSS3 Rounded Corners from W3Schools
CSS3 border-image Property from W3Schools
CSS3 Gradients from W3Schools
6.3 Styling forms
Web forms are an important part of many websites. A usable form allows the user to quickly and
painlessly enter data. Forms require CSS formatting to improve usability.
Figure 6.3.1: HTML form without CSS styling
and an improved form with styling.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
PARTICIPATION
ACTIVITY
6.3.1: Create a styled form.
The web page below displays a simple web form with little styling. Add the following
CSS to create a more usable web form:
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
24/44
5/19/2019
CIS 273: Web Design and Development home
1. Add a label selector that makes all labels have the same width and margin.
Since a label is an inline element, the label's width cannot be changed without
making a label an inline-block. Also, right-align the label text to improve the
reader's ability to mentally link the label to the input eld.
label {
width: 50px;
display: inline-block;
text-align: right;
margin-right: 8px;
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Render the web page and observe the labels are equal length and right aligned.
2. Add a selector that gives the text inputs and drop-down menu the same
consistent width with some padding to increase the size of the inputs and with a
margin to leave some space between the inputs. Also, change the border color
and radius to make the inputs look nicer. Finally, use box-sizing:border-box
to make the browser include the content, padding, and border in the width and
height to make the text inputs the same size as the drop-down menu.
input[type=text], select {
width: 350px;
padding: 10px;
margin: 6px 0;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
}
Render the web page and observe the inputs are equal size and are spaced out.
3. Add styling to the submit button changing the color to blue and changing the
appearance to look less like a traditional browser button. Also, change the default
mouse cursor to a pointer icon to give the user a visual cue that the button is
pressable.
input[type=submit] {
width: 200px;
background-color: #09f;
color: white;
padding: 15px;
margin: 10px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
©zyBooks
05/19/19
07:23 473675
Render the web page and observe the Register button is blue
and much
larger.
Irving Jimenez
Moving the mouse over the button changes the pointer icon.
StrayerCIS273Spring2019
4. To give the user another visual cue that the button is clickable, darken the button
color when the mouse hovers over the button.
input[type=submit]:hover {
background-color: #07d;
}
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
25/44
5/19/2019
CIS 273: Web Design and Development home
Render the web page and verify the Register button's color gets darker when the
mouse hovers on the button.
HTML
CSS
1
2
3
Name
4
5
6
7
Email
8
9
10
11
Service
12
13
Basic
14
Prime
15
Deluxe
16
17
18
19
Render web page
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Reset code
Your web page
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
PARTICIPATION
ACTIVITY
6.3.2: Form styles.
1) In the example above, the label's
width could not be changed until
which CSS property/value was set?
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
26/44
5/19/2019
CIS 273: Web Design and Development home
display: inline-block
display: block
display: none
2) What CSS selector selects only text
inputs?
input
input[type=text]
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
input[type=text],
select
3) In the example above, what happens
if box-sizing:border-box is not
applied to the text inputs and dropdown menu?
The text inputs will not be
visible.
The drop-down menu will not
be as tall as the text inputs.
The text inputs will be wider
than the drop-down menu.
4) In the example above, what visual
cues help the user to know that the
blue rectangle with "Register" in the
middle is a button that can be
pressed?
The button has rounded
corners.
The pointer icon appears
when hovering over the
button.
The pointer icon appears, and
the button color changes
when hovering over the
button.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Proper use of eld labels
Form eld labels should be placed uniformly in the same location on a website's
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
27/44
5/19/2019
CIS 273: Web Design and Development home
Form eld labels should be placed uniformly in the same location on a website s
web forms. The best places for labels are immediately above or to the left of an
input eld. Some developers use only the placeholder HTML attribute in place
of labels to save screen space and reduce clutter, especially on mobile devices.
However, usability experts warn that placeholders used as labels can create a
number of problems for users and should be avoided.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
An input eld can be further improved. Changing an input's border color or background color
diverts the user's attention to the input. Ex: Changing the input border color to red may indicate
an error with the input. Adding a commonly recognized icon to an input eld can improve the
user's ability to recognize the purpose of the input. Ex: Adding a search icon to a search input.
PARTICIPATION
ACTIVITY
6.3.3: Augmenting an input.
The web page below displays a web form on the left and a search box on the right. A
partial email address is entered in the email input eld. Add the following HTML and
CSS:
1. Create a CSS class that sets a text input's border to red to indicate an error:
input.error {
border: 2px solid red;
}
Add the class to the email input eld in the HTML and render the web page. The
email input eld now has a red border.
2. Add a :focus selector that applies styles to an input that has the focus, and
change the background color to a light blue:
input[type=text]:focus {
background-color: lightblue;
}
05/19/19light
07:23 473675
Render the web page and observe that the name and email©zyBooks
inputs become
Irving Jimenez
blue when the inputs have the focus. You may also notice that your browser
StrayerCIS273Spring2019
automatically places a border around an input that has the focus.
3. Add a search icon to the search input by adding a background-image that is
positioned with background-position. Set
background-repeat:no-repeat so the background image only displays
once:
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
28/44
5/19/2019
CIS 273: Web Design and Development home
input[type=search] {
float: right;
background-image:
url("https://resources.zybooks.com/WebProgramming/searchiconv1.png");
background-position: 8px 8px;
background-repeat: no-repeat;
padding-left: 40px;
}
Render the web page and observe the search icon in the search input.
HTML
CSS
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
1
2
3
4
5
Name
6
7
8
9
Email
10
11
12
13
Service
14
15
Basic
16
Prime
17
Deluxe
18
19
Render web page
Reset code
Your web page
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
PARTICIPATION
6.3.4: Augmented inputs.
ACTIVITY
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
29/44
5/19/2019
CIS 273: Web Design and Development home
ACTIVITY
1) Many browsers add a border around
an input when the input has the
focus.
True
False
2) The :focus selector normally
selects more than one element at a
time.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
True
False
3) In the example above, removing the
background-repeat property
causes the background image to
display repeatedly on the search
input.
True
False
Radio buttons and checkboxes use the styling properties supplied by the browser and may differ
between browsers. Styling radio buttons and checkboxes requires:
1. Making the radio button or checkbox's label clickable
2. Hiding the default radio button or checkbox
3. Displaying a custom radio button or checkbox before each label that changes appearance
when checked or focused
To display a custom radio button or checkbox, the ::before pseudo-element selector and
content property are used to insert content before the label's content that looks like a radio
button or checkbox.
PARTICIPATION
ACTIVITY
6.3.5: Styling radio buttons.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Animation content:
undefined
Animation captions:
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
30/44
5/19/2019
CIS 273: Web Design and Development home
1. Radio buttons are plain looking and cannot be styled.
2. The + selector selects elements that are immediately after
elements.
3. Changing the label's cursor to a pointer helps the user know the label is clickable.
4. Changing all radio buttons to have absolute positioning with 1x1 size and clipping the
1x1 area makes the radio buttons invisible, but screen readers still "see" the radio
buttons.
©zyBooks 05/19/19 07:23 473675
5. ::before inserts the content \00a0, a non-breaking space, before theIrving
radioJimenez
button 's
content.
StrayerCIS273Spring2019
6. Custom radio buttons are created by displaying a single empty space within a circular
border.
7. When a radio button is checked, a white bullet with green background replaces the
previous content (the space).
8. When a radio button has the focus, a gray shadow is displayed around the content before
the label.
PARTICIPATION
ACTIVITY
6.3.6: Style the checkboxes.
The web page below displays three styled radio buttons followed by four unstyled
checkboxes. Add the following CSS to style the checkboxes:
1. Modify the CSS that selects the radio button's label and adds a pointer cursor to
also select the checkboxes' labels and add a pointer cursor to the checkboxes'
labels:
input[type=radio] + label, input[type=checkbox]
cursor: pointer;
margin-right: 20px;
font-size: 16pt;
}
+ label {
Render the web page and verify that the cursor changes to a pointer when
mousing over the checkbox labels.
2. Modify the CSS that selects and hides the radio buttons to also select and hide
the checkboxes:
input[type=radio], input[type=checkbox] {
position: absolute;
height: 1px;
width: 1px;
clip: rect(0 0 1 1);
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Render the web page and verify the default checkboxes are no longer visible.
3. Modify the CSS that adds the radio button before the radio button labels to add
the same radio button in front of the checkbox labels:
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
31/44
5/19/2019
CIS 273: Web Design and Development home
input[type=radio] + label::before, input[type=checkbox] + label::before {
content: "\00a0";
/* Non-breaking space */
etc...
}
Render the web page and verify the checkboxes are all circular like the radio
buttons.
4. Modify the CSS so only the radio buttons appear as circles, but the checkboxes do
not:
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
input[type=radio] + label::before {
border-radius: 10px;
}
input[type=radio] + label::before, input[type=checkbox] + label::before {
content: "\00a0";
/* No border-radius property */
etc...
}
Render the web page and verify the checkboxes are now square.
5. Add CSS to display a white checkmark with green background when a checkbox
is checked:
input[type=checkbox]:checked + label::before {
content: "\2713"; /* Checkmark */
color: white;
background: green;
}
Render the web page and verify that clicking on a checkbox displays a checkmark
in the box.
6. Add CSS to display a gray border around the checkbox that has the focus:
input[type=radio]:focus + label::before, input[type=checkbox]:focus +
label::before {
box-shadow: 0 0 0 1px gray;
}
Render the web page and verify that the last checkbox clicked on has the gray
border around the checkbox.
HTML
CSS
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
32/44
5/19/2019
CIS 273: Web Design and Development home
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Size:
Small
Medium
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
Large
StrayerCIS273Spring2019
Flavors:
Raspberry
Render web page
Reset code
Your web page
PARTICIPATION
ACTIVITY
6.3.7: Styling radio buttons and checkboxes.
1) Which label is selected by
input[type=radio] + label?
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
33/44
5/19/2019
CIS 273: Web Design and Development home
2) In the exercise above, the default
radio buttons and checkboxes could
have been hidden using the CSS
display:none. Why is hiding the
radio buttons and checkboxes with
display:none not a good idea?
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Cross-browser support issues.
Screen readers will think the
radio buttons or checkboxes
are not visible.
The display property should
be avoided.
3) Which CSS selector selects only checkboxes
that are checked?
input:checked
input[type=checkbox]:focus
input[type=checkbox]:checked
4) What does the DOM look like after the
CSS and HTML below are rendered?
span::before {
content: "Before";
}
Test
BeforeTest
BeforeTest
TestBefore
CHALLENGE
ACTIVITY
6.3.1: Styling forms.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Start
For the tag, set display to inline-block, use a width of 40px, align the text to the
left, and add a margin on the right of 4px. SHOW EXPECTED
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
34/44
5/19/2019
CIS 273: Web Design and Development home
CSS
1
2
3
4
5
6
7
8
9
10
HTML
label {
/* Your solution goes here */
}
form {
font: 10pt Arial;
background-color: #eee;
padding: 10px;
}
1
Check
2
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
3
4
Next
Exploring further:
CSS Forms from W3Schools
An Extensive Guide To Web Form Usability from Smash Magazine
Placeholders in Form Fields Are Harmful from Nielsen Norman Group
Replacing Radio Buttons Without Replacing Radio Buttons from SitePoint
6.4 Sass
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
CSS preprocessors
Sass is a popular CSS preprocessor that uses CSS-like syntax to build complex CSS stylesheets.
Other popular CSS preprocessors, like Less and Stylus, offer similar and unique features with
different syntax.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
35/44
5/19/2019
CIS 273: Web Design and Development home
The Sass website has instructions on installing the Sass preprocessor on a variety of operating
systems. Some developers prefer to run the Sass preprocessor from the command line or from
an application like Koala. The Sass preprocessor compiles a Sass le (.scss) into a CSS (.css)
le.
Sass version 3 introduced a new syntax called Sassy CSS (SCSS), which uses semicolons and
brackets like CSS. Some online references still refer to the old Sass syntax which relies on
indentation and has no brackets.
©zyBooks 05/19/19 07:23 473675
PARTICIPATION
ACTIVITY
Irving Jimenez
StrayerCIS273Spring2019
6.4.1: Compiling SCSS into CSS.
Animation captions:
1. A .scss le contains SCSS syntax.
2. The sass command-line tool compiles styles.scss and outputs the resulting CSS to
styles.css.
3. Variables begin with a $ and are set like CSS properties.
4. The value of the variables $font-face and $font-color are inserted into the resulting CSS.
PARTICIPATION
ACTIVITY
6.4.2: Sass CSS preprocessor.
1) SCSS is syntactically different than
the original Sass syntax.
True
False
2) The sass command-line tool creates
a .scss le from a .css le.
True
False
3) The SCSS below results in CSS that
sets a web page's background color
to blue.
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
$theme-color: blue;
body {
background-color: $theme-color;
}
True
False
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
36/44
5/19/2019
CIS 273: Web Design and Development home
4) An advantage to using an SCSS
variable to store a color value used
multiple times in a stylesheet is that
if the color needs to be changed in
the future, only the variable needs to
be changed.
True
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
False
Nesting
Selectors may be nested in Sass to create child selectors that only apply to the parent selector.
In the gure below, the strong child selector is nested in a .notes parent selector, creating a
.notes strong selector in the resulting CSS.
Figure 6.4.1: Selector nesting.
// SCSS
/* Resulting CSS */
.notes {
font-size: smaller;
.notes {
font-size: smaller;
}
strong {
color: green;
}
}
.notes strong {
color: green;
}
The & character is used to reference the parent selector from a child selector's properties.
Figure 6.4.2: Referencing the parent with &.
// SCSS
/* Resulting CSS */
a {
text-decoration: none;
&:hover {
color: blue;
}
}
a {
text-decoration: none;
}
a:hover {
color: blue;
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
A number of CSS properties begin with the same pre x. Ex: font-family, font-size, and
font-weight all begin with the same font pre x. Sass allows properties that share the same
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
37/44
5/19/2019
CIS 273: Web Design and Development home
pre x to be nested under the pre x.
Figure 6.4.3: Property nesting.
// SCSS
/* Resulting CSS */
p {
font: {
family: Arial;
size: 12pt;
weight: bold;
}
}
PARTICIPATION
ACTIVITY
p {
font-family: Arial;
font-size: 12pt;
font-weight: bold;
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
6.4.3: Nested selectors and properties.
Select the CSS that results from the given SCSS.
1)
p {
em {
color: red;
}
}
p em {
color: red;
}
p + em {
color: red;
}
p, em {
color: red;
}
2)
section {
article {
&:hover {
color: blue;
}
}
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
section:hover {
color: blue;
}
section hover {
color: blue;
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
38/44
5/19/2019
CIS 273: Web Design and Development home
}
section article:hover
{
color: blue;
}
3)
.highlight {
border: {
width: 2px;
}
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
.highlight {
border: 2px;
}
.highlight {
border-width: 2px;
}
.highlight border {
width: 2px;
}
Variables and arithmetic
SassScript is a set of extensions to CSS that allow properties to use variables, arithmetic, and
functions. SassScript also provides basic control directives for performing conditional logic and
looping.
A SassScript variable begins with a $ and can store one of the following data types:
Number - Any number that is optionally followed by a CSS unit. Ex: 3, 5.1, 20px
String - "Double", 'single', or unquoted strings. Ex: "red", 'red', red
Color - Color name or value. Ex: green, #00ff00, rgb(0,255,0)
Boolean - true or false
Null - null
List of values - Separated by spaces or commas. Ex: 10px 20px 30px 40px,
Helvetica, Arial, sans-serif
©zyBooks 05/19/19 07:23 473675
Map - Key/value pairs. Ex: (111:red, 222:blue)
Irving Jimenez
StrayerCIS273Spring2019
Basic arithmetic like addition, subtraction, multiplication, and division may be performed on
numbers and numeric variables. Ex: 20px + 15 = 35px. Arithmetic on color values results in
the red, green, and blue values being added, subtracted, multiplied, or divided one at a time. Ex:
#0011aa + #bb2244 results in 00 + bb = bb, 11 + 22 = 33, and aa + 44 = ee; so the nal value
is #bb33ee.
PARTICIPATION
6.4.4: Performing SassScript
ACTIVITY
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
arithmetic.
39/44
5/19/2019
g
ACTIVITY
p
CIS 273: Web Design and Development home
Animation captions:
1.
2.
3.
4.
5.
$width and $size store numbers, but $color stores a color.
50px is subtracted from the value of the $width variable.
The variable $size is multiplied by 0.9.
©zyBooks 05/19/19 07:23 473675
$size is divided by 2, and then 14 is added to the result.
Irving Jimenez
Multiplying $color by 2 results in red, green, and blue components
each being multiplied
StrayerCIS273Spring2019
by 2.
PARTICIPATION
ACTIVITY
6.4.5: Variables and arithmetic.
What is $value?
1)
$value: 20px - 15;
Check
2)
$value: 20pt + (10 / 2) ;
Check
3)
Show answer
$value: #ff1150 - #001120;
Check
4)
Show answer
Show answer
$value: #ff1150 + 2;
Check
Show answer
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
Functions
SassScript includes a large number of utility functions.
Table 6 4 1: Some SassScript functions
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
40/44
5/19/2019
CIS 273: Web Design and Development home
Table 6.4.1: Some SassScript functions.
Function
Description
Example
/* Returns #d00
lighten(color, amount)
Returns a color lightened by
*/
$color:
an amount between 0% and
lighten(#a00,
©zyBooks
05/19/19 07:23 473675
100%
10%);
Irving Jimenez
StrayerCIS273Spring2019
Returns the inverse (negative)
of a color
/* Returns #5ff
*/
$color:
invert(#a00);
to-upper-case(string)
Returns string using all
uppercase characters.
/* Returns
"BEHOLD!" */
$message: touppercase("Behold!");
round(number)
Returns a number rounded to
the nearest whole number
/* Returns 21px
*/
$width:
round(20.5px);
random(limit)
Returns a random integer
between 1 and limit
(inclusive)
/* Returns a
number between 1
and 5 */
$width: random(5)
* 20px;
invert(color)
PARTICIPATION
ACTIVITY
6.4.6: SassScript functions.
What is $value?
1)
$value: lighten(black, 20%);
#000
white
#333
2)
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
$value: invert(white);
black
white
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
41/44
5/19/2019
CIS 273: Web Design and Development home
gray
3)
$value: round(16.4pt);
16.4pt
16pt
17pt
4)
$value: random(3) * 100px;
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
0, 1, 2, or 3
1, 2, or 3
100px, 200px, or 300px
Mixins
A mixin is set of reusable styles and is de ned by the @mixin directive. A directive is an
extension to the CSS at-rules, which are statements that begin with the @ character. Mixins may
take arguments, which give mixins the ability to customize the styles that the mixin de nes.
Mixins are included in a document using the @include directive.
PARTICIPATION
ACTIVITY
6.4.7: Including mixins.
Animation captions:
1. Two mixins are de ned: cool-font and highlight.
2. The special class includes the cool-font mixin.
3. The highlight mixin is included with two arguments, red and 2px, which are assigned to
$color and $width.
PARTICIPATION
ACTIVITY
6.4.8: Mixins.
Given the mixins below, match the SCSS with the resulting CSS.
@mixin shadow-font {
font-size: 12pt;
text-shadow: 2px 2px blue;
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
@mixin pretty-border($img, $size) {
border: 10px solid transparent;
padding: 20px;
border-image: url($img) $size round;
}
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
42/44
5/19/2019
CIS 273: Web Design and Development home
div {
@include shadow-font;
}
ol {
@include shadow-font;
}
div {
@include shadow-font;
}
div {
@include pretty-border(
"border.png", 30);
}
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
div {
@include pretty-border(
"border.png", 30);
@include shadow-font;
}
div {
font-size: 12pt;
text-shadow: 2px 2px blue;
}
div {
border: 10px solid transparent;
padding: 20px;
border-image: url("border.png") 30 ro
}
div {
border: 10px solid transparent;
padding: 20px;
border-image: url("border.png") 30 ro
font-size: 12pt;
text-shadow: 2px 2px blue;
}
div {
font-size: 12pt;
©zyBooks
text-shadow: 2px
2px 05/19/19
blue; 07:23 473675
Irving Jimenez
}
StrayerCIS273Spring2019
ol {
font-size: 12pt;
text-shadow: 2px 2px blue;
}
Reset
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
43/44
5/19/2019
CIS 273: Web Design and Development home
Control directives and expressions
Sass contains other features including:
Control directives, like @if and @for, that support conditional styling and looping
©zyBooks 05/19/19 07:23 473675
Ability to import SCSS and Sass les using the @import directive
Irving Jimenez
StrayerCIS273Spring2019
Ability to extend the styles in a class with the @extend directive
Ability to write custom functions
See the Sass website's documentation for more details.
Exploring further:
Sass
Koala
Less
Stylus
©zyBooks 05/19/19 07:23 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/6/print
44/44
5/19/2019
CIS 273: Web Design and Development home
7.1 Mobile websites and browsers
Much of the web was inaccessible to mobile phones before 2007 because most mobile devices
were unable to render complex HTML. The introduction of the iPhone in 2007 inaugurated the
©zyBooks 05/19/19 07:25 473675
smartphone era and led to the development of innovative mobile web browsers
could render
Irving that
Jimenez
the same web pages designed for traditional web browsers. A mobile StrayerCIS273Spring2019
web browser is a web
browser designed for mobile devices that can display web pages using HTML, CSS, and
JavaScript.
Today's mobile browsers are much like their desktop counterparts although mobile browsers
often lack the ability to use plugins developed for desktop browsers. The popularity of
smartphones has encouraged web developers to create mobile websites. A mobile website is a
website that is designed for mobile devices with smaller screen sizes and touch interfaces.
Early mobile markup languages
A number of markup languages were once used to create simple web pages for
rst-generation smartphones and personal digital assistants (PDAs). Ex: HDML,
WML, cHTML, iHTML, and XHTML-MP. Older markup languages were used to
render simple web pages that often appeared on monochromatic screens. Some
developers continue to use these markup languages to create web pages for
feature phones, inexpensive phones that are popular in many developing countries.
Figure 7.1.1: CNN.com for desktop and mobile
browsers.
©zyBooks 05/19/19 07:25 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print
1/30
5/19/2019
CIS 273: Web Design and Development home
Figure 7.1.2: Desktop vs. mobile access in North America.
©zyBooks 05/19/19 07:25 473675
Irving Jimenez
StrayerCIS273Spring2019
Source: StatCounter.com
Figure 7.1.3: Top 9 mobile browsers in North America.
©zyBooks 05/19/19 07:25 473675
Irving Jimenez
StrayerCIS273Spring2019
Source: StatCounter.com
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print
2/30
5/19/2019
CIS 273: Web Design and Development home
PARTICIPATION
ACTIVITY
7.1.1: Mobile web browsers.
Refer to the gures above.
1) According to StatCounter, the Safari
mobile web browser is most often
used to access the web in North
America.
©zyBooks 05/19/19 07:25 473675
Irving Jimenez
StrayerCIS273Spring2019
True
False
2) The Chrome browser seems to be
replacing the Android browser on
many phones.
True
False
3) According to StatCounter, mobile
browsers will likely account for more
web tra c than desktop browsers in
the next year.
True
False
4) StatCounter is able to track mobile
and desktop browser usage by using
a device's camera to watch users
accessing the web.
True
False
©zyBooks 05/19/19 07:25 473675
Mobile and desktop websites are created with the same technologies: HTML,
CSS,
and
Irving
Jimenez
StrayerCIS273Spring2019
JavaScript. However, mobile websites differ from desktop websites in some signi cant ways.
Designers of mobile websites must consider:
Screen size is much smaller than desktops.
User interaction is with touch, not a mouse.
Mobile devices may have limited or slower Internet connectivity.
Many users have data plans that limit how much content can be downloaded.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print
3/30
5/19/2019
CIS 273: Web Design and Development home
Users might have a different purpose for accessing a website when using a mobile device
vs. using a desktop.
Limited memory and CPU speed of mobile devices means mobile browsers are not as
powerful as desktop browsers.
Mobile websites may take advantage of GPS and accelerometer data.
PARTICIPATION
ACTIVITY
7.1.2: Designing mobile websites.
1) Mobile websites often show less
information than their desktop
counterparts....
Purchase answer to see full
attachment