Introduction to the Applied Visual Design Challenges

Visual Design in web development is a broad topic. It combines typography, color

theory, graphics, animation, and page layout to help deliver a site's message. The
definition of good design is a well-discussed subject, with many books on the theme.

At a basic level, most web content provides a user with information. The visual design
of the page can influence its presentation and a user's experience. In web development,
HTML gives structure and semantics to a page's content, and CSS controls the layout
and appearance of it.

This section covers some of the basic tools developers use to create their own visual
designs.

Applied Visual Design: Create Visual Balance Using

the text-align Property
This section of the curriculum focuses on Applied Visual Design. The first group
of challenges build on the given card layout to show a number of core principles.

Text is often a large part of web content. CSS has several options for how to
align it with the text-alignproperty.

text-align: justify;causes all lines of text except the last line to meet the left
and right edges of the line box.

text-align: center;centers the text

text-align: right;right-aligns the text

And text-align: left;(the default) left-aligns the text.

Align the h4tag's text, which says "Google", to the center. Then justify the
paragraph tag which contains information about how Google was founded.

<style>
h4 {
text-align:center;
}
p {
text-align:justify;
}

Applied Visual Design: Adjust the Width of an

Element Using the width Property
You can specify the width of an element using the widthproperty in CSS. Values
can be given in relative length units (such as em), absolute length units (such as
px), or as a percentage of its containing parent element. Here's an example that
changes the width of an image to 220px:

img {
  width: 220px;
}

Add a widthproperty to the entire card and set it to an absolute value of 245px.
Use the fullCardclass to select the element.

Applied Visual Design: Adjust the Height of an

Element Using the height Property
You can specify the height of an element using the heightproperty in CSS,
similar to the widthproperty. Here's an example that changes the height of an
image to 20px:

img {
  height: 20px;
}

Add a heightproperty to the h4tag and set it to 25px.

Applied Visual Design: Use the em Tag to Italicize

Text
To emphasize text, you can use the emtag. This displays text as italicized, as the
browser applies the CSS of font-style: italic;to the element.

Wrap an emtag around the contents of the paragraph tag to give it

emphasis. Applied Visual Design: Use the s Tag to
Strikethrough Text
To strikethrough text, which is when a horizontal line cuts across the characters,
you can use the stag. It shows that a section of text is no longer valid. With
the stag, the browser applies the CSS of text-decoration: line-through;to the
element.
Wrap the stag around "Google" inside the h4tag and then add the word Alphabet
beside it, which should not have the strikethrough formatting.

<h4><s
>Google</s> Alphabet</h4>
<p><em>Google was founded by Larry Page and Sergey Brin while they
were <u>Ph.D. students</u> at <strong>Stanford
University</strong>.</em></p>

Applied Visual Design: Create a Horizontal Line Using

the hr Element
You can use the hrtag to add a horizontal line across the width of its containing
element. This can be used to define a change in topic or to visually separate
groups of content.

Add an hrtag underneath the h4which contains the card title.

Note
In HTML, hris a self-closing tag, and therefore doesn't need a separate closing
tag.

<style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
 }
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they
were <u>Ph.D. students</u> at <strong>Stanford
University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank"
class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank"
class="links">Sergey Brin</a>
</div>
</div>
</div>

Applied Visual Design: Create a Horizontal Line Using

the hr Element
You can use the hrtag to add a horizontal line across the width of its containing
element. This can be used to define a change in topic or to visually separate
groups of content.

Add an hrtag underneath the h4which contains the card title.

Note
In HTML, hris a self-closing tag, and therefore doesn't need a separate closing
tag.

Applied Visual Design: Adjust the background-color

Property of Text
Instead of adjusting your overall background or the color of the text to make the
foreground easily readable, you can add a background-colorto the element
holding the text you want to emphasize. This challenge uses rgba()instead
of hexcodes or normal rgb().

rgba stands for:

  r = red
  g = green
  b = blue
  a = alpha/level of opacity

The RGB values can range from 0 to 255. The alpha value can range from 1,
which is fully opaque or a solid color, to 0, which is fully transparent or
clear. rgba()is great to use in this case, as it allows you to adjust the opacity. This
means you don't have to completely block out the background.

You'll use background-color: rgba(45, 45, 45, 0.1) for this challenge. It

produces a dark gray color that is nearly transparent given the low opacity value
of 0.1.

To make the text stand out more, adjust the background-colorof the h4element to

the given rgba()value.

Also for the h4, remove the heightproperty and add paddingof 10px.

<style>
h4 {
text-align: center;

background-color: rgba(45,45,45,0.1);
padding: 10px;

}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
 <div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they
were <u>Ph.D. students</u> at <strong>Stanford
University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank"
class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank"
class="links">Sergey Brin</a>
</div>
</div>
</div>
 Applied Visual Design: Adjust the Size of a Header
Versus a Paragraph Tag
The font size of header tags (h1through h6) should generally be larger than the
font size of paragraph tags. This makes it easier for the user to visually
understand the layout and level of importance of everything on the page. You
use the font-sizeproperty to adjust the size of the text in an element.

To make the heading significantly larger than the paragraph, change the font-
sizeof the h4tag to 27 pixels.

<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size:27px;

}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
 <p><em>Google was founded by Larry Page and Sergey Brin while they
were <u>Ph.D. students</u> at <strong>Stanford
University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank"
class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank"
class="links">Sergey Brin</a>
</div>
</div>
</div>

Applied Visual Design: Add a box-shadow to a Card-

like Element
The box-shadowproperty applies one or more shadows to an element.

The box-shadowproperty takes values for offset-x(how far to push the shadow

horizontally from the element), offset-y(how far to push the shadow vertically
from the element), blur-radius, spread-radiusand a color value, in that order.
The blur-radiusand spread-radiusvalues are optional.

Here's an example of the CSS to create multiple shadows with some blur, at
mostly-transparent black colors:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px

rgba(0,0,0,0.23);

The element now has an id of thumbnail. With this selector, use the example CSS
values above to place a box-shadowon the card.

<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
 .fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
#thumbnail{
box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they
were <u>Ph.D. students</u> at <strong>Stanford
University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank"
class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank"
class="links">Sergey Brin</a>
</div>
</div>
</div>

Applied Visual Design: Decrease the Opacity of an

Element
The opacityproperty in CSS is used to adjust the opacity, or conversely, the
transparency for an item.

A value of 1 is opaque, which isn't transparent at all.

A value of 0.5 is half see-through.
A value of 0 is completely transparent.
The value given will apply to the entire element, whether that's an image with
some transparency, or the foreground and background colors for a block of text.

Set the opacityof the anchor tags to 0.7 using linksclass to select them.

<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity:0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they
were <u>Ph.D. students</u> at <strong>Stanford
University</strong>.</em></p>
</div>
<div class="cardLinks">
 <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank"
class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank"
class="links">Sergey Brin</a>
</div>
</div>
</div>
 Applied Visual Design: Use the text-transform
Property to Make Text Uppercase
The text-transformproperty in CSS is used to change the appearance of text. It's
a convenient way to make sure text on a webpage appears consistently, without
having to change the text content of the actual HTML elements.

The following table shows how the different text-transformvalues change the

example text "Transform me".

Value Result

lowercase "transform me"

uppercase "TRANSFORM ME"

capitalize "Transform Me"

initial Use the default value

inherit Use the text-transformvalue from the parent element

none Default: Use the original text

Transform the text of the h4to be uppercase using the text-transformproperty.

 Applied Visual Design: Set the font-size for Multiple
Heading Elements
The font-sizeproperty is used to specify how large the text is in a given element.
This rule can be used for multiple elements to create visual consistency of text
on a page. In this challenge, you'll set the values for all h1through h6tags to
balance the heading sizes.

 Set the font-sizeof the h1tag to 68px.

 Set the font-sizeof the h2tag to 52px.
 Set the font-sizeof the h3tag to 40px.
 Set the font-sizeof the h4tag to 32px.
 Set the font-sizeof the h5tag to 21px.
 Set the font-sizeof the h6tag to 14px.
 <style>
 h1{
 font-siz:68px;
 }

 h2{
 font-size: 52px;
 }

 h3{
 font-size: 40px;
 }
 h4{
 font-size: 32px;
 }

 h5{
 font-size: 21px;
 }
 h6{
 font-size: 14px;
 }


 Applied Visual Design: Set the font-weight for
Multiple Heading Elements
You set the font-sizeof each heading tag in the last challenge, here you'll adjust
the font-weight.

The font-weightproperty sets how thick or thin characters are in a section of

text.

 Set the font-weightof the h1tag to 800.

 Set the font-weightof the h2tag to 600.
 Set the font-weightof the h3tag to 500.
 Set the font-weightof the h4tag to 400.
 Set the font-weightof the h5tag to 300.
 Set the font-weightof the h6tag to 200.

Applied Visual Design: Set the font-size of Paragraph

Text
The font-sizeproperty in CSS is not limited to headings, it can be applied to any
element containing text.

Change the value of the font-sizeproperty for the paragraph to 16px to make it

more visible.

Applied Visual Design: Set the line-height of

Paragraphs
CSS offers the line-heightproperty to change the height of each line in a block of
text. As the name suggests, it changes the amount of vertical space that each line
of text gets.

Add a line-heightproperty to the ptag and set it to 25px.

<style>
p {
font-size: 16px;
line-height:25px;

}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</p>

Applied Visual Design: Adjust the Hover State of an

Anchor Tag
This challenge will touch on the usage of pseudo-classes. A pseudo-class is a
keyword that can be added to selectors, in order to select a specific state of the
element.

For example, the styling of an anchor tag can be changed for its hover state
using the :hoverpseudo-class selector. Here's the CSS to change the colorof the
anchor tag to red during its hover state:

a:hover {
  color: red;
}

The code editor has a CSS rule to style all atags black. Add a rule so that when
the user hovers over the atag, the coloris blue.

<style>
a {
color: #000;
}
a:hover{
color:blue;
}

</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
 Applied Visual Design: Change an Element's Relative
Position
CSS treats each HTML element as its own box, which is usually referred to as
the CSS Box Model. Block-level items automatically start on a new line (think
headings, paragraphs, and divs) while inline items sit within surrounding
content (like images or spans). The default layout of elements in this way is
called the normal flowof a document, but CSS offers the position property to
override it.

When the position of an element is set to relative, it allows you to specify how
CSS should move it relative to its current position in the normal flow of the
page. It pairs with the CSS offset properties of leftor right, and topor bottom.
These say how many pixels, percentages, or ems to move the item away from
where it is normally positioned. The following example moves the paragraph 10
pixels away from the bottom:

p {
  position: relative;
  bottom: 10px;
}

Changing an element's position to relative does not remove it from the normal
flow - other elements around it still behave as if that item were in its default
position.

Note
Positioning gives you a lot of flexibility and power over the visual layout of a
page. It's good to remember that no matter the position of elements, the
underlying HTML markup should be organized and make sense when read from
top to bottom. This is how users with visual impairments (who rely on assistive
devices like screen readers) access your content.

Change the positionof the h2to relative, and use a CSS offset to move it 15 pixels

away from the topof where it sits in the normal flow. Notice there is no impact
on the positions of the surrounding h1 and p elements.

The h2element should have a positionproperty set to relative.

Your code should use a CSS offset to relatively position the h215px away from
the topof where it normally sits.
<style>
h2 {
position:relative;
top:15px;

}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>

Applied Visual Design: Move a Relatively Positioned

Element with CSS Offsets
The CSS offsets of topor bottom, and leftor righttell the browser how far to
offset an item relative to where it would sit in the normal flow of the document.
You're offsetting an element away from a given spot, which moves the element
away from the referenced side (effectively, the opposite direction). As you saw in
the last challenge, using the top offset moved the h2downwards. Likewise, using
a left offset moves an item to the right.

Use CSS offsets to move the h215 pixels to the right and 10 pixels up.

Your code should use a CSS offset to relatively position the h210px upwards. In
other words, move it 10px away from the bottomof where it normally sits.
Your code should use a CSS offset to relatively position the h215px towards the
right. In other words, move it 15px away from the leftof where it normally sits.
<head>
<style>
h2 {
position: relative;
bottom:10px;
left:15px;

}
</style>
</head>
<body>
 <h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>

Applied Visual Design: Lock an Element to its Parent

with Absolute Positioning
The next option for the CSS positionproperty is absolute, which locks the
element in place relative to its parent container. Unlike the relativeposition,
this removes the element from the normal flow of the document, so surrounding
items ignore it. The CSS offset properties (top or bottom and left or right) are
used to adjust the position.

One nuance with absolute positioning is that it will be locked relative to its
closest positioned ancestor. If you forget to add a position rule to the parent
item, (this is typically done using position: relative;), the browser will keep
looking up the chain and ultimately default to the body tag.

Lock the #searchbarelement to the top-right of its sectionparent by declaring

its positionas absolute. Give it topand rightoffsets of 50 pixels each.

The #searchbarelement should have a positionset to absolute.

Your code should use the topCSS offset of 50 pixels on the #searchbarelement.
Your code should use the rightCSS offset of 50 pixels on the #searchbarelement.
<style>
#searchbar {
position:absolute;
top:50px;
right:50px;

}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
 </section>
</body>

Applied Visual Design: Lock an Element to the

Browser Window with Fixed Positioning
The next layout scheme that CSS offers is the fixedposition, which is a type of
absolute positioning that locks an element relative to the browser window.
Similar to absolute positioning, it's used with the CSS offset properties and also
removes the element from the normal flow of the document. Other items no
longer "realize" where it is positioned, which may require some layout
adjustments elsewhere.

One key difference between the fixedand absolutepositions is that an element

with a fixed position won't move when the user scrolls.

The navigation bar in the code is labeled with an id of navbar. Change

its positionto fixed, and offset it 0 pixels from the topand 0 pixels from the left.
Notice the (lack of) impact to the h1position, it hasn't been pushed down to
accommodate the navigation bar and would need to be adjusted separately.

The #navbarelement should have a positionset to fixed.

Your code should use the topCSS offset of 0 pixels on the #navbarelement.
Your code should use the leftCSS offset of 0 pixels on the #navbarelement.
<style>
#navbar {
position:fixed;
top: 0px;
left:0px;

width: 100%;
background-color: #767676;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
}
</style>
<body>
 <header>
<h1>Welcome!</h1>
<nav id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>