100% found this document useful (1 vote)

2K views

Css Code Academy

Uploaded by

ilias ahmed

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

100% found this document useful (1 vote)

2K views

Css Code Academy

Uploaded by

ilias ahmed

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 468

<!

DOCTYPE html>

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet'

type='text/css'>

<link href="style.css" rel="stylesheet">

</head>

<body>

<h1>Innovation Cloud</h1>

<p>Connect your ideas globally</p>

<a class="btn" href="#">Learn More</a>

</div>

<ul>

<li>Register</li>

<li>Schedule</li>

<li>Sponsors</li>

<li>About</li>

<li>Contact</li>

</ul>

</div>
</div>

<img src="https://content.codecademy.com/projects/innovation-cloud/cloud.svg" height="128"

width="196">

<h2>The Innovation Cloud Conference</h2>

<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm
new solutions to challenging problems.</p>

<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on
your most challenging projects.</p>

<p>Learn about the latest research and technologies that you can use immediately to invent the
future.</p>

</div>

<h2>Stay Connected</h2>

<p>Receive weekly insights from industry insiders.</p>

<a class="btn" href="#">Join</a>

</div>

<p>© Innovation Cloud Conference</p>

</div>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
<title>Vacation World</title>
<link href='style.css' rel='stylesheet'>
</head>

<body>
  <img src='https://content.codecademy.com/courses/freelance-1/unit-
2/explorer.jpeg' />
  <h1 class='title uppercase' id='article-title'>Top Vacation Spots</h1>
  <h5 class='author-class' id='author-id'>By: Stacy Gray</h5>
  <h6 id='publish-time'>Published: 2 Days Ago</h6>

<p>The world is full of fascinating places. Planning the perfect vacation invo
lves packing up, leaving home, and experiencing something new.</p>

  <h2 class='destination heading-background'>1. Florence, Italy</h2>
  <div class='description'>A city-size shrine to the Renaissance, Florence offer
s frescoes, sculptures, churches, palaces, and other monuments from the richest
cultural flowering the world has known. Names from its dazzling historical past;
Dante, Michelangelo, Galileo, Machiavelliare are some of the most resonant of th
e medieval age. <a href='https://www.nationalgeographic.com/travel/destination/fl
orence' target='_blank'>Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Museums</li>
      <li>Bike Tours</li>
      <li>Historical Monuments</li>
    </ul>
  </div>

  <h2 class='destination heading-background'>2. Beijing, China</h2>
  <div class='description'>A city in the midst of reinventing itself and continu
ing to build on the success of the 2008 Summer Olympics, Beijing is a place of f
renzied construction. New housing, new roads, and new sports venues seem to spri
ng up overnight. At the same time, the capital of the Peoples Republic of China
remains an epicenter of tradition, with the treasures of nearly 2,000 years as t
he imperial capital still on view in the famed Forbidden City and in the luxuria
nt pavilions and gardens of the Summer Palace.
    <a href='https://www.nationalgeographic.com/travel/destination/beijing' targe
t='_blank'>Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Biking</li>
      <li>Historical Sites</li>
      <li>Restaurants and Dining</li>
    </ul>
  </div>

  <h2 class='destination heading-background'>3. Seoul, South Korea</h2>
  <div class='description'>The Korean capital is a city of contrasts. Fourteenth
-century city gates squat in the shadow of 21st-century skyscrapers, while the b
road Han River is back-dropped by granite mountains rising in the city center co
mplete with alpine highways speeding around their contours and temples nestling
among their crags. Fashionable, gadget-laden youths battle for sidewalk space wi
th fortune-tellers and peddlers, while tiny neighborhoods of traditional cottage
s contrast with endless ranks of identical apartments.
    <a href='https://www.nationalgeographic.com/travel/destination/seoul' target=
'_blank'>Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Parasailing</li>
      <li>Segway Tours</li>
      <li>Spas and Resorts</li>
    </ul>
  </div>

  <h2 class='heading-background'> More Destinations </h2>
  <ul>
    <li><h4 class='destination'>Jackson Hole, Wyoming</h4></li>
    <li><h4 class='destination'>Cape Town, South Africa</h4></li>
    <li><h4 class='destination'>La Paz, Bolivia</h4></li>
  </ul>

<p>—Best of luck with your travels, and be sure to send pictures and sto
ries. We'd love to hear them!</p>

</body>

</html>

ELECTORS
Descendant Combinator
In addition to chaining selectors to select elements, CSS also supports
selecting elements that are nested within other HTML elements, also known
as descendants. For instance, consider the following HTML:

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>
The nested <li> elements are descendants of the <ul> element and can be
selected with the descendant combinator like so:

.main-list li {

}
In the example above, .main-list selects the element with the.main-list class
(the <ul> element). The descendant <li>‘s are selected by adding li to the
selector, separated by a space. This results in .main-list li as the final
selector.

Selecting elements in this way can make our selectors even more specific by
making sure they appear in the context we expect.

Instructions

1.
In index.html, each destination has a paragraph with a description class
below it. Nested within each description paragraph, is an <h5> element with
the text “Top Attractions”. They’re a little hard to read since they turned
yellow. Let’s fix that!

Navigate to style.css. Add a ruleset that uses the descendant combinator to

target only the <h5> descendants of elements with the class .description.
Checkpoint 2 Passed

Hint
To select the correct elements here, add the class selector and then the type
selector before the curly braces. Don’t forget the space between the selectors!
2.
Inside the curly braces of the selector, add a declaration of:

color: blueviolet;
SELECTORS
Review
Throughout this lesson, you learned how to select HTML elements with CSS and apply
styles to them. Let’s review what you learned:

 CSS can select HTML elements by type, class, ID, and attribute.
 All elements can be selected using the universal selector.
 An element can have different states using the pseudo-class selector.
 Multiple CSS classes can be applied to one HTML element.
 Classes can be reusable, while IDs can only be used once.
 IDs are more specific than classes, and classes are more specific than type. That
means IDs will override any styles from a class, and classes will override any styles
from a type selector.
 Multiple selectors can be chained together to select an element. This raises the
specificity but can be necessary.
 Nested elements can be selected by separating selectors with a space.
 Multiple unrelated selectors can receive the same styles by separating the
selector names with commas.

Great work this lesson. With this knowledge, you’ll be able to use CSS to change the
look and feel of websites to make them look great!

<!DOCTYPE html>

<html>

<head>

<title>Vacation World</title>

<link href='style.css' rel='stylesheet'>

</head>

<body>

<img src='https://content.codecademy.com/courses/freelance-1/unit-2/explorer.jpeg' />

<h1 class='title uppercase' id='article-title'>Top Vacation Spots</h1>

<h5 class='author-class' id='author-id'>By: Stacy Gray</h5>

<h6 id='publish-time'>Published: 2 Days Ago</h6>

<p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving
home, and experiencing something new.</p>

<h2 class='destination heading-background'>1. Florence, Italy</h2>

<div class='description'>A city-size shrine to the Renaissance, Florence offers frescoes, sculptures,
churches, palaces, and other monuments from the richest cultural flowering the world has known.
Names from its dazzling historical past; Dante, Michelangelo, Galileo, Machiavelliare are some of the
most resonant of the medieval age. <a
href='https://www.nationalgeographic.com/travel/destination/florence' target='_blank'>Learn
More</a>.

<h5>Top Attractions</h5>

<ul>

<li>Museums</li>

<li>Bike Tours</li>

<li>Historical Monuments</li>

</ul>

</div>

<h2 class='destination heading-background'>2. Beijing, China</h2>

<div class='description'>A city in the midst of reinventing itself and continuing to build on the success
of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and
new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of
China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital
still on view in the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer
Palace.

<a href='https://www.nationalgeographic.com/travel/destination/beijing' target='_blank'>Learn

More</a>.
<h5>Top Attractions</h5>

<ul>

<li>Biking</li>

<li>Historical Sites</li>

<li>Restaurants and Dining</li>

</ul>

</div>

<h2 class='destination heading-background'>3. Seoul, South Korea</h2>

<div class='description'>The Korean capital is a city of contrasts. Fourteenth-century city gates squat in
the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite
mountains rising in the city center complete with alpine highways speeding around their contours and
temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with
fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless
ranks of identical apartments.

<a href='https://www.nationalgeographic.com/travel/destination/seoul' target='_blank'>Learn

More</a>.

<h5>Top Attractions</h5>

<ul>

<li>Parasailing</li>

<li>Segway Tours</li>

<li>Spas and Resorts</li>

</ul>

</div>

<h2 class='heading-background'> More Destinations </h2>

<ul>

<li><h4 class='destination'>Jackson Hole, Wyoming</h4></li>

<li><h4 class='destination'>Cape Town, South Africa</h4></li>

<li><h4 class='destination'>La Paz, Bolivia</h4></li>

</ul>

<p>—Best of luck with your travels, and be sure to send pictures and stories. We'd love to hear
them!</p>

</body>

</html>

Style.css

border: 1px solid red;

color: green;

h1 {

color: maroon;

}
.title {

color: teal;

.uppercase {

text-transform: uppercase;

#article-title {

font-family: cursive;

a[href*='florence'] {

color: lightgreen;

a[href*='beijing'] {

color: lightblue;

a[href*='seoul'] {

color: lightpink;

}
a:hover {

color:darkorange;

.heading-background {

background-color: aqua;

#publish-time {

color: lightgray;

h5 {

color: yellow;

.author-class {

color: pink;

#author-id {

color: cornflowerblue;

h2.destination {
font-family: Tahoma;

.description h5 {

color: blueviolet;

li h4 {

color: gold;

h4 {

color: dodgerblue;

li,

h5 {

font-family: monospace;

}
Style.css

body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;

font-size: 22px;
line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

}
.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

.content {

padding: 40px;

.image {

background-image: url("https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-
img_soccer.jpeg");

background-size: cover;

background-position: center;

height: 300px;

.writer-img {
-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
Index.html

<!DOCTYPE html>

<html>

<head>

<title>The Rise of Soccer in The US</title>

<link href='style.css' rel='stylesheet'>

</head>

<body>

<h3 class='byline'>Article By: Jane Dover</h3>

<h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>

<h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>

<p>When the first World Cup arrived in the US in the 90's everyone officially declared that soccer was
it. Well it's taken it's time but we can definitely see the influence of soccer, especially women's soccer,
across the US. This year, 3 million kids

played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the
MLS has surpassed the MLB and NFL in popularity.</p>

<p>Part of this meteoric rise can be attributed to the impressively soaring ad dollars being pumped
into the Women's World Cup games in 2014. The women's games generated $40 million for Fox, that's
definitely not chump change. And those advertisers,

like ATT, Coca Cola, Verizon, Nike, Visa, and other heavy hitters, are working to make sure they see
those numbers grow year after year by investing in youth soccer facilities and promoting programs
across the country. </p>
<p>Now that big business is involved you can be assured you'll see a continued rise in popularity in
soccer across the country for years to come. </p>

</div>

<p class='caption'>The local semi- pro soccer team in Seattle, WA plays an international friendly</p>

</div>

</body>

</html>

body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;

font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

}
p{

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

.content {

padding: 40px;

.image {

background-image: url("https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-
img_soccer.jpeg");

background-size: cover;

background-position: center;

height: 300px;

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

text-align: center;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;

font-size: 22px;
line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

}
.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

.caption{

background-color:white;

.content {

padding: 40px;

.image {

background-image: url("https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-
img_soccer.jpeg");

background-size: cover;

background-position: center;

height: 300px;
}

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
<!DOCTYPE html>

<html>

<head>

<title>The Rise of Soccer in The US</title>

<link href='style.css' rel='stylesheet'>

</head>

<body>

<h3 class='byline'>Article By: Jane Dover</h3>

<h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>

<h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>

played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the
MLS has surpassed the MLB and NFL in popularity.</p>

<p>Now that big business is involved you can be assured you'll see a continued rise in popularity in
soccer across the country for years to come. </p>
</div>

<p class='caption'>The local semi- pro soccer team in Seattle, WA plays an international friendly</p>

</div>

</body>

</html>
body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

text-align: center;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;

font-size: 22px;
line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

}
.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

background-color: white;

color: black;

.content {

padding: 40px;

.image {

background-image: url("https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-
img_soccer.jpeg");

background-size: cover;

background-position: center;

height: 300px;
}

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
<!DOCTYPE html>

<html>

<head>

<title>The Rise of Soccer in The US</title>

<link href='style.css' rel='stylesheet'>

</head>

<body>

<h3 class='byline'>Article By: Jane Dover</h3>

<h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>

<h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>

played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the
MLS has surpassed the MLB and NFL in popularity.</p>

<p>Now that big business is involved you can be assured you'll see a continued rise in popularity in
soccer across the country for years to come. </p>
</div>

<p class='caption'>The local semi- pro soccer team in Seattle, WA plays an international friendly</p>

</div>

</body>

</html>
Style.css

body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF !important;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

text-align: center;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;
font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;
}

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

background-color: white;

color: black;

.content {

padding: 40px;

.image {

background-image: url('https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg');

background-size: cover;

background-position: center;
height: 300px;

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
Index.html

body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF !important;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

text-align: center;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;
font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;
}

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

background-color: white;

color: black;

.content {

padding: 40px;

.image {

background-image: url('https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg');

background-size: cover;

background-position: center;
height: 300px;

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
style-library.css

h1{

color: yellow;

/* Imagine this is a CSS library that contains a lot of other good styles. */
VISUAL RULES

Review Visual Rules

Incredible work! You used CSS to alter text and images on a website.
Throughout this lesson, you learned concepts including:

 The font-family property defines the typeface of an element.

 font-size controls the size of text displayed.
 font-weight defines how thin or thick text is displayed.
 The text-align property places text in the left, right, or center of its
parent container.
 Text can have two different color attributes: color and background-
color. color defines the color of the text, while background-color defines
the color behind the text.
 CSS can make an element transparent with the opacity property.
 CSS can also set the background of an element to an image with
the background-image property.
 The !important flag will override any style, however it should almost
never be used, as it is extremely difficult to override.

Instructions
Feel free to experiment with the code and see what other changes you can
make!

If you want to see how to incorporate CSS visual rules in a project, watch the
video below and follow along with one of our experts:

body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

h1 {

color: #FFF !important;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

text-align: center;

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

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

font-weight: 100;

font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

color: aliceblue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

.byline {

font-family: Helvetica;

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

float: left;

font-size: 14px;
padding-left: 10px;

text-transform: uppercase;

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

background-color: white;

color: black;

.content {

padding: 40px;

.image {

background-image: url('https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg');
background-size: cover;

background-position: center;

height: 300px;

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}
<!DOCTYPE html>

<html>

<head>

<title>The Rise of Soccer in The US</title>

<link href='style.css' rel='stylesheet'>

<link href='style-library.css' rel='stylesheet'>

</head>

<body>

<h3 class='byline'>Article By: Jane Dover</h3>

<h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>

<h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>

played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the
MLS has surpassed the MLB and NFL in popularity.</p>

</div>

<p class='caption'>The local semi- pro soccer team in Seattle, WA plays an international friendly</p>

</div>

</body>

</html>
Olivia css project

.header
h1 {
color: orangered;
}
body {
font-family: Georgia;
background-image: url('https://s3.amazonaws.com/codecademy-
content/courses/freelance-1/unit-2/selga.png');
}
.about-me {
font-size: 20px;
}
.header {
text-align: center;
background-color: turquoise;
}
.header .about-me {
opacity: 0.5;
}
.title {
font-weight: bold;
}

Index.html

<!DOCTYPE
html>
<html>
<head>
<title></title>
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-
1/unit-2/travel.jpeg" />
<h1>Olivia Woodruff</h1>
<p class="about-me">I am a developer specializing in HTML and CSS. I like
to run, bike, and make coffee using an Aeropress.</p>
</div>
<h2>Projects</h2>
<p class="title">Web Development projects</p>
<ul>
<li>Coffee Brur</li>
<li>Taco Finder</li>
<li>CSS Selector Finder</li>
<li>HTML Formatter</li>
</ul>
<p class="title">Design projects</p>
<ul>
<li>Yum Yum Fudge Inc.</li>
<li>University of Marimont Dance Marathon</li>
</ul>
<h2>Contact</h2>
<p>Find me on Twitter, Dribbble, and GitHub.</p>
<h6>© Copyright. All Rights Reserved.</h6>
</body>
</html>
Sign up for free

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<img src="https://content.codecademy.com/courses/freelance-1/unit-2/travel.jpeg" />

<h1>Olivia Woodruff</h1>

<p class="about-me">I am a developer specializing in HTML and CSS. I like to run, bike, and make
coffee using an Aeropress.</p>
</div>

<h2>Projects</h2>

<p class="title">Web Development projects</p>

<ul>

<li>Coffee Bruër</li>

<li>Taco Finder</li>

<li>CSS Selector Finder</li>

<li>HTML Formatter</li>

</ul>

<p class="title">Design projects</p>

<ul>

<li>Yum Yum Fudge Inc.</li>

<li>University of Marimont Dance Marathon</li>

</ul>

<h2>Contact</h2>

<p>Find me on Twitter, Dribbble, and GitHub.</p>

<h6>© Copyright. All Rights Reserved.</h6>

</body>

</html>
.header h1 {

color: orangered;

body {

font-family: Georgia;

background-image: url('hhttps://content.codecademy.com/courses/learn-css-selectors-visual-
rules/hypnotize_bg.png');

.about-me {

font-size: 20px;

.header {

text-align: center;

background-color: turquoise;

.header .about-me {

opacity: 0.5;

.title {

font-weight: bold;

}
LEARN CSS
Olivia Woodruff Portfolio
In this project, you’ll use your knowledge of CSS visual rules to create rule sets
and improve the appearance of a photography portfolio site!

If you get stuck during this project or would like to see an experienced
developer work through it, click “Get Unstuck“ to see a project walkthrough
video.

Tasks

9/9 Complete
Mark the tasks as complete by checking them off
1.
Look over index.html to review the different HTML elements you have to
work with, then navigate to style.css.

Start by making the header section stand out a bit more. Select
the .header element, and make its background color CornflowerBlue by using
the background-color property.
Stuck? Get a hint
2.
Now change how the text is aligned in the top .header section.

In your .header rule set, align the text in the center using the text-

align property.
Stuck? Get a hint
3.
Next, use CSS to make the paragraph below Olivia’s name have a larger text
size.

In style.css, select the .about-me element, and set its font-size property to 20px.

Stuck? Get a hint
4.
The .about-me paragraph looks a little dark against the light blue background,
maybe it would look nice if it blended more with the background.
Within the .about-me selector, use the opacity property to make it 50%
transparent.
Stuck? Get a hint
5.
In the Projects section, make the section titles bold.

Select the .title elements, and add a font-weight property to make their text

bold.
Stuck? Get a hint
6.
Change the main title color so that it matches the background color more
nicely. Set the color for h1 elements to Azure.
Stuck? Get a hint
7.
Instead of the page being in the default Times font, change the font of the
entire page.

Select the body element and make the font-family of the page Georgia.

Stuck? Get a hint
8.
Finally, let’s make the background of the page more interesting.

Within the body selector, set the background-image property to this URL:

https://content.codecademy.com/courses/learn-css-selectors-
visual-rules/hypnotize_bg.png
Stuck? Get a hint
9.
Great work! Feel free to keep coding and edit the visual rules to personalize
the site’s appearance!
THE BOX MODEL
The Box Model
The box model comprises the set of properties that define parts of an element that take
up space on a web page. The model includes the content area’s size (width and height)
and the element’s padding, border, and margin. The properties include:

1. width and height:
The width and height of the content area.
2. padding: The amount of space between the content area and the border.
3. border: The thickness and style of the border surrounding the content area and
padding.
4. margin: The amount of space between the border and the outside edge of the
element.
body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");
background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

width: 400px;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

}
h2 {

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;

.pull-quote {

.byline {
border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

text-decoration: none;

.share a:hover {
background: white;

border: 1px solid red;

color: red;

}
<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

</div>
<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<p>The League to Save Lake Tahoe (Keep Tahoe Blue) has been an environmental watchdog in the
Lake Tahoe Basin for 50 years. Founded when a proposal to build a four-lane highway around the lake
(with a bridge over the entrance to Emerald Bay) was proposed in 1957, the League has thwarted poorly
designed development projects and environmentally unsound planning. The League embraces
responsible and diversified use of the Lake's resources while protecting and restoring its natural
attributes.</p>

<h2>"THE LEAGUE EMBRACES REPSONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<p>Since 1980, the Lake Tahoe Interagency Monitoring Program (LTIMP) has been measuring stream
discharge and concentrations of nutrients and sediment in up to 10 tributary streams in the Lake Tahoe
Basin, California-Nevada. The objectives of the LTIMP are to acquire and disseminate the water quality
information necessary to support science-based environmental planning and decision making in the
basin. The LTIMP is a cooperative program with support from 12 federal and state agencies with
interests in the Tahoe Basin. This data set, together with more recently acquired data on urban runoff
water quality, is being used by the Lahontan Regional Water Quality Control Board to develop a program
(mandated by the Clean Water Act) to limit the flux of nutrients and fine sediment to the Lake.</p>
<p>UC Davis remains a primary steward of the lake. The UC Davis Tahoe Environmental Research
Center is dedicated to research, education and public outreach, and to providing objective scientific
information for restoration and sustainable use of the Lake Tahoe Basin. Each year, it produces a well-
publicized "State of the Lake" assessment report.</p>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>
THE BOX MODEL
Border Radius
Ever since we revealed the borders of boxes, you may have noticed that the
borders highlight the true shape of an element’s box: square. Thanks to CSS, a
border doesn’t have to be square.

You can modify the corners of an element’s border box with the border-
radius property.

div.container {
border: 3px solid blue;
border-radius: 5px;
}
The code in the example above will set all four corners of the border to a
radius of 5 pixels (i.e. the same curvature that a circle with a radius of 5 pixels
would have).

You can create a border that is a perfect circle by first creating an element
with the same width and height, and then setting the radius equal to half the
width of the box, which is 50%.

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid blue;
  border-radius: 50%;
}
The code in the example above creates a <div> that is a perfect circle.

Instructions

1.
In style.css, set the border radius of #banner .content h1 to 15 pixels.

Additionally, try experimenting with other border-radius values and running

your code to see the result!

body {
background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;
background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: solid 3px white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

width: 400px;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

}
h2 {

border: dotted red;

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

border: 1px dotted red;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;

.pull-quote {

}
.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

text-decoration: none;

}
.share a:hover {

background: white;

border: 1px solid red;

color: red;

}
Index.html

<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>
</div>

<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>
THE BOX MODEL
Padding
The space between the contents of a box and the borders of a box is known
as padding. Padding is like the space between a picture and the frame
surrounding it. In CSS, you can modify this space with the padding property.

p.content-header {
border: 3px solid coral;
padding: 10px;
}
The code in this example puts 10 pixels of space between the content of the
paragraph (the text) and the borders, on all four sides.

The padding property is often used to expand the background color and make

the content look less cramped.

If you want to be more specific about the amount of padding on each side of
a box’s content, you can use the following properties:

 padding-top
 padding-right
 padding-bottom
 padding-left

Each property affects the padding on only one side of the box’s content,
giving you more flexibility in customization.

p.content-header {
border: 3px solid fuschia;
padding-bottom: 10px;
}
In the example above, only the bottom side of the paragraph’s content will
have a padding of 10 pixels.

Instructions

1.
In a single line, set the .navigation li elements to have 20 pixels of padding.
Click “Run” and observe the changes.
Stuck? Get a hint
2.
Look at the red boxes at the bottom of the web page. Set the .share
a elements to have 14 pixels of padding in style.css and run your code.

Observe how the red boxes at the bottom of the page changed.
Stuck? Get a hint
3.
Set the top and bottom padding of h2 elements to 20 pixels and set the left
and right padding of h2 elements to 30 pixels

body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

.navigation li.logo {
color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;
width: 400px;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

}
p{

color: grey;

font-size: 16px;

line-height: 48px;

.pull-quote {

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

}
.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

}
<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

</div>
<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>
<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<p>UC Davis remains a primary steward of the lake. The UC Davis Tahoe Environmental Research
Center is dedicated to research, education and public outreach, and to providing objective scientific
information for restoration and sustainable use of the Lake Tahoe Basin. Each year, it produces a well-
publicized "State of the Lake" assessment report.</p>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>
</html>

body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

}
#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

width: 400px;

h1 {

color: white;

font-size: 42px;
font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 30px;

padding-right: 30px;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;
font-size: 16px;

line-height: 48px;

.pull-quote {

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;
border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

text-decoration: none;

padding: 14px;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

}
THE BOX MODEL

Padding Shorthand

Another implementation of the padding property lets you specify exactly how

much padding there should be on each side of the content in a single
declaration. A declaration that uses multiple properties as values is known as
a shorthand property.

Padding shorthand lets you specify all of the padding properties as values on a

single line:

 padding-top
 padding-right
 padding-bottom
 padding-left

You can specify these properties in a few different ways:

4 Values
p.content-header {
padding: 6px 11px 4px 9px;
}
In the example above, the four values 6px 11px 4px 9px correspond to the
amount of padding on each side, in a clockwise rotation. In order, it specifies
the padding-top value (6px), the padding-right value (11px), the padding-
bottom value (4px), and the padding-left value (9px) of the content.

3 Values
p.content-header {
padding: 5px 10px 20px;
}
If the left and right sides of the content can be equal, the padding shorthand
property allows for 3 values to be specified. The first value sets the padding-
top value (5px), the second value sets the padding-left and padding-right
values (10px), and the third value sets the padding-bottom value ( 20px).
2 Values
p.content-header {
padding: 5px 10px;
}
And finally, if the top and bottom sides can be equal, and the left and right
sides can be equal, you can specify 2 values. The first value sets the padding-
top and padding-bottom values (5px), and the second value sets the padding-
left and padding-right values (10px).

Instructions

Change the individual padding declarations on the h2 selector ruleset to use

padding shorthand with 2 values.
Stuck? Get a hint

Using two values for the padding property, set the padding of the p element to

10 pixels on the top and bottom and 20 pixels on the left and right.
body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {
font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;
margin: 0 auto;

#main {

padding: 40px;

text-align: center;

width: 400px;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

padding-right: 30px;
padding-left: 30px;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;

.pull-quote {

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;
}

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

}
<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

</div>
<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>
THE BOX MODEL
Margin
So far you’ve learned about the following components of the box model:
content, borders, and padding. The fourth and final component of the box
model is margin.

Margin refers to the space directly outside of the box. The margin property is

used to specify the size of this space.

p {
border: 1px solid aquamarine;
margin: 20px;
}
The code in the example above will place 20 pixels of space on the outside of
the paragraph’s box on all four sides. This means that other HTML elements
on the page cannot come within 20 pixels of the paragraph’s border.

If you want to be even more specific about the amount of margin on each side
of a box, you can use the following properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

Each property affects the margin on only one side of the box, providing more
flexibility in customization.

p {
border: 3px solid DarkSlateGrey;
margin-right: 15px;
}
In the example above, only the right side of the paragraph’s box will have a
margin of 15 pixels. It’s common to see margin values used for a specific side
of an element.

Instructions

1.
Set the top margin of p elements to 60 pixels.
Stuck? Get a hint
2.
Look at the three red boxes at the bottom of the web page. These elements
are anchor elements of class .share. Set these .share a elements to have a
margin of 10 pixels.

body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;
font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

width: 400px;

}
h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

p{
color: grey;

font-size: 16px;

line-height: 48px;

padding: 10px 20px;

.pull-quote {

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

}
.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

}
<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

</div>
<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>

body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;
letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;
}

#main {

padding: 40px;

text-align: center;

width: 400px;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

text-align: center;

h3 {
color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;

padding: 10px 20px;

margin-top: 60px;

.pull-quote {

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

}
.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

padding: 14px;

text-decoration: none;

margin: 10px;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

<!DOCTYPE html>
<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

</div>
<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>
THE BOX MODEL
Margin
So far you’ve learned about the following components of the box model:
content, borders, and padding. The fourth and final component of the box
model is margin.

Margin refers to the space directly outside of the box. The margin property is

used to specify the size of this space.

If you want to be even more specific about the amount of margin on each side
of a box, you can use the following properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

Each property affects the margin on only one side of the box, providing more
flexibility in customization.

Instructions

1.
Set the top margin of p elements to 60 pixels.
Checkpoint 2 Passed

Hint
Use margin-top to set the top margin.
2.
Look at the three red boxes at the bottom of the web page. These elements
are anchor elements of class .share. Set these .share a elements to have a
margin of 10 pixels.
body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {
background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

margin:0 auto;

padding: 40px;

text-align: center;

width: 400px;

h1 {

color: white;

font-size: 42px;
font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

margin: 30px 20px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;
margin-top: 60px;

padding: 10px 20px;

.pull-quote {

width:350px;

margin:0 auto;

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

}
.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

margin: 10px;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<p>Until recently, construction on the banks of the Lake had been largely under the control of real
estate developers. Construction activities have resulted in a clouding of the lake's blue waters. Currently,
the Tahoe Regional Planning Agency is regulating construction along the shoreline and has won two
Federal Supreme Court battles over recent decisions. These regulations are unpopular with many
residents, especially those in the Tahoe Lakefront Homeowners Association.</p>
<p>The League to Save Lake Tahoe (Keep Tahoe Blue) has been an environmental watchdog in the
Lake Tahoe Basin for 50 years. Founded when a proposal to build a four-lane highway around the lake
(with a bridge over the entrance to Emerald Bay) was proposed in 1957, the League has thwarted poorly
designed development projects and environmentally unsound planning. The League embraces
responsible and diversified use of the Lake's resources while protecting and restoring its natural
attributes.</p>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>
</body>

</html>
THE BOX MODEL
Auto
The margin property also lets you center content. However, you must follow a
few syntax requirements. Take a look at the following example:

div.headline {
width: 400px;
margin: 0 auto;
}
In the example above, margin: 0 auto; will center the divs in their containing
elements. The 0 sets the top and bottom margins to 0 pixels. The auto value
instructs the browser to adjust the left and right margins until the element is
centered within its containing element.

In order to center an element, a width must be set for that element. Otherwise,
the width of the div will be automatically set to the full width of its containing
element, like the <body>, for example. It’s not possible to center an element
that takes up the full width of the page, since the width of the page can
change due to display and/or browser window size.

In the example above, the width of the div is set to 400 pixels, which is less
than the width of most screens. This will cause the div to center within a
containing element that is greater than 400 pixels wide.

Instructions

1.
Set the width of the .pull-quote class elements to 350 pixels.
Checkpoint 2 Passed

Stuck? Get a hint

2.
In one line, set the vertical (top and bottom) margins of the .pull-quote class
to 0 and the horizontal (left and right) margins to auto.
Checkpoint 3 Passed

Hint
Here’s a refresher for how to create a ruleset that will horizontally center
a <div>:
div {
margin: 0 auto;
}
For the margin ruleset above, the first value 0 sets the vertical (top and bottom)
margin, and the second value auto sets the horizontal (left and right) margin.
3.
Set the vertical margins of the #main element to 0, and the horizontal margins
to auto.
THE BOX MODEL
Margin Collapse
As you have seen, padding is space added inside an element’s border, while
margin is space added outside an element’s border. One additional difference
is that top and bottom margins, also called vertical margins, collapse, while top
and bottom padding does not.

Horizontal margins (left and right), like padding, are always displayed and
added together. For example, if two divs with ids #div-one and #div-two, are
next to each other, they will be as far apart as the sum of their adjacent
margins.

#img-one {
margin-right: 20px;
}

#img-two {
margin-left: 20px;
}
In this example, the space between the #img-one and #img-two borders is 40
pixels. The right margin of #img-one (20px) and the left margin of #img-two (20px)
add to make a total margin of 40 pixels.
Unlike horizontal margins, vertical margins do not add. Instead, the larger of
the two vertical margins sets the distance between adjacent elements.

#img-one {
margin-bottom: 30px;
}

#img-two {
margin-top: 20px;
}
In this example, the vertical margin between the #img-one and #img-
two elements is 30 pixels. Although the sum of the margins is 50 pixels, the
margin collapses so the spacing is only dependent on the #img-one bottom
margin.

It may be helpful to think of collapsing vertical margins as a short person

trying to push a taller person. The tall person has longer arms and can easily
push the short person, while the person with short arms cannot reach the
person with long arms.

Instructions

Study the graphic display to the right. Elements A and B have 20 pixels of
horizontal margin, the sum of each element’s margin. Elements A and C have
30 pixels of vertical margin — the top margin of element C.

body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {
margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

}
#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

margin: 0 auto;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;
font-size: 14px;

line-height: 48px;

padding: 20px 30px;

margin: 30px 20px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;

margin-top: 60px;

padding: 10px 20px;

.pull-quote {

width: 350px;
margin: 0 auto;

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;
margin: 10px;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>
<li>OPED</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<div class="pull-quote">
<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>
THE BOX MODEL
Minimum and Maximum Height and Width
Because a web page can be viewed through displays of differing screen size,
the content on the web page can suffer from those changes in size. To avoid
this problem, CSS offers two properties that can limit how narrow or how wide
an element’s box can be sized to:

 min-width—this property ensures a minimum width of an element’s box.

 max-width—this property ensures a maximum width of an element’s box.

p {
min-width: 300px;
max-width: 600px;
}
In the example above, the width of all paragraphs will not shrink below 300
pixels, nor will the width exceed 600 pixels.

Content, like text, can become difficult to read when a browser window is
narrowed or expanded. These two properties ensure that content is legible by
limiting the minimum and maximum widths of an element.

You can also limit the minimum and maximum height of an element:

 min-height — this property ensures a minimum height for an element’s

box.
 max-height — this property ensures a maximum height of an element’s
box.

p {
min-height: 150px;
max-height: 300px;
}
In the example above, the height of all paragraphs will not shrink below 150
pixels and the height will not exceed 300 pixels.

What will happen to the contents of an element’s box if the max-

height property is set too low? It’s possible for the content to spill outside of
the box, resulting in content that is not legible. You’ll learn how to work
around this issue in the next exercise.

Instructions

1.
In style.css, set the minimum width of the p element to 200 pixels.

After you’ve done this successfully, resize the browser and notice how the
paragraph’s box will no longer shrink below 200 pixels.
Checkpoint 2 Passed

Hint
Remember that paragraph elements are represented by <p> HTML tags, and
they can be selected in CSS files with the p tag selector.

The minimum width of an element is set by using the min-width property.

2.
Next, set the maximum width of the p element to 800 pixels.

After you’ve done this successfully, resize the browser and notice how the
paragraph’s box will no longer expand beyond 800 pixels.
Checkpoint 3 Passed

Stuck? Get a hint

3.
In style.css, set the minimum height of the p element to 200 pixels.

After you’ve done this successfully, resize the browser and notice how the
height of paragraph’s box will no longer shrink below 200 pixels.
Stuck? Get a hint
4.
In style.css, set the maximum height of the p element to 300 pixels.

After you’ve done this successfully, resize the browser and notice how the
height of paragraph’s box will no longer expand beyond 300 pixels. You
should see your text overflowing. In the next exercise, we will fix that!

The maximum height of an element is set using the max-height property.

body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

}
#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

margin: 0 auto;

h1 {

color: white;

font-size: 42px;
font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

margin: 30px 20px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

min-width:200px;

max-width:800px;

color: grey;
font-size: 16px;

line-height: 48px;

margin-top: 60px;

padding: 10px 20px;

.pull-quote {

width: 350px;

margin: 0 auto;

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;
width: 100%;

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

margin: 10px;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

body {

background-color: white;

font-family: 'Raleway', sans-serif;

}
.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {

background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;
}

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

padding: 40px;

text-align: center;

margin: 0 auto;

h1 {

color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

margin: 30px 20px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;

font-size: 16px;

line-height: 48px;

margin-top: 60px;

padding: 10px 20px;

min-width: 200px;

max-width: 800px;

min-height: 200px;

max-height: 300px;
}

.pull-quote {

width: 350px;

margin: 0 auto;

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;

.share a {

background: red;
border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

margin: 10px;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

THE BOX MODEL

Minimum and Maximum Height and Width
Because a web page can be viewed through displays of differing screen size,
the content on the web page can suffer from those changes in size. To avoid
this problem, CSS offers two properties that can limit how narrow or how wide
an element’s box can be sized to:

 min-width—this property ensures a minimum width of an element’s box.

 max-width—this property ensures a maximum width of an element’s box.

p {
min-width: 300px;
max-width: 600px;
}
In the example above, the width of all paragraphs will not shrink below 300
pixels, nor will the width exceed 600 pixels.
Content, like text, can become difficult to read when a browser window is
narrowed or expanded. These two properties ensure that content is legible by
limiting the minimum and maximum widths of an element.

You can also limit the minimum and maximum height of an element:

 min-height — this property ensures a minimum height for an element’s

box.
 max-height — this property ensures a maximum height of an element’s
box.

p {
min-height: 150px;
max-height: 300px;
}
In the example above, the height of all paragraphs will not shrink below 150
pixels and the height will not exceed 300 pixels.

What will happen to the contents of an element’s box if the max-

Instructions

1.
In style.css, set the minimum width of the p element to 200 pixels.

After you’ve done this successfully, resize the browser and notice how the
paragraph’s box will no longer shrink below 200 pixels.
Checkpoint 2 Passed

Hint
Remember that paragraph elements are represented by <p> HTML tags, and
they can be selected in CSS files with the p tag selector.

The minimum width of an element is set by using the min-width property.

2.
Next, set the maximum width of the p element to 800 pixels.
After you’ve done this successfully, resize the browser and notice how the
paragraph’s box will no longer expand beyond 800 pixels.
Checkpoint 3 Passed

Stuck? Get a hint

3.
In style.css, set the minimum height of the p element to 200 pixels.

After you’ve done this successfully, resize the browser and notice how the
height of paragraph’s box will no longer shrink below 200 pixels.
Checkpoint 4 Passed

Stuck? Get a hint

4.
In style.css, set the maximum height of the p element to 300 pixels.

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>
THE BOX MODEL
Overflow
All of the components of the box model comprise an element’s size. For
example, an image that has the following dimensions is 364 pixels wide and
244 pixels tall.

 300 pixels wide

 200 pixels tall
 10 pixels padding on the left and right
 10 pixels padding on the top and bottom
 2 pixels border on the left and right
 2 pixels border on the top and bottom
 20 pixels margin on the left and right
 10 pixels margin on the top and bottom

The total dimensions (364px by 244px) are calculated by adding all of the
vertical dimensions together and all of the horizontal dimensions together.
Sometimes, these components result in an element that is larger than the
parent’s containing area.

How can we ensure that we can view all of an element that is larger than its
parent’s containing area?

The overflow property controls what happens to content that spills, or

overflows, outside its box. The most commonly used values are:

 hidden—when set to this value, any content that overflows will be hidden
from view.
 scroll—when set to this value, a scrollbar will be added to the element’s
box so that the rest of the content can be viewed by scrolling.
 visible—when set to this value, the overflow content will be displayed
outside of the containing element. Note, this is the default value.

p {
overflow: scroll;
}
In the example above, if any of the paragraph content overflows (perhaps a
user resizes their browser window), a scrollbar will appear so that users can
view the rest of the content.

The overflow property is set on a parent element to instruct a web browser on

how to render child elements. For example, if a div’s overflow property is set
to scroll, all children of this div will display overflowing content with a scroll
bar.

For a more in-depth look at overflow, including additional properties

like overflow-x and overflow-y that separate out the horizontal and vertical
values, head over to the MDN documentation.

Instructions

1.
In order to see the impact of overflow: scroll, first change the height of
the #main element to 1000 pixels.
Stuck? Get a hint
2.
Set the overflow of the #main element to scroll.

When you scroll down, a second scroll bar should appear over the paragraph
section. You may have to expand the browser component in order to see this
behavior clearly.

To set the overflow of an element, create a declaration using the overflow property

followed by the value.

Use the height property to set the height of an element.

overflow:scroll;
body {

background-color: white;

font-family: 'Raleway', sans-serif;

.navigation ul {

margin: 0;

padding: 0;

text-align: center;

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

.navigation li.logo {

color: black;

font-size: 18px;

font-weight: 700;

letter-spacing: 4px;

#banner {
background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-
img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

height: 700px;

width: 100%;

#banner .content h1 {

border: 3px solid white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

#main {

margin: 0 auto;

padding: 40px;

text-align: center;

width: 400px;

height: 1000px;

overflow: scroll;

h1 {
color: white;

font-size: 42px;

font-weight: 600;

text-align: center;

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

margin: 30px 20px;

text-align: center;

h3 {

color: red;

font-size: 26px;

font-weight: 700;

padding: 20px 10px;

color: grey;
font-size: 16px;

line-height: 48px;

margin-top: 60px;

padding: 10px 20px;

.pull-quote {

margin: 0 auto;

width: 400px;

.byline {

border-bottom: 1px solid LightGrey;

border-top: 1px solid LightGrey;

color: DarkGrey;

font-size: 14px;

font-weight: 200;

.share {

border: 1px solid LightGrey;

padding: 40px 0px;

position: relative;

text-align: center;

width: 100%;
}

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

margin: 10px;

padding: 14px;

text-decoration: none;

.share a:hover {

background: white;

border: 1px solid red;

color: red;

}
THE BOX MODEL
Visibility
Elements can be hidden from view with the visibility property.

The visibility property can be set to one of the following values:

 hidden — hides an element.

 visible — displays an element.
 collapse — collapses an element.

<ul>
  <li>Explore</li>
  <li>Connect</li>
  <li class="future">Donate</li>
</ul>
.future {
  visibility: hidden;
}
In the example above, the list item with a class of future will be hidden from
view in the browser.

Keep in mind, however, that users can still view the contents of the list item
(e.g., Donate) by viewing the source code in their browser. Furthermore, the
web page will only hide the contents of the element. It will still leave an empty
space where the element is intended to display.

Note: What’s the difference between display: none and visibility: hidden? An

element with display: none will be completely removed from the web page. An
element with visibility: hidden, however, will not be visible on the web page,
but the space reserved for it will.

Instructions

1.
Take a look at the list items in index.html. Notice that the list item Donate has
a class of donate.

In style.css:
1. Add a class selector ruleset for donate.
2. Set the visibility to hidden.

<!DOCTYPE html>

<html>

<head>

<title>The Terminal - Your Source for Fact-Based News</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>LOCAL</li>

<li>NATIONAL</li>

<li class="logo">THE TERMINAL</li>

<li>GLOBAL</li>

<li class="donate">DONATE</li>

</ul>

</nav>

<div class="content">
<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

</div>

<div id="main" class="content">

<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS
AS GROUNDBREAKING AND FORWARD THINKING.</h3>

<span class="byline">WRITTEN BY: JAMES JAYCE</span>

<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE
PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>

</div>

<a href="#">SHARE</a>

<a href="#">FAVORITE</a>

</div>

</body>

</html>

To target the donate class, create a ruleset with the .donate selector. Inside of the

curly braces, add a declaration with the property visibility and set the value
to hidden.
<!DOCTYPE html>

<html>

<head>

<title>Let's Test Your Memory!</title>

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

</head>

<body>

<h2>Classic Memory Game</h2>

<h1>Let's Test Your Memory!</h1>

<p>Click on a tile below to reveal a symbol. Click on another tile to try and reveal two of the same
symbols. The game is over when all the cards have been matched.</p>

<a href="#">Reset Game</a>

<a href="#">Invite a Friend!</a>

<a href="#">Save This Game</a>

</div>

</div>
<div class="card">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>
body {

background-color: #FFF;

margin: 0px;

padding: 50px 60px;

h1 {

color: #004E89;

font-family: 'Yantramanav', sans-serif;

font-size: 50px;

font-weight: 400;

margin: 0;

text-align: center;

h2 {

color: #AAA;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 100;

letter-spacing: 2px;

margin: 0;

text-align: center;

text-transform: uppercase;

}
p{

color: #333;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 100;

margin: 0;

text-align: center;

.actions {

text-align: center;

margin-top: 30px;

.actions a {

background-color: #9DD1F1;

border-radius: 3px;

color: #004E89;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 300;

display: inline-block;

margin: 10px;

padding: 12px;
text-align: center;

text-decoration: none;

text-transform: uppercase;

#gameboard {

position: relative;

text-align: center;

top: 30px;

.card {

border: 2px solid #9DD1F1;

display: inline-block;

height: 200px;

margin-top: 4px;

padding: 30px auto;

text-align: center;

width: 215px;

.card:hover {

background-color: #004E89;

border-color: #004E89;
}

.card img {

padding-top: 40px;

CHANGING THE BOX MODEL

Box Model: Content-Box
Many properties in CSS have a default value and don’t have to be explicitly set in the
stylesheet.

For example, the default font-weight of text is normal, but this property-value pair is not
typically specified in a stylesheet.

The same can be said about the box model that browsers assume. In CSS, the box-
sizing property controls the type of box model the browser should use when
interpreting a web page.

The default value of this property is content-box. This is the same box model that is
affected by border thickness and padding.
CHANGING THE BOX MODEL
Box Model: Border-Box
Fortunately, we can reset the entire box model and specify a new one: border-box.

* {
box-sizing: border-box;
}
The code in the example above resets the box model to border-box for all HTML
elements. This new box model avoids the dimensional issues that exist in the former box
model you learned about.

In this box model, the height and width of the box will remain fixed. The border
thickness and padding will be included inside of the box, which means the overall
dimensions of the box do not change.

<h1>Hello World</h1>
* {
  box-sizing: border-box;
}
h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}
In the example above, the height of the box would remain at 200 pixels and the width
would remain at 300 pixels. The border thickness and padding would remain
entirely inside of the box.

CHANGING THE BOX MODEL

The New Box Model
Now that you know about the new box model, let’s actually implement it in
the browser.

* {
box-sizing: border-box;
}
It’s that simple! In the example above, the universal selector ( *) targets all
elements on the web page and sets their box model to the border-box model.

Instructions

1.
In style.css, change the box model for all elements on the web page to the
new box model.

You probably didn’t see a difference in the web page to the right - that’s ok!
The new box model simply makes sure that the dimensions of elements
remains the same regardless of border width and padding.

CHANGING THE BOX MODEL

The New Box Model
Now that you know about the new box model, let’s actually implement it in
the browser.

* {
box-sizing: border-box;
}
It’s that simple! In the example above, the universal selector ( *) targets all
elements on the web page and sets their box model to the border-box model.

Instructions

1.
In style.css, change the box model for all elements on the web page to the
new box model.

box-sizing: border-box;

body {

background-color: #FFF;

margin: 0px;
padding: 50px 60px;

h1 {

color: #004E89;

font-family: 'Yantramanav', sans-serif;

font-size: 50px;

font-weight: 400;

margin: 0;

text-align: center;

h2 {

color: #AAA;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 100;

letter-spacing: 2px;

margin: 0;

text-align: center;

text-transform: uppercase;

color: #333;
font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 100;

margin: 0;

text-align: center;

.actions {

text-align: center;

margin-top: 30px;

.actions a {

background-color: #9DD1F1;

border-radius: 3px;

color: #004E89;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 300;

display: inline-block;

margin: 10px;

padding: 12px;

text-align: center;

text-decoration: none;

text-transform: uppercase;
}

#gameboard {

position: relative;

text-align: center;

top: 30px;

.card {

border: 2px solid #9DD1F1;

display: inline-block;

height: 200px;

margin-top: 4px;

padding: 30px auto;

text-align: center;

width: 215px;

.card:hover {

background-color: #004E89;

border-color: #004E89;

.card img {
padding-top: 40px;

}CHANGING THE BOX MODEL

Review: Changing the Box Model

In this lesson, you learned about an important limitation of the default box model: box
dimensions are affected by border thickness and padding.

Let’s review what you learned:

1. In the default box model, box dimensions are affected by border thickness and
padding.
2. The box-sizing property controls the box model used by the browser.
3. The default value of the box-sizing property is content-box.
4. The value for the new box model is border-box.
5. The border-box model is not affected by border thickness or padding.
LEARN CSS
The Box Model: Davie's Burgers
In this project, you will follow step-by-step instructions to fix a fictional restaurant’s
website. All of the HTML and most of the CSS is intact, but the box model properties
have yet to be set. You’ll use knowledge of height, width, padding, border, and margin to
complete this project.

The website’s existing index.html and style.css files are displayed in the text editor to

the right. As you work, use both to see which elements you are selecting and styling.
Most of the elements that you’ll need to add styles for already have rule sets
in style.css to which you can add additional declarations.

<!DOCTYPE html>
<html>
<head>
<title>Davie JR's Menu</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,500,700|
Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<nav>
<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-
6/htmlcss1-img_burger-logo.svg" />
<span><a href="#">MENU</a></span>
<span><a href="#">NUTRITION</a></span>
<span><a href="#">ORDER</a></span>
<span><a href="#">LOCATIONS</a></span>
</nav>

<div class="content">

<div class="header">
<h1>BBQ BACON BURGER</h1>
</div>

<div class="body">
<p>
Our BBQ Bacon Burger features our special house ground blend of wagyu and
sirloin, spiced perfectly, and finished off with just a drop of white truffle oil. A
butter grilled brioche bun layered with roasted red onion, perfectly crispy pork
belly, and our hickory smoked BBQ sauce.
</p>

<a href="#" class="button">ORDER NOW</a>

<ul class="nutrition">
<li>
<span class="category">CALORIES</span>
<span class="value">678</span>
</li>
<li>
<span class="category">FAT</span>
<span class="value">32</span>
</li>
<li>
<span class="category">PROTEIN</span>
<span class="value">8</span>
</li>
<li>
<span class="category">CARBOHYDRATES</span>
<span class="value">34</span>
</li>
<li>
<span class="category">SODIUM</span>
<span class="value">112</span>
</li>
</ul>
</div>
</div>
</body>
</html>
/*
Universal
Styles */
body {
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-
101/unit-6/htmlcss1-img_foodlogo.png");
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
a {
text-decoration: none;
}
/* Navigation */
nav {
text-align: center;
}
nav img {
display: block;
width: 180px;
margin: 0px auto;
}
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 10px 0px;
}
nav a {
color: #666666;
}
/* Content Container */
.content {
width: 100%;
height: 500px;
margin: 10px auto;
}
/* Content Header */
.header {
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-
101/unit-6/htmlcss1-img_burgerphoto.jpeg");
background-position: center;
background-size: cover;
height: 320px;
}
.header h1 {
background-color: #05A8AA;
color: #FFF;
font-family: 'Oswald', sans-serif;
font-size: 40px;
font-weight: 300;
line-height: 40px;
width: 68%;
padding: 20px;
margin: 0px auto;
}
/* Content Body */
.content .body {
width: 90%;
margin: 0px auto;
overflow: scroll;
}
.body p {
color: #333333;
font-weight: 100;
line-height: 34px;
width: 90%;
margin-top: 18px;
}
/* Content Button */
.button {
border-radius: 4px;
color: #05A8AA;
display: block;
font-weight: 700;
width: 200px;
padding: 20px;
margin: 40px auto;
border: 1px solid blue;
}
.button:hover {
background-color: #05A8AA;
border: 1px solid #05A8AA;
color: #FFF;
}
/* Content Nutrition */
ul.nutrition {
padding: 40px;
}
ul.nutrition li {
display: inline-block;
background-color: #05A8AA;
list-style: none;
width: 200px;
padding: 10px 20px;
margin-bottom: 3px;
}
.nutrition .category {
color: white;
font-weight: 100;
letter-spacing: 2px;
display: block;
}
.nutrition .value {
color: white;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
}
https://www.codecademy.com/courses/learn-css/videos/the-box-model-in-devtools

https://www.codecademy.com/courses/learn-css/videos/the-box-model-in-devtools
DISPLAY AND POSITIONDISPLAY AND POSITIONING

Position
Take a look at the block-level elements in the image below:
Block-level elements like these boxes create a block the full width of their
parent elements, and they prevent other elements from appearing in the same
horizontal space.

Notice the block-level elements in the image above take up their own line of
space and therefore don’t overlap each other. In the browser to the right, you
can see block-level elements also consistently appear on the left side of the
browser. This is the default position for block-level elements.

The default position of an element can be changed by setting

its position property. The position property can take one of five values:

 static - the default value (it does not need to be specified)

 relative
 absolute
 fixed
 sticky

In the next few exercises, you’ll learn about the values in the list above. For
now, it’s important to understand that if you favor the default position of an
HTML element, you don’t need to set its position property.

Instructions

1.
In style.css, add a declaration to the .question ruleset that sets the position to
static.

Notice that setting position to static does nothing. That’s

because static simply refers to the default behavior.
Checkpoint 2 Passed

Hint
To set the position to static, use the position property followed by
the static value
ING
Position
Take a look at the block-level elements in the image below:
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;
font-weight: 300;

text-transform: uppercase;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;
font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;
text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;
width: 100%;

.question {

text-align: center;

position:static;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}
Block-level elements like these boxes create a block the full width of their
parent elements, and they prevent other elements from appearing in the same
horizontal space.

The default position of an element can be changed by setting

its position property. The position property can take one of five values:

 static - the default value (it does not need to be specified)

 relative
 absolute
 fixed
 sticky

Instructions

1.
In style.css, add a declaration to the .question ruleset that sets the position to
static.

Notice that setting position to static does nothing. That’s

because static simply refers to the default behavior.
Checkpoint 2 Passed

Hint
To set the position to static, use the position property followed by
the static value
<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>Question 1</li>

<li>Question 2</li>

<li>Question 3</li>

<li>Question 4</li>

<li>Question 5</li>

<li>Question 6</li>

</ul>

</header>

<h1>Welcome to our survey!</h1>

<p>We're looking forward to getting your answers so we can make sure our products and services are
the best they can be!</p>

</div>
<div class="question">

<h4>Question 1</h4>

<h2>I like participating in physical activity such as running, swimming, or biking.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 2</h4>

<h2>I try to keep up to date with the latest fashion in active wear.</h2>

<h3>Disagree</h3>

</div>
<div class="answer">

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 3</h4>

<h2>I purchase clothing online regularly.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

</div>
<div class="question">

<h4>Question 4</h4>

<h2>I try to buy goods that are designed and/or manufactured in my home country.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 5</h4>

<h2>I look to famous athletes when trying to choose what to wear when training.</h2>

<h3>Disagree</h3>

</div>
<div class="answer">

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

</body>

</html
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

li:hover {
color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;
text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

}
.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

.question {

text-align: center;

position: relative;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

DISPLAY AND POSITIONING

Position: Relative
One way to modify the default position of an element is by setting
its position property to relative.
This value allows you to position an element relative to its default static
position on the web page.

.green-box {
background-color: green;
position: relative;
}
Although the code in the example above instructs the browser to expect a
relative positioning of the .green-box element, it does not specify where
the .green-box element should be positioned on the page. This is done by
accompanying the position declaration with one or more of the
following offset properties that will move the element away from its default
static position:

 top - moves the element down from the top.

 bottom - moves the element up from the bottom.
 left - moves the element away from the left side (to the right).
 right - moves the element away from the right side (to the left).

You can specify values in pixels, ems, or percentages, among others, to dial in
exactly how far you need the element to move. It’s also important to note that
offset properties will not work if the element’s position property is the
default static.

.green-box {
  background-color: green;
  position: relative;
  top: 50px;
  left: 120px;
}
In the example above, the element of green-box class will be moved down 50
pixels, and to the right 120 pixels, from its default static position. The image
below displays the new position of the box.
Offsetting the relative element will not affect the positioning of other
elements.

Instructions

1.
In style.css, inside the .question ruleset, change the position property
to relative.
Checkpoint 2 Passed

Hint
The position property should get a value of relative inside
the .question selector curly braces.

selector {
property: value;
}

2.
Next, in style.css, offset .question 40 pixels from the top.
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

li:hover {
color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;
text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

}
.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

.question {

text-align: center;

position: relative;

top:40px;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: absolute;

width: 100%;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

}
li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;
text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;
}

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

.question {

text-align: center;

position: relative;

top: 40px;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}
DISPLAY AND POSITIONING
Position: Absolute
Another way of modifying the position of an element is by setting its position
to absolute.

When an element’s position is set to absolute, all other elements on the page
will ignore the element and act like it is not present on the page. The element
will be positioned relative to its closest positioned parent element, while offset
properties can be used to determine the final position from there. Take a look
at the image below:
The “Website building in progress. Please come back later!” text is displaced
from its static position at the top left corner of its parent container. It has
offset property declarations of top: 300px; and right: 0;, positioning it 300
pixels down, and 0 pixels from the right side of the page.

Instructions

1.
In style.css, set the position inside of the header ruleset to absolute.

Notice how it’s now removed from the normal flow of the document, and
covering the welcome section.
Checkpoint 2 Passed

Hint
The position property should get a value of absolute inside the header selector
curly braces.

selector {
property: value;
}
2.
When you changed the position to absolute, you may have noticed that the
header shrunk horizontally. We’ll learn why in a later exercise. For now, set
the width property of the header to 100%.
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;
}

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;
text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;
font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

.welcome {

position:relative;

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

}
.question {

text-align: center;

position: relative;

top: 40px;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

body {

background-color: #FFF;
margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

li:hover {
color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;
text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

}
.welcome {

position:relative;

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

top:200px;

.question {

text-align: center;

position: relative;

top: 40px;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

ul {
margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

}
h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;
text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 200px;

.question {
text-align: center;

position: sticky;

top: 40px;

border: 15px solid #DBE9EE;

background-color: white;

.answer {

border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}
Learn
DISPLAY AND POSITIONING
Z-Index
When boxes on a web page have a combination of different positions, the boxes (and therefore,
their content) can overlap with each other, making the content difficult to read or consume.

.blue-box {
background-color: blue;
}

.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}
In the example above, the .green-box element overlaps on top of the .blue-box element.

The z-index property controls how far back or how far forward an element should appear on the
web page when elements overlap. This can be thought of as the depth of elements, with deeper
elements appearing behind shallower elements.

The z-index property accepts integer values. Depending on their values, the integers instruct the
browser on the order in which elements should be layered on the web page.

.blue-box {
  background-color: blue;
  position: relative;
  z-index: 1;
}
.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}
In the example above, we set the .blue-box position to relative and the z-index to 1. We
changed position to relative, because the z-index property does not work on static elements.
The z-index of 1 moves the .blue-box element forward, because the z-index value has not been
explicitly specified for the .green-box element, which means it has a default z-index value of 0.
Take a look the example image below:
Instructions

1.
In style.css, set the z-index of the header to 10. Notice how the header is no longer covered by
other elements when you scroll!
Hint
Use the z-index property. The value is a standalone integer. No need for px, or %!
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;
font-weight: 300;

text-transform: uppercase;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {
color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

}
footer {

background-color: #DBE9EE;

text-align: center;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 200px;

.question {

text-align: center;

position: relative;

top: 40px;

.answer {

border: 1px solid #466995;

margin: 20px;

}
.answer:hover {

background: #C0D6DF;

color: #FFF;

body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

z-index: 10;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {
color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

}

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 200px;

.question {

text-align: center;

position: relative;

top: 40px;

.answer {
border: 1px solid #466995;

margin: 20px;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>Question 1</li>

<li>Question 2</li>

<li>Question 3</li>

<li>Question 4</li>

<li>Question 5</li>

<li>Question 6</li>

</ul>
</header>

<h1><strong>Welcome</strong> to our survey!</h1>

<p>We're looking forward to getting your answers so we can make sure our products and services are
the best they can be!</p>

</div>

<h4>Question 1</h4>

<h2>I like participating in physical activity such as running, swimming, or biking.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<div class="question">
<h4>Question 2</h4>

<h2>I try to keep up to date with the latest fashion in active wear.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 3</h4>

<h2>I purchase clothing online regularly.</h2>

<h3>Disagree</h3>

</div>

<div class="answer">
<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 4</h4>

<h2>I try to buy goods that are designed and/or manufactured in my home country.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

</div>
<div class="question">

<h4>Question 5</h4>

<h2>I look to famous athletes when trying to choose what to wear when training.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">

<link rel="stylesheet" href="style.css">

</head>

<body>

<ul>

<li>Question 1</li>

<li>Question 2</li>

<li>Question 3</li>

<li>Question 4</li>

<li>Question 5</li>

<li>Question 6</li>

</ul>

</header>

<h1><strong>Welcome</strong> to our survey!</h1>

<p>We're looking forward to getting your answers so we can make sure our products and services are
the best they can be!</p>

</div>
<div class="question">

<h4>Question 1</h4>

<h2>I like participating in physical activity such as running, swimming, or biking.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 2</h4>

<h2>I try to keep up to date with the latest fashion in active wear.</h2>

<h3>Disagree</h3>

</div>
<div class="answer">

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 3</h4>

<h2>I purchase clothing online regularly.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

</div>
<div class="question">

<h4>Question 4</h4>

<h2>I try to buy goods that are designed and/or manufactured in my home country.</h2>

<h3>Disagree</h3>

</div>

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h4>Question 5</h4>

<h2>I look to famous athletes when trying to choose what to wear when training.</h2>

<h3>Disagree</h3>

</div>
<div class="answer">

<h3>Neutral</h3>

</div>

<h3>Agree</h3>

</div>

<h3>Thanks for taking our survey!</h3>

</footer>

</body>

</html>
body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;
width: 100%;

z-index: 10;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

display: inline-block;

width: 80px;

li:hover {

color: #DBE9EE;

h1 {
color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

}
h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

height: 100px;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;
padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 50px;

.question {

text-align: center;

position: relative;

top: 40px;

.answer {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

.answer:hover {

background: #C0D6DF;

color: #FFF;
}

body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

z-index: 10;

ul {

margin: 30px auto;

padding: 0 20px;
text-align: center;

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

display: inline-block;

width: 80px;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

}
h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;

font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;
text-transform: uppercase

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

height: 100px;

.answer{

float:left;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;
top: 50px;

.question {

text-align: center;

position: relative;

top: 40px;

.answer {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}DISPLAY AND POSITIONING

Float
So far, you’ve learned how to specify the exact position of an element using
offset properties. If you’re simply interested in moving an element as far left or
as far right as possible in the container, you can use the float property.

The float property is commonly used for wrapping text around an image

while moving elements left and right for layout purposes is better left to tools
like CSS grid and flexbox, which you’ll learn about later on.
The float property is often set using one of the values below:

 left - moves, or floats, elements as far left as possible.

 right - moves elements as far right as possible.

.green-section {
width: 50%;
height: 150px;
}

.orange-section {
  background-color: orange;
  width: 50%;
  float: right;
}
In the example above, we float the .orange-section element to the right. This
works for static and relative positioned elements. See the result of the code
below:
Floated elements must have a width specified, as in the example above.
Otherwise, the element will assume the full width of its containing element,
and changing the float value will not yield any visible results.

Instructions

1.
Add a declaration to the .answer ruleset that sets the float property to left.
DISPLAY AND POSITIONING
Clear
The float property can also be used to float multiple elements at once.
However, when multiple floated elements have different heights, it can affect
their layout on the page. Specifically, elements can “bump” into each other
and not allow other elements to properly move to the left or right.

The clear property specifies how elements should behave when they bump

into each other on the page. It can take on one of the following values:

 left—the left side of the element will not touch any other element
within the same containing element.
 right—the right side of the element will not touch any other element
within the same containing element.
 both—neither side of the element will touch any other element within
the same containing element.
 none—the element can touch either side.

div {
width: 200px;
float: left;
}

div.special {
clear: left;
}
In the example above, all <div>s on the page are floated to the left side. The
element with class special did not move all the way to the left because a
taller <div> blocked its positioning. By setting its clear property to left,
the special <div> will be moved all the way to the left side of the page.

Instructions

1.
Take a look at the .answer divs on the web page. They have been floated to
the left, but the .question divs are touching the .answer divs on the right, let’s
fix this.
In the .question selector, set the clear property to left. Notice how the
questions moved.
Stuck? Get a hint
2.
On second thought, this layout is not looking so good. Remove
the float property from .answer selector ruleset.

body {

background-color: #FFF;

margin: 0 auto;

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

z-index: 10;

ul {

margin: 30px auto;

padding: 0 20px;

text-align: center;

li {
color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

display: inline-block;

width: 80px;

li:hover {

color: #DBE9EE;

h1 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 32px;

font-weight: 300;

text-transform: uppercase;

h2 {

color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 26px;
font-weight: 100;

margin: 0 auto 20px auto;

h3 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

text-align: center;

font-weight: 700;

text-transform: uppercase;

padding: 30px;

h4 {

color: #466995;

font-family: 'Oswald', sans-serif;

font-size: 18px;

font-weight: 300;

letter-spacing: 2px;

text-align: center;

text-transform: uppercase

p{
color: #333;

font-family: 'Varela Round', sans-serif;

font-size: 18px;

footer {

background-color: #DBE9EE;

text-align: center;

height: 100px;

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 50px;

.question {

text-align: center;

position: relative;

top: 40px;
clear: left;

.answer {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

.answer:hover {

background: #C0D6DF;

color: #FFF;

}
DISPLAY AND POSITIONING
Review: Layout
Great job! In this lesson, you learned how to control the positioning of elements on a
web page.

Let’s review what you’ve learned so far:

 The position property allows you to specify the position of an element.

 When set to relative, an element’s position is relative to its default position on
the page.
 When set to absolute, an element’s position is relative to its closest positioned
parent element. It can be pinned to any part of the web page, but the element
will still move with the rest of the document when the page is scrolled.
 When set to fixed, an element’s position can be pinned to any part of the web
page. The element will remain in view no matter what.
 When set to sticky, an element can stick to a defined offset position when the
user scrolls its parent container.
 The z-index of an element specifies how far back or how far forward an element
appears on the page when it overlaps other elements.
 The display property allows you to control how an element flows vertically and
horizontally a document.
 inline elements take up as little space as possible, and they cannot have manually
adjusted width or height.
 block elements take up the width of their container and can have manually
adjusted heights.
 inline-block elements can have set width and height, but they can also appear
next to each other and do not take up their entire container width.
 The float property can move elements as far left or as far right as possible on a
web page.
 You can clear an element’s left or right side (or both) using the clear property.

When combined with an understanding of the box model, positioning can create
visually appealing web pages. So far, we’ve focused on adding content in the form of
text to a web page. In the next unit, you’ll learn how to add and manipulate images to a
web page.
Boradway project fo codeacademy :

<!DOCTYPE html>
<html>
<head>
<link href="./Resources/css/style.css" type="text/css"
rel="stylesheet">
<title>Broadway</title>
</head>
<body>
<div class="bckgrnd">
<h1>Broadway Design</h1>
<a id="nav" href="#home">Home</a></br><br>
<a id="nav" href="about">About</a></br><br>
<a id="nav"href="work">Work</a></br><br>
<a id="nav"href="team">Team</a></br><br>
<a id="nav"href="contact">Contact</a><br>
</div>
<h2>Our Process</h2>
<img src="./Resources/identify.svg"/>
<p> We focus on the most important details</p>
<img src="./Resources/understang.svg"/>
<h2>Understand</h2>
<p> We study our projects inside and out.</p>
<img src="./Resources/execute.svg"/>
<h2>Execute</h2>
<p>We put everything we have into our work.</p>
<div class="bckgrnd">
<h2 id= white> Designed in New York </h2>
</div>
<h2>Portfolio </h2>
<p>Coming Soon</p>
<h2>Team</h2>
<p>We're Hiring!</p>
<h2>Contact</h2>
<p>Phone: (555)-555-5555</p>
<p>E-mail: test@example.com</p>
<p>Twitter: @test</p>
<div class="footer">
<p> © Broadway 2017 <a id="nav" href="#home">Home</a>
<a id="nav" href="about">About</a>
<a id="nav"href="work">Work</a>
<a id="nav"href="team">Team</a>
<a id="nav"href="contact">Contact</a> </p>
</body>
</html>
Style.css

color: white;
}
body{
text-align: center;
}
p{
font-family: helvetica;
font-size: 14px;
}
h1{
font-family: helvetica;
font-size: 70px;
font-weight: bold;
color:white;
}
h2{
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
}
h3{
font-family: Helvetica;
font-size: 23px;
font-weight: bold;
}
.bckgrnd{
background-image: url("https://s3.amazonaws.com/codecademy-
content/programs/freelance-one/broadway/images/the-flatiron-building.png")
}
.footer{
font-family: Helvetica;
font-size: 11px;
color: white;
background-color: dimgray;
text-align: left;
}
#nav{
color: white;
font-family: Helvetica;
font-size: 18px;
}
Project broadway of codeacademy final:

html, body {

margin: 0;

padding: 0;

header {

background-color: #333333;

position:fixed;

width:100%;

z-index:5px;

nav {

margin: 0;

padding: 20px 0;

nav li {

color: #fff;

font-family: 'Raleway', sans-serif;

font-weight: 600;

font-size: 12px;

display:inline;

width:100px;
}

main {

text-align: center;

position:relative;

top:80px;

main h1 {

color: #333;

font-family: 'Raleway', sans-serif;

font-weight: 600;

font-size: 70px;

margin-top: 0px;

padding-top: 80px;

margin-bottom: 80px;

text-transform: uppercase;

footer {

background-color: #333;

color: #fff;

padding: 30px 0;

}
footer p {

font-family: 'Raleway', sans-serif;

text-transform: uppercase;

font-size: 11px;

.container {

max-width: 940px;

margin: 0 auto;

padding: 0 10px;

text-align: center;

.jumbotron {

height: 800px;

background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

.btn-main {

background-color: #333;

color: #fff;
font-family: 'Raleway', sans-serif;

font-weight: 600;

font-size: 18px;

letter-spacing: 1.3px;

padding: 16px 40px;

text-decoration: none;

text-transform: uppercase;

.btn-default {

font-family: 'Raleway', sans-serif;

font-weight: 600;

font-size: 10px;

letter-spacing: 1.3px;

padding: 10px 20px;

text-decoration: none;

text-transform: uppercase;

margin-bottom: 20px;

.supporting {

padding-top: 80px;

padding-bottom: 100px;

}
.supporting .col {

font-family: 'Raleway', sans-serif;

text-align: center;

display:inline-block;

width:200px;

height:200px;

.supporting img {

height: 32px;

.supporting h2 {

font-weight: 600;

font-size: 23px;

text-transform: uppercase;

.supporting p {

font-weight: 400;

font-size: 14px;

line-height: 20px;

padding: 0 20px;

margin-bottom: 20px;

}
.supporting a {

background-color: white;

color: #333333;

font-family: 'Raleway', sans-serif;

font-weight: 600;

font-size: 12px;

letter-spacing: 1.3px;

text-decoration: none;

text-transform: uppercase;

padding: 10px;

margin-bottom: 10px;

border: 2px solid #333333;

@media (max-width: 500px) {

main h1 {

font-size: 50px;

padding: 0 40px;

.supporting .col {

width: 100%;

}
Index.html

<!DOCTYPE html>

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet'

type='text/css'>

<link href='style.css' rel='stylesheet' type='text/css'/>

</head>

<body>

<nav>

<ul>

<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>

</ul>

</nav>

</header>

<main>

<h1>We are Broadway</h1>

<a href="#" class="btn-main"> Get Started </a>

</div>
</div>

</main>

<h2>Design</h2>

<p>Make your projects look great and interact beautifully.</p>

<a href="#"> Learn More</a><br>

</div>

<h2>Develop</h2>

<p>Use modern tools to turn your design into a web site</p>

<a href="#"> Learn More</a><br>

</div>

<h2>Deploy</h2>

<p>Use modern tools to turn your design into a web site</p>

<a href="#"> Learn More</a><br>

</div>

</section>

<p>© Broadway 2017</p>

</div>

</footer>

</body>

</html>
Foreground vs Background
Before discussing the specifics of color, it’s important to make two distinctions
about color. Color can affect the following design aspects:

 The foreground color

 The background color

Foreground color is the color that an element appears in. For example, when a
heading is styled to appear green, the foreground color of the heading has
been styled.

Conversely, when a heading is styled so that its background appears yellow,

the background color of the heading has been styled

In CSS, these two design aspects can be styled with the following two
properties:

 color - this property styles an element’s foreground color.

 background-color - this property styles an element’s background color.

h1 {
color: red;
background-color: blue;
}
In the example above, the text of the heading will appear in red, and the
background of the heading will appear blue.

Instructions

1.
In style.css, change the foreground color of the h1 heading to midnightblue.
Checkpoint 2 Passed

Hint
The foreground color is set using the color property.
2.
Next, set the background color of the h1 heading to aqua.

Notice how only the background area behind heading changed.

Style.css

body {

padding: 0;

margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/ Header styles /

.header {

background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?
dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);

height: 400px;

background-position: center center;

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;
width: 75%;

border-radius: 4px;

align-self: center;

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

.spectrum div {

font: inherit;

padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

.spectrum p {

color: #FFFFFF;

text-align: left;
}

/* Roast types */

.green {

background-color: darkseagreen;

.light {

background-color: sienna;

.city {

background-color: saddlebrown;

.vienna {

background-color: brown;

.italian {

background-color: black;

/* Typography */

h1 {
color:midnightblue;

background-color:aqua;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 500;

text-align: left;

text-transform: uppercase;

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;
text-align: center;

h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;

font-weight: 300;

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

li {
border-bottom: 1px solid #E4BB97;

list-style: none;

margin: 100px 0px;

padding-bottom: 60px;

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;

}
Index.html

<!DOCTYPE html>

<html>

<head>

<title>The Best Coffee - By Region</title>

<link rel='stylesheet' href='style.css'>

</head>

<body>

<h1>The Best Coffee Regions</h1>

</div>

<h3>A Note on Roasting</h3>

<p>Roasting coffee transforms the chemical and physical properties of raw coffee beans into roasted
coffee products. This process is what produces the characteristic flavor of coffee by causing the green
coffee beans to change in taste. Many coffee roasters determine the level of roast by eye, assessing the
color of the beans to determine the desired roast-level.</p>

<br>

<h4>Green Beans</h4>

<h5>22&degC (72&degF)</h5>
<p>Green coffee as it arrives at the dock. They can be stored for approximately 12-18 months in a
climate controlled environment before quality loss is noticeable.</p>

</div>

<h4>Light Roast</h4>

<p>Moderate light brown, but still mottled in appearance. A preferred roast for some specialty
roasters, highlights origin characteristics as well as complex acidity.</p>

</div>

<h4>City Roast</h4>

<p>Medium brown, common for most specialty coffee. Good for tasting origin character, although
roast character is noticeable.</p>

</div>

<h4>Vienna Roast</h4>

<p>Moderate dark brown with light surface oil, more bittersweet, caramel flavor, acidity muted. In
the middle of second crack. Any origin characteristics have become eclipsed by roast at this level.</p>

</div>

<h4>Italian Roast</h4>

<p>Nearly black and shiny, burnt tones become more distinct, acidity nearly eliminated, thin
body.</p>

</div>
</div>

</div>

<ul>

<li>

<h2>Brazil</h2>

<p>Arabica dominates both Brazil and the world as a whole with about 85% of the production;
robusta accounts for the remaining 30%. In Brazil, arabica production is located in the main coffee-
growing cluster of states led by Rio where arabica is

produced almost exclusively. Robusta is primarily grown in the northwestern much smaller state of
Espirito Santo where about 80% of the coffee is robusta.</p>

<a href='#'>Learn More about Brazil</a>

</li>

<li>

<h2>Colombia</h2>

<p>Colombia has a reputation as producing mild, well balanced coffee beans.Colombia's average
annual coffee production of 11.5 million bags is the third total highest in the world, after Brazil and
Vietnam; though highest in terms of the arabica

bean. The beans are exported to United States, Germany, France, Japan, and Italy. Most coffee is
grown in the Colombian coffee growing axis region.</p>

<a href='#'>Learn More about Colombia</a>

</li>

<li>

<h2>India</h2>

<p>Indian coffee, grown mostly in southern India under monsoon rainfall conditions, is also termed
as 'Indian monsooned coffee'. Its flavor is defined as: 'At its best similar to the flavor characteristics of
Pacific coffees, but at its worst bland and uninspiring'. The two well known species of coffee grown are
the Arabica and Robusta. Probably the most commonly planted Arabica in India and Southeast Asia is
S.795.</p>
<a href='#'>Learn More about India</a>

</li>

<li>

<h2>Ethiopia</h2>

<p>Ethiopian beans can be divided into 3 categories: Longberry, Shortberry, and Mocha. Longberry
varieties consist of the largest beans and are often considered of the highest quality in both value and
flavor. Shortberry varieties are smaller. The Mocha variety is a highly prized commodity. Mocha Harars
are known for their peaberry beans that often have complex chocolate, spice and citrus notes.</p>

<a href='#'>Learn More about Ethiopia</a>

</li>

<li>

<h2>Costa Rica</h2>

<p>Costa Rican coffee beans are considered among the best in the world. Tarrazu is thought to
produce the most desirable coffee beans in Costa Rica. In 2012, Tarrazu Geisha coffee became the most
expensive coffee sold by Starbucks in 48 of their stores in the United States, using the Clover automated
French press. The finest coffee is typically grown at altitudes of 1200 to 1700 meters.</p>

<a href='#'>Learn More about Costa Rica</a>

</li>

<li>

<h2>Kenya</h2>

<p>The acidic soil in highlands of central Kenya, just the right amount of sunlight and rainfall provide
excellent conditions for growing coffee plants. Coffee from Kenya is of the 'Colombia mild' type, and is
well known for its intense flavor, full body, and pleasant aroma with notes of cocoa and high grade
coffee from Kenya is one of the most sought-after coffees in the world.</p>

<a href='#'>Learn More about Kenya</a>

</li>

</ul>

</body>
</html>
COLOR

Hexadecimal

One syntax that we can use to specify colors is called hexadecimal. Colors

specified using this system are called hex colors. A hex color begins with a
hash character (#) which is followed by three or six characters. The characters
represent values for red, blue and green.

Notice that black, white, and aqua are all represented with both three

characters and six characters. This can be done with hex colors whose number
pairs are the same characters. In the example above, aqua can be represented
as #0FF because both of the first two characters are 0 and the second and third
pairs of characters are both Fs. Keep in mind that all three character hex colors
can be represented with six characters (by repeating each character twice) but
the same is not true in reverse.

You can include hex colors just as you would include named
colors: background-color: #9932cc;, and the letters can be uppercase or
lowercase.

Instructions

1.
In the browser is a web page that uses named colors and hex colors. We’re
going to translate the named colors into hex, to be more consistent. The
colors won’t visually change, yet.

In style.css, find the CSS rule that uses the named color darkseagreen and
change it to its hex value, #8FBC8F.
Stuck? Get a hint

Find the four other named colors of the roast types and convert them to their
hex values, as shown here:

 sienna: #A0522D
 saddlebrown: #8B4513
 brown: #A52A2A
 black: #000000

Hexadecimal

One syntax that we can use to specify colors is called hexadecimal. Colors

specified using this system are called hex colors. A hex color begins with a
hash character (#) which is followed by three or six characters. The characters
represent values for red, blue and green.

darkseagreen: #8FBC8F
sienna:       #A0522D
saddlebrown:  #8B4513
brown:        #A52A2A
black:        #000000 or #000
white:        #FFFFFF or #FFF
aqua:         #00FFFF or #0FF
In the example above, you may notice that there are both letters and numbers
in the values. This is because the hexadecimal number system has 16 digits (0-
15) instead of 10 (0-9) like in the standard decimal system. To represent 10-15,
we use A-F. Here is a list of many different colors and their hex values.
Notice that black, white, and aqua are all represented with both three
characters and six characters. This can be done with hex colors whose number
pairs are the same characters. In the example above, aqua can be represented
as #0FF because both of the first two characters are 0 and the second and third
pairs of characters are both Fs. Keep in mind that all three character hex colors
can be represented with six characters (by repeating each character twice) but
the same is not true in reverse.

You can include hex colors just as you would include named
colors: background-color: #9932cc;, and the letters can be uppercase or
lowercase.

Instructions

In the browser is a web page that uses named colors and hex colors. We’re
going to translate the named colors into hex, to be more consistent. The
colors won’t visually change, yet.

In style.css, find the CSS rule that uses the named color darkseagreen and
change it to its hex value, #8FBC8F.
Checkpoint 2 Passed

Stuck? Get a hint

Find the four other named colors of the roast types and convert them to their
hex values, as shown here:

 sienna: #A0522D
 saddlebrown: #8B4513
 brown: #A52A2A
 black: #000000

body {

padding: 0;
margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/ Header styles /

.header {

background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?
dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);

height: 400px;

background-position: center center;

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;

width: 75%;

border-radius: 4px;

align-self: center;
}

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

.spectrum div {

font: inherit;

padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

.spectrum p {

color: #FFFFFF;

text-align: left;

/* Roast types */
.green {

background-color: #8FBC8F;

.light {

background-color: #A0522D;

.city {

background-color: #8B4513;

.vienna {

background-color: #A52A2A;

.italian {

background-color: #000000;

/* Typography */

h1 {

color: #41292C;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;
line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

color: midnightblue;

background-color: aqua;

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 500;

text-align: left;

text-transform: uppercase;

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;

text-align: center;

}
h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;

font-weight: 300;

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

li {

border-bottom: 1px solid #E4BB97;

list-style: none;
margin: 100px 0px;

padding-bottom: 60px;

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;

}
body {

padding: 0;

margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/ Header styles /

.header {

background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?
dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);

height: 400px;

background-position: center center;

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;

width: 75%;
border-radius: 4px;

align-self: center;

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

.spectrum div {

font: inherit;

padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

.spectrum p {

color: #FFFFFF;

text-align: left;

}
/* Roast types */

.green {

background-color:rgb(143, 188, 143);

.light {

background-color: #A0522D;

.city {

background-color: #8B4513;

.vienna {

background-color: #A52A2A;

.italian {

background-color: #000000;

/* Typography */

h1 {

color: #41292C;
font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

color: midnightblue;

background-color: aqua;

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 500;

text-align: left;

text-transform: uppercase;

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;
text-align: center;

h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;

font-weight: 300;

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

li {
border-bottom: 1px solid #E4BB97;

list-style: none;

margin: 100px 0px;

padding-bottom: 60px;

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;

}
COLOR
RGB Colors
There is another syntax for representing RGB values, commonly referred to as
“RGB value” or just “RGB”, that uses decimal numbers rather than hexadecimal
numbers, and it looks like this:

h1 {
color: rgb(23, 45, 23);
}
Each of the three values represents a color component, and each can have a
decimal number value from 0 to 255. The first number represents the amount
of red, the second is green, and the third is blue. These colors are exactly the
same as hex, but with a different syntax and a different number system.

In general, hex and RGB color representations are equivalent. Which you
choose is a matter of personal taste. That said, it’s good to choose one and be
consistent throughout your CSS, because it’s easier to compare hex to hex and
RGB to RGB.

Instructions

1.
In style.css, find the hex value #8FBC8F and change it to rgb(143, 188, 143).
Checkpoint 2 Passed
Hint
You can find #8FBC8F inside the .green selector ruleset. Copy and paste the
complete RGB value where the hex value was.
2.
In style.css, find the hex value #A0522D and change it to rgb(160, 82, 45).
Checkpoint 3 Passed

Hint
You can find #A0522D inside the .light selector ruleset.
3.
In style.css, find the hex value #8B4513 and change it to rgb(139, 69, 19).
Checkpoint 4 Passed

Hint
You can find #8B4513 inside the .city selector ruleset.

Concept Review

body {

padding: 0;

margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/ Header styles /

.header {
background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?
dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);

height: 400px;

background-position: center center;

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;

width: 75%;

border-radius: 4px;

align-self: center;

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

.spectrum div {
font: inherit;

padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

.spectrum p {

color: #FFFFFF;

text-align: left;

/* Roast types */

.green {

background-color:rgb(143, 188, 143);

.light {

background-color: rgb(160, 82, 45);

.city {

background-color: rgb(139, 69, 19);

}
.vienna {

background-color: #A52A2A;

.italian {

background-color: #000000;

/* Typography */

h1 {

color: #41292C;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

color: midnightblue;

background-color: aqua;

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 500;

text-align: left;

text-transform: uppercase;

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;

text-align: center;

h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;
font-weight: 300;

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

li {

border-bottom: 1px solid #E4BB97;

list-style: none;

margin: 100px 0px;

padding-bottom: 60px;

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

}
a{

color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;

body {

padding: 0;

margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/ Header styles /

.header {

background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?
dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);
height: 400px;

background-position: center center;

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;

width: 75%;

border-radius: 4px;

align-self: center;

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

.spectrum div {

font: inherit;
padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

.spectrum p {

color: #FFFFFF;

text-align: left;

/* Roast types */

.green {

background-color:rgb(143, 188, 143);

.light {

background-color: rgb(160, 82, 45);

.city {

background-color: rgb(139, 69, 19);

.vienna {
background-color: #A52A2A;

.italian {

background-color: #000000;

/* Typography */

h1 {

color: #41292C;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

color: midnightblue;

background-color: aqua;

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;
font-weight: 500;

text-align: left;

text-transform: uppercase;

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;

text-align: center;

h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;

font-weight: 300;
}

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

li {

border-bottom: 1px solid #E4BB97;

list-style: none;

margin: 100px 0px;

padding-bottom: 60px;

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

a{
color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;

}
COLOR
Hex and RGB
The hexadecimal and rgb color system can represent many more colors than
the small set of CSS named colors. We can use this new set of colors to refine
our web page’s style.

In both hex and RGB, we have three values, one for each color. Each can be
one of 256 values. Specifically, 256 * 256 * 256 = 16,777,216. That is the
amount of colors we can now represent. Compare that to the roughly 140
named CSS colors!

Recall that we started with named colors, converted them to hex, and then
converted some of the hex colors to rgb. Unless we made a mistake, all of the
colors should still be the same, visually. Let’s use our broadened palette to
make some more refined color choices.

Instructions

1.
In the .green rule in style.css, change the background color to #9EB599.

Run the code. Can you tell the difference?

Stuck? Get a hint
2.
In the .light rule in style.css, change the background color to #683C2C.
Stuck? Get a hint
3.
In the .city rule in style.css, change the background color to #4C352D.
Stuck? Get a hint
4.
In the .vienna rule in style.css, change the background color to #352926.
Stuck? Get a hint
5.
In the .italian rule in style.css, change the background color to #141212.

Run the code one more time. These new colors are a lot closer to the real-life
color of each type of coffee. How does the subtle difference feel?
Stuck? Get a hint
body {

padding: 0;

margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/ Header styles /

.header {

background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?
dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);

height: 400px;

background-position: center center;

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;
width: 75%;

border-radius: 4px;

align-self: center;

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

.spectrum div {

font: inherit;

padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

.spectrum p {

color: #FFFFFF;

text-align: left;
}

/* Roast types */

.green {

background-color: rgb(143, 188, 143);

.light {

background-color: rgb(160, 82, 45);

.city {

background-color: rgb(139, 69, 19);

.vienna {

background-color: #A52A2A;

.italian {

background-color: #000000;

/* Typography */

h1 {
color: #41292C;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

color: midnightblue;

background-color: aqua;

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 500;

text-align: left;

text-transform: uppercase;

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;
font-weight: 500;

text-align: center;

h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;

font-weight: 300;

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

}
li {

border-bottom: 1px solid #E4BB97;

list-style: none;

margin: 100px 0px;

padding-bottom: 60px;

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;
}
Index.html

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Color - HSLA</title>
  <link rel='stylesheet' href='style.css'>
</head>
<body>
  <div class='wrapper'>
    <div class='midground'>
      <div class='foreground'></div>
    </div>
  </div>
</body>
</html>

COLOR
Hue, Saturation, and Lightness
The RGB color scheme is convenient because it’s very close to how computers
represent colors internally. There’s another equally powerful system in CSS
called the hue-saturation-lightness color scheme, abbreviated as HSL.

The syntax for HSL is similar to the decimal form of RGB, though it differs in
important ways. The first number represents the degree of the hue, and can be
between 0 and 360. The second and third numbers are percentages
representing saturation and lightness respectively. Here is an example:

color: hsl(120, 60%, 70%);

Hue is the first number. It refers to an angle on a color wheel. Red is 0
degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at
360. You can see an example of a color wheel below.
Saturation refers to the intensity or purity of the color. The saturation increases
towards 100% as the color becomes richer. The saturation decreases towards
0% as the color becomes grayer.

Lightness refers to how light or dark the color is. Halfway, or 50%, is normal
lightness. Imagine a sliding dimmer on a light switch that starts halfway.
Sliding the dimmer up towards 100% makes the color lighter, closer to white.
Sliding the dimmer down towards 0% makes the color darker, closer to black.

HSL is convenient for adjusting colors. In RGB, making the color a little darker
may affect all three color components. In HSL, that’s as easy as changing the
lightness value. HSL is also useful for making a set of colors that work well
together by selecting various colors that have the same lightness and
saturation but different hues.

Instructions

1.
In the browser is a simple page with different colored rectangles.

In style.css, modify the lightness of the background color of the class

selector .midground to be 25%.
Stuck? Get a hint
2.
Change the saturation of the background color of the .foreground class
selector to 50%.
Stuck? Get a hint
3.
Change the hue of the body selector’s background color to 240 degrees.

Style.css

html,

body {
margin: 0;

height: 100%;

.wrapper {

position: relative;

margin: auto;

padding: 0;

max-width: 75vw;

.midground, .foreground {

position: absolute;

top: 0;

left: 0;

display: inline-block;

margin: 15vh 0 0 15vw;

padding: 0;

width: 35vw;

height: 59vh;

body {

background-color: hsl(60, 100%, 80%);

}
.midground {

background-color: hsl(225, 100%, 50%);

.foreground {

background-color: hsl(325, 25%, 50%);

}
html,

body {

margin: 0;

height: 100%;

.wrapper {

position: relative;

margin: auto;

padding: 0;

max-width: 75vw;

.midground, .foreground {

position: absolute;

top: 0;

left: 0;

display: inline-block;

margin: 15vh 0 0 15vw;

padding: 0;

width: 35vw;

height: 59vh;

body {
background-color: hsl(240, 100%, 80%);

.midground {

background-color: hsl(225, 100%, 25%);

.foreground {

background-color: hsl(325, 50%, 50%);

}
OLOR
Opacity and Alpha
All of the colors we’ve seen so far have been opaque, or non-transparent.
When we overlap two opaque elements, nothing from the bottom element
shows through the top element. In this exercise, we’ll change the opacity, or
the amount of transparency, of some colors so that some or all of the bottom
elements are visible through a covering element.

To use opacity in the HSL color scheme, use hsla instead of hsl, and four
values instead of three. For example:

color: hsla(34, 100%, 50%, 0.1);

The first three values work the same as hsl. The fourth value (which we have
not seen before) is the alpha. This last value is sometimes called opacity.

Alpha is a decimal number from zero to one. If alpha is zero, the color will be
completely transparent. If alpha is one, the color will be opaque. The value for
half-transparent would be 0.5.

You can think of the alpha value as, “the amount of the background to mix
with the foreground”. When a color’s alpha is below one, any color behind it
will be blended in. The blending happens for each pixel; no blurring occurs.

The RGB color scheme has a similar syntax for opacity, rgba. Again, the first
three values work the same as rgb and the last value is the alpha. Here’s an
example:

color: rgba(234, 45, 98, 0.33);

A little unconventional, but still worth mentioning is how hex colors can also
have an alpha value. By adding a two-digit hexadecimal value to the end of
the six-digit representation (#52BC8280), or a one-digit hexadecimal value to the
end of the three-digit representation (#F003), you can change the opacity of a
hexadecimal color. Hex opacity ranges from 00 (transparent) to FF (opaque).

Alpha can only be used with HSL, RGB, and hex colors; we cannot add the
alpha value to name colors like green.
There is, however, a named color keyword for zero opacity, transparent. It’s
equivalent to rgba(0, 0, 0, 0), and it’s used like any other color keyword:

color: transparent;

Instructions

1.
Give the element with class .foreground an alpha value of 0.6. Remember to
change hsl to hsla.
Checkpoint 2 Passed

Hint
To give the color opacity, add a fourth value of 0.6 inside the parentheses of
the hsla color.
2.
Give the element with class .midground an alpha value of 0.4 using hsla.

Run the code, and notice how all the colors blend depending on how they
overlap.
Checkpoint 3 Passed

Hint
To add opacity, add a fourth value inside the parentheses of the hsla color.
3.
Modify the body rule’s background color to have a value of rgba(0, 255, 0,
0.1).

How does opacity change the background?

html,

body {

margin: 0;

height: 100%;

.wrapper {

position: relative;
margin: auto;

padding: 0;

max-width: 75vw;

.midground, .foreground {

position: absolute;

top: 0;

left: 0;

display: inline-block;

margin: 15vh 0 0 15vw;

padding: 0;

width: 35vw;

height: 59vh;

body {

background-color: rgba(0, 255, 0, 0.1);

.midground {

background-color: hsla(225, 100%, 25%, 0.4);

.foreground {
background-color: hsla(325, 50%, 50%, 0.6);

}
OLOR

Review

We’ve completed our extensive tour of the colors in CSS! Let’s review the key information
we’ve learned.

There are four ways to represent color in CSS:

 Named colors—there are more than 140 named colors, which you can review here.
 Hexadecimal or hex colors
o Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by “A” to “F”.
o Hex values always begin with # and specify values of red, blue, and green using
hexadecimal numbers such as #23F41A.
o Six-digit hex values with duplicate values for each RGB value can be shorted to three
digits.
 RGB
o RGB colors use the rgb() syntax with one value for red, one value for blue and one
value for green.
o RGB values range from 0 to 255 and look like this: rgb(7, 210, 50).
 HSL
o HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness
(how light or dark a color is).
o Hue ranges from 0 to 360 and saturation and lightness are both represented as
percentages like this: hsl(200, 20%, 50%).
 You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as
a percentage.

Great job! Feel empowered to add a bit of color to each of your projects!

Instructions

Proceed when you’re ready to move on!

Concept Review

Want to quickly review some of the concepts you’ve been learning? Take a look at this
material's cheatsheet!

Community Forums

Still have questions? View this exercise's thread in the Codecademy Forums.

Code Editor

style.css

1
2

html,

body {
margin: 0;

height: 100%;

.wrapper {

position: relative;

margin: auto;

padding: 0;

max-width: 75vw;

.midground, .foreground {

position: absolute;

top: 0;

left: 0;

display: inline-block;

margin: 15vh 0 0 15vw;

padding: 0;

width: 35vw;

height: 59vh;
Run
Web Browser
LEARN CSS
Paint Store
In this project, you will follow step-by-step instructions to improve a vibrant, color-rich
web page for a home paint business. It displays information about using color in a home
and color swatches with varying lightness, saturation, and hue.

The page is almost ready to be published. You’ll be making the following color-related
changes:

 Exchange some named colors with hexadecimal color values.

 Add some semi-transparent overlays to the banner and footer using RGBA.
 Fill in the first color column of the swatch samples using HSL colors.

The website’s existing index.html and style.css document files are displayed in the text

editor.

Style.css

/* Universal Styles */

html {

font-size: 16px;

body {

font-family: "Open Sans", sans-serif;

text-decoration: none;

color: inherit;

}
strong {

font-weight: bold;

.image-container {

overflow: hidden;

.image-container img {

display: block;

max-width: 100%;

@media only screen and (max-width: 990px) {

html {

font-size: 14px;

/* Header */

header {

display: flex;

align-items: center;
padding: .5rem 3.75rem;

background-color: orange;

header .logo-small {

display: none;

header .logo-small,

header .logo-big {

flex-grow: 1;

nav li {

display: inline;

padding-right: 2rem;

nav li:last-child {

padding-right: 0;

@media only screen and (max-width: 990px) {

header .logo-big {

display: none;
}

header .logo-small {

display: block;

@media only screen and (max-width: 540px) {

header {

flex-direction: column;

padding-left: 0;

padding-right: 0;

header .logo-small {

margin-bottom: 1rem;

/* Banner */

#banner {

position: relative;

height: 43.75rem;

padding: 0 25%;
background: url(" https://content.codecademy.com/courses/freelance-1/unit-6/banner.png")
center center no-repeat;

background-size: cover;

text-align: center;

#banner:before { /* Orange Overlay */

position: absolute;

content: "";

top: 0;

left: 0;

width: 100%;

height: 100%;

#banner * {

position: relative; /* Makes elements display above overlay. */

h1 {

padding-top: 10.4375rem;

padding-bottom: 1.25rem;

font-family: "Creepster", cursive;

font-size: 8rem;
}

#banner p {

color: white;

line-height: 1.5;

font-size: 1.375rem;

@media only screen and (max-width: 820px) {

h1 {

padding-top: 7rem;

font-size: 6rem;

@media only screen and (max-width: 590px) {

h1 {

font-size: 4rem;

/* Color Guide */

#color-guide {

padding: 3.875rem 15% 13.5rem 15%;

}

#color-guide .introduction {

padding: 0 10%;

margin-bottom: .75rem;

text-align: center;

font-size: 1.375rem;

line-height: 1.4;

#color-guide h2 {

margin-bottom: 2.4375rem;

line-height: 1;

font-size: 2rem;

color: orange;

#color-guide .color {

display: flex;

justify-content: space-between;

padding-top: 5.25rem;

.color .information {

display: flex;
flex-direction: column;

justify-content: space-between;

width: 35%;

.color .information h3 {

padding-bottom: .5rem;

font-size: 1.375rem;

font-weight: bold;

.color .information p {

font-size: .875rem;

line-height: 1.4;

.color .swatches {

width: 60%;

.color .swatches h4 {

margin-bottom: 1.25rem;

font-size: 1.125rem;

font-weight: bold;
}

.color .swatch {

display: flex;

height: 6.6875rem;

border: 10px solid #e6e6e6;

margin-bottom: 1.25rem;

.color .swatch:last-child {

margin-bottom: 0;

.color .swatch > div {

flex-grow: 1;

border-right: 10px solid #e6e6e6;

.color .swatch > div:last-child {

border-right: 0;

@media only screen and (max-width: 820px) {

#color-guide .color {

flex-direction: column;
align-items: center;

.color .information {

width: 100%;

margin-bottom: 3rem;

align-items: center;

.color .information h3 {

padding-bottom: 1.5rem;

.color .information p {

margin-bottom: 2rem;

.color .swatches {

width: 100%;

/* Red Swatches */

.reds .base-color {
color: #ff002b;

/* Red lightness decreases by 15 */

.reds .lightness .color-1 {

.reds .lightness .color-2 {

background-color: hsl(350, 100%, 65%);

.reds .lightness .color-3 {

background-color: hsl(350, 100%, 50%);

.reds .lightness .color-4 {

background-color: hsl(350, 100%, 35%);

.reds .lightness .color-5 {

background-color: hsl(350, 100%, 20%);

/* Red saturation decreases by 15 */

.reds .saturation .color-1 {

.reds .saturation .color-2 {

background-color: hsl(350, 85%, 50%);

.reds .saturation .color-3 {

background-color: hsl(350, 70%, 50%);

.reds .saturation .color-4 {

background-color: hsl(350, 55%, 50%);

.reds .saturation .color-5 {

background-color: hsl(350, 40%, 50%);

/* Red hue increases by 15 */

.reds .hue .color-1 {

}
.reds .hue .color-2 {

background-color: hsl(335, 100%, 50%);

.reds .hue .color-3 {

background-color: hsl(350, 100%, 50%);

.reds .hue .color-4 {

background-color: hsl(5, 100%, 50%);

.reds .hue .color-5 {

background-color: hsl(20, 100%, 50%);

/* Green Swatches */

.greens .base-color {

color: #00ff2a;

/* Green lightness decreases by 20 */

.greens .lightness .color-1 {

}

.greens .lightness .color-2 {

background-color: hsl(103, 100%, 70%);

.greens .lightness .color-3 {

background-color: hsl(103, 100%, 50%);

.greens .lightness .color-4 {

background-color: hsl(103, 100%, 30%);

.greens .lightness .color-5 {

background-color: hsl(104, 100%, 10%);

/* Green saturation decreases by 20 */

.greens .saturation .color-1 {

.greens .saturation .color-2 {

background-color: hsl(130, 80%, 50%);

}

.greens .saturation .color-3 {

background-color: hsl(130, 60%, 50%);

.greens .saturation .color-4 {

background-color: hsl(130, 40%, 50%);

.greens .saturation .color-5 {

background-color: hsl(131, 20%, 50%);

/* Green hue increases by 22 */

.greens .hue .color-1 {

.greens .hue .color-2 {

background-color: hsl(108, 100%, 50%);

.greens .hue .color-3 {

background-color: hsl(130, 100%, 50%);

}

.greens .hue .color-4 {

background-color: hsl(152, 100%, 50%);

.greens .hue .color-5 {

background-color: hsl(174, 100%, 50%);

/* Blue Swatches */

.blues .base-color {

color: #0055ff;

/* Blue lightness decreases by 20 */

.blues .lightness .color-1 {

.blues .lightness .color-2 {

background-color: hsl(220, 100%, 70%);

}
.blues .lightness .color-3 {

background-color: hsl(220, 100%, 50%);

.blues .lightness .color-4 {

background-color: hsl(220, 100%, 30%);

.blues .lightness .color-5 {

background-color: hsl(220, 100%, 10%);

/* Blue saturation decreases by 20 */

.blues .saturation .color-1 {

.blues .saturation .color-2 {

background-color: hsl(220, 80%, 50%);

.blues .saturation .color-3 {

background-color: hsl(220, 60%, 50%);

}
.blues .saturation .color-4 {

background-color: hsl(220, 40%, 50%);

.blues .saturation .color-5 {

background-color: hsl(220, 20%, 50%);

/* Blue hue decreases by 20 */

.blues .hue .color-1 {

.blues .hue .color-2 {

background-color: hsl(240, 100%, 50%);

.blues .hue .color-3 {

background-color: hsl(220, 100%, 50%);

.blues .hue .color-4 {

background-color: hsl(200, 100%, 50%);

}
.blues .hue .color-5 {

background-color: hsl(180, 100%, 50%);

/* Footer */

footer {

position: relative;

height: 30rem;

padding: 7.8125rem 30% 0 30%;

background: url("https://content.codecademy.com/courses/freelance-1/unit-6/footer.png") center

center no-repeat;

background-size: cover;

text-align: center;

font-size: 1.125rem;

line-height: 1.4;

color: white;

footer:before { /* Overlay */

position: absolute;

content: "";

top: 0;

left: 0;

width: 100%;

height: 100%;
}

footer * {

position: relative; /* Makes elements display above overlay. */

footer strong {

display: block;

margin-bottom: 1.25rem;

font-size: 2.25rem;

footer p {

margin-bottom: 4.3125rem;

footer .button {

padding: 1.25rem 3.75rem;

border-radius: 4px;

background-color: orange;

@media only screen and (max-width: 560px) {

footer {
padding: 4.8125rem 15% 0 15%;

Index.html

<!DOCTYPE html>

<html>

<head>

<title>House Store</title>

<link rel="stylesheet" type="text/css" href="resources/css/reset.css">

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

<link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

</head>

<body>

<div class="image-container logo-small">

</div>

<div class="image-container logo-big">

</div>

<nav>

<ul>

<li><a href="#">Tools</a></li>
<li><a href="#">Lumber</a></li>

<li><a href="#">Paint</a></li>

<li><a href="#">Garden</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<h1>PAINTING IS SCARY</h1>

<p>But it doesn't have to be! Let our handy Virtual Paint Department help guide you through the
process of choosing a color. Know the hue? You know what to do. Click the order button and we'll get
the paint to you.</p>

</div>

<h2>Color Guide</h2>

<p>Here at HouseStore, we take color seriously. In each of the following sections, well explore our
base colors in swatches that incrementally change three values: <strong>Hue</strong>,
<strong>Saturation</strong> and <strong>Lightness</strong>. You'll be able to pick from a wide variety
of colors that all work well with each other because they <strong>stem from the same
value.</strong></p>

</div>

<p>Firetrucks, lipstick, fresh berries — red is a color with power, emotion, intensity. For this
reason we recommend using reds as accent colors. Red is particularly suited to kitchens, as it is said to
evoke hunger!</p><p>Our base red is <span class="base-color">HSL (350, 100, 50)</span></p>

</div>

<h4>Lightness</h4>

<div class="swatch lightness">

</div>

<h4>Saturation</h4>

<div class="swatch saturation">

<div class="swatch hue">

</div>

<div class="color greens">

<h3>Greens</h3>

<p>They say that geniuses choose green — we think any of these verdant colors will look
smart! Deck your halls like a lush outdoor space, adorn your rooms with emerald, or just make your
houseguests green with envy!</p>

<p>Our base green is <span class="base-color">HSL (130, 100, 50)</span></p>

</div>

<h4>Lightness</h4>
<div class="swatch lightness">

</div>

<h4>Saturation</h4>

<div class="swatch saturation">

</div>

<div class="swatch hue">

</div>

</div>

<div class="color blues">

<h3>Blues</h3>

<p>Blues dont give us the blues — in fact, blue is one of the most popular colors in home
interiors, and for good reason! Energizing like a summer sky, calming like a lakeshore, light as mist or
deep as indigo, blue can do it all.</p>

<p>Our base blue is <span class="base-color">HSL (220, 100, 50)</span></p>

</div>

<h4>Lightness</h4>

<div class="swatch lightness">

</div>

<h4>Saturation</h4>

<div class="swatch saturation">

</div>

<div class="swatch hue">

</div>

<strong>All set? Click below to order.</strong>

<p>Most colors can be delivered to your door within 48 hours. We'll reach out if your color needs
some extra attention, which could delay shipment.</p>

<a href="#" class="button">Order My Paint</a>

</footer>

</body>

</html>

https://www.codecademy.com/courses/learn-css/projects/color-paint-store
Typography:

<!DOCTYPE html>

<html>

<head>

<title>Typography Blog</title>

<link rel='stylesheet' href='styles/reset.css'>

<link rel='stylesheet' href='styles/style.css'>

</head>

<body>

<ul>

<li><a class='home' href='#top'>FAVORITE FONTS</a></li>

<li><a class='pagelink' href='#serif'>SERIF</a></li>

<li><a class='pagelink' href='#sans'>SANS-SERIF</a></li>

<li><a class='pagelink' href='#mono'>MONOSPACED</a></li>

</ul>

</nav>

<h1>Typography</h1>

<p>While typography has been practiced for many centuries, digital font design is a relatively new
discipline. There are some great examples of old-school fonts (also called typefaces) which have been
adapted for use on digital displays. However, I would like to highlight a few of my favorite fonts that
were created with screens in mind.</p>
</div>

<h2>Serif</h2>

<p>Serifs are the small features at the end of strokes within letters. These features are
<strong>functional as well as decorative</strong>. Serif fonts are widely used for body text (eg. articles)
because they are considered easier to read than sans-serif fonts in print.</p>

<p>Serif fonts can often create a feeling of traditionalism and antiquity, due to their common use in
printed materials for many years.</p>

</div>

<div class='font-card garamond'>

<h2>Garamond</h2>

<h5 class='creator'>by Claude Garamond (16th Century)</h5>

<span class='bold text'>Abc</span>

</span>

<h2>Regular</h2>

<span class='regular text'>Abc</span>

</span>
<span class='sample'>

<h2>Italic</h2>

<span class='italic text'>Abc</span>

</span>

</div>

<h2>Sans-Serif</h2>

<p>Sans-Serif ('without serif') describes fonts with characters which lack flourishes at the ends of the
strokes. Sans-serif fonts have become the most prevalent for display of text on computer screens, as on
lower-resolution digital displays, fine details like serifs may disappear or appear too large.</p>

<p>Sans-serif fonts are often used to project an image of simplicity, modernity or minimalism.</p>

</div>

<div class='font-card helvetica'>

<h2>Helvetica</h2>

<h5 class='creator'>by Max Miedinger & Eduard Hoffman (1957)</h5>

<span class='bold text'>Abc</span>

</span>

<h2>Regular</h2>

<span class='regular text'>Abc</span>

</span>

<h2>Italic</h2>

<span class='italic text'>Abc</span>

</span>

</div>

<h2>Monospaced</h2>

<p>A monospaced font's characters each occupy the same amount of horizontal space. This
contrasts with most fonts, where the letters and spacings have different widths. For example, the two
high-use letters 'I' and 'E' do not need the same footprint. The first monospaced Western typefaces were
designed for typewriters.</p>

<p>Many text editors (like those used to write computer code) use monospaced fonts, which aid in
distinguishing between potentially similar characters (like 'l' and '1') and in counting the number of
characters in a line.</p>

</div>

<div class='font-card space'>

<h2>Space Mono</h2>

<h5 class='creator'>by Colophon Foundry (2016)</h5>

<h2>Regular</h2>

<span class='regular text'>Abc</span>

</span>

</div>

</body>

</html>

/* Universal Styles */

html {

font-size: 16px;

font-family: 'Arial', sans-serif;

body {

background-color: #F2F2F2;

text-align: center;

h1 {
padding: 20px;

color: white;

font-size: 28px;

text-align: center;

h2 {

padding: 40px 20px 0 20px;

font-size: 24px;

text-align: center;

text-decoration: none;

max-width: 900px;

margin: 0 auto;

padding: 20px;

}
/* Header */

.header {

position: fixed;

top: 0;

width: 100%;

padding: 20px 0;

background-color: #fff;

font-size: 14px;

.header li {

display: inline-block;

padding: 10px;

.header a {

color: #4A4A4A;

a.home {

color: #4D00FF;

}
/* Banner Section */

.banner {

margin-top: 74px;

padding: 40px 0 100px 0;

background-color: #4D00FF;

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

color: #ffffff;

/* Editorial Sections */

.editorial {

padding-bottom: 40px;

color: #717171;

/* Font Card Sections */

.font-card {

padding: 10px 0 40px 0;

background-color: #ffffff;

text-align: center;

.font-card .creator {

padding: 10px 20px;

font-size: 16px;

.sample {

display: inline-block;

padding: 5px 40px;

.sample .text {

color: #4D00FF;

font-size: 100px;

.garamond {

font-family: Garamond;

.helvetica {
font-family: Helvetica;

.space {

.bold {

font-weight: 900;

.regular {

font-weight: normal;

.italic {

font-weight: normal;

font-style: italic;

YPOGRAPHY

Font Family

You may remember from the Visual Rules lesson that the font of an element
can be changed using the font-family property.

h1 {
font-family: Arial;
}
In the example above, the font family for all <h1> heading elements have been
set to Arial.

Let’s talk about some things to keep in mind when setting font-family values.

Multi-Word Values
When specifying a typeface with multiple words, like Times New Roman, it is
recommended to use quotation marks (' ') to group the words together, like
so:

h1 {
font-family: 'Times New Roman';
}
Web Safe Fonts
There is a selection of fonts that will appear the same across all browsers and
operating systems. These fonts are referred to as web safe fonts. You can check
out a complete list of web safe fonts here.

Fallback Fonts and Font Stacks

Web safe fonts are good fallback fonts that can be used if your preferred font
is not available.

h1 {
font-family: Caslon, Georgia, 'Times New Roman';
}
In the example above, Georgia and Times New Roman are fallback fonts to
Caslon. When you specify a group of fonts, you have what is known as a font
stack. A font stack usually contains a list of similar-looking fonts. Here, the
browser will first try to use the Caslon font. If that’s not available, it will try to
use a similar font, Georgia. And if Georgia is not available, it will try to use
Times New Roman.

Serif and Sans-Serif

You may be wondering what features make a font similar to another font. The
fonts Caslon, Georgia, and Times New Roman are Serif fonts. Serif fonts have
extra details on the ends of each letter, as opposed to Sans-Serif fonts, which
do not have the extra details.
serif and sans-serif are also keyword values that can be added as a final
fallback font if nothing else in the font stack is available.

h1 {
font-family: Caslon, Georgia, 'Times New Roman', serif;
}
In this final example, the font stack has 4 fonts. If the first 3 fonts aren’t
available, the browser will use whatever serif font is available on the system.

Instructions

In style.css, change the font family of the <h1> element to Georgia.

Checkpoint 2 Passed

Hint

Use the font-family property to set the font!

In style.css, change the font family of the .editorial elements to Trebuchet MS.

Checkpoint 3 Passed

Hint

Remember to add quotes around the value!

In style.css, use a font stack to give the .editorial elements fallback fonts

of Times New Roman and serif.
/* Universal Styles */

html {

font-size: 16px;

font-family: 'Arial', sans-serif;

body {

background-color: #F2F2F2;

text-align: center;

h1 {

padding: 20px;

color: white;

font-size: 28px;

text-align: center;

font-family: Georgia;

h2 {

padding: 40px 20px 0 20px;

font-size: 24px;

text-align: center;

}
a{

text-decoration: none;

max-width: 900px;

margin: 0 auto;

padding: 20px;

/* Header */

.header {

position: fixed;

top: 0;

width: 100%;

padding: 20px 0;

background-color: #fff;

font-size: 14px;

font-weight: 900;

.header li {
display: inline-block;

padding: 10px;

.header a {

color: #4A4A4A;

a.home {

color: #4D00FF;

/* Banner Section */

.banner {

margin-top: 74px;

padding: 40px 0 100px 0;

background-color: #4D00FF;

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

color: #ffffff;

font-weight: lighter;
}

/* Editorial Sections */

.editorial {

padding-bottom: 40px;

color: #717171;

font-family: 'Trebuchet MS', 'Times New Roman', serif;

/* Font Card Sections */

.font-card {

padding: 10px 0 40px 0;

background-color: #ffffff;

text-align: center;

.font-card .creator {

padding: 10px 20px;

font-size: 16px;

.sample {

display: inline-block;
padding: 5px 40px;

.sample .text {

color: #4D00FF;

font-size: 100px;

.garamond {

font-family: Garamond;

.helvetica {

font-family: Helvetica;

.space {

.bold {

font-weight: 900;

.regular {
font-weight: normal;

.italic {

font-weight: normal;

font-style: italic;

/* Universal Styles */

html {

font-size: 16px;

font-family: 'Arial', sans-serif;

body {

background-color: #F2F2F2;

text-align: center;

h1 {

text-transform:uppercase;

padding: 20px;

color: white;

font-size: 28px;

text-align: center;
font-family: Georgia;

h2 {

padding: 40px 20px 0 20px;

font-size: 24px;

text-align: center;

text-decoration: none;

max-width: 900px;

margin: 0 auto;

padding: 20px;

/* Header */

.header {

position: fixed;

top: 0;
width: 100%;

padding: 20px 0;

background-color: #fff;

font-size: 14px;

font-weight: 900;

.header li {

display: inline-block;

padding: 10px;

.header a {

color: #4A4A4A;

a.home {

color: #4D00FF;

/* Banner Section */

.banner {

margin-top: 74px;

padding: 40px 0 100px 0;

background-color: #4D00FF;

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

color: #ffffff;

font-weight: lighter;

/* Editorial Sections */

.editorial {

padding-bottom: 40px;

color: #717171;

font-family: 'Trebuchet MS', 'Times New Roman', serif;

/* Font Card Sections */

.font-card {

padding: 10px 0 40px 0;

background-color: #ffffff;

text-align: center;

}
.font-card .creator {

padding: 10px 20px;

font-size: 16px;

font-style: italic;

.sample {

display: inline-block;

padding: 5px 40px;

.sample .text {

color: #4D00FF;

font-size: 100px;

.garamond {

font-family: Garamond;

.helvetica {

font-family: Helvetica;

.space {
}

.bold {

font-weight: 900;

.regular {

font-weight: normal;

.italic {

font-weight: normal;

font-style: italic;

}
TYPOGRAPHY

Web Fonts

Previously, we learned about web safe fonts, a group of fonts supported across browsers
and operating systems. However, the fonts you can use for your website are limitless—
web fonts allow you to express your unique style through a multitude of different fonts
found on the web.

Free font services, like Google Fonts and Adobe Fonts, host fonts that you can link to
from your HTML document with a provided <link> element.

You can also use fonts from paid font distributors like fonts.com by downloading and
hosting them with the rest of your site’s files. You can create a @font-face ruleset in your
CSS stylesheet to link to the relative path of the font file.

Both techniques for including web fonts into your site allow you to go beyond the
sometimes “traditional” appearance of web safe fonts. In the next two exercises, you’ll
learn exactly how to use each of these techniques!

Web Fonts Using <link>

Online font services, like Google Fonts, make it easy to find and link to fonts
from your site. You can browse and select fonts that match the style of your
website.
When you select a font in Google Fonts, you’ll be shown all of the different
styles available for that particular font. You can then select the styles you want
to use on your site.
When you’re done selecting a font and its styles, you can review your selected
font family, and a <link> element will be automatically generated for you to
use on your site!

<head>

<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@100&display=swap" rel="stylesheet">
<head>
The generated <link> element needs to be added to the <head> element in
your HTML document for it to be ready to be used in your CSS.

p {
font-family: 'Roboto', sans-serif;
}
You can then create font-family declarations in your CSS, just like how you
learned to do with other fonts!

Instructions

The font at the bottom of the page, under the Monospaced section, needs to
be “Space Mono”. Let’s fix it by linking to the Space Mono Google Font!

Navigate to Google Fonts and select the “Space Mono” font. In the list of style
variations, find “Regular 400” and click “+ Select this style”.

Copy the provided <link> element, and paste it into the <head> element

inside index.html.
Checkpoint 2 Passed

Hint

The element to be pasted inside the <head> should be:

In style.css, inside the .space ruleset, create a declaration using the font-

family property, with 'Space Mono', monospace; as the value.
<link rel="preconnect" href="https://fonts.gstatic.com">
/* Universal Styles */

html {

font-size: 16px;

font-family: 'Arial', sans-serif;

body {

background-color: #F2F2F2;

text-align: center;

h1 {

padding: 20px;

color: white;

font-size: 28px;

text-align: center;

font-family: Georgia;

text-transform: uppercase;

letter-spacing: 0.3em;

h2 {

padding: 40px 20px 0 20px;

font-size: 24px;
text-align: center;

text-decoration: none;

max-width: 900px;

margin: 0 auto;

padding: 20px;

text-align: justify;

/* Header */

.header {

position: fixed;

top: 0;

width: 100%;

padding: 20px 0;

background-color: #fff;

font-size: 14px;

font-weight: 900;

}
.header li {

display: inline-block;

padding: 10px;

.header a {

color: #4A4A4A;

a.home {

color: #4D00FF;

/* Banner Section */

.banner {

margin-top: 74px;

padding: 40px 0 100px 0;

background-color: #4D00FF;

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

color: #ffffff;

font-weight: lighter;

word-spacing: 0.25em;

line-height: 1.4;

/* Editorial Sections */

.editorial {

padding-bottom: 40px;

color: #717171;

font-family: 'Trebuchet MS', 'Times New Roman', serif;

/* Font Card Sections */

.font-card {

padding: 10px 0 40px 0;

background-color: #ffffff;

text-align: center;

.font-card .creator {

padding: 10px 20px;

font-size: 16px;

font-style: italic;
}

.sample {

display: inline-block;

padding: 5px 40px;

.sample .text {

color: #4D00FF;

font-size: 100px;

.garamond {

font-family: Garamond;

.helvetica {

font-family: Helvetica;

.space {

font-family: 'Space Mono', monospace;

.bold {
font-weight: 900;

.regular {

font-weight: normal;

.italic {

font-weight: normal;

font-style: italic;

}
TYPOGRAPHY

Web Fonts Using @font-face

Fonts can also be added using a @font-face ruleset in your CSS stylesheet

instead of using a <link> element in your HTML document. As mentioned
earlier, fonts can be downloaded just like any other file on the web. They come
in a few different file formats, such as:

 OTF (OpenType Font)

 TTF (TrueType Font)
 WOFF (Web Open Font Format)
 WOFF2 (Web Open Font Format 2)

The different formats are a progression of standards for how fonts will work
with different browsers, with WOFF2 being the most progressive. It’s a good
idea to include TTF, WOFF, and WOFF2 formats with your @font-face rule to
ensure compatibility on all browsers.

Let’s take a look at how to use @font-face using the same Roboto font as

before:
Within the “Selected Families” section, you can use the “Download” button to
download the font files to your computer. The files will be downloaded as a
single format, in this case, TTF. You can use a tool such as Google Web Fonts
Helper to generate additional file types for WOFF and WOFF2.

When you have the files you need, move them to a folder inside your
website’s working directory, and you’re ready to use them in a @font-
face ruleset!

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}
Let’s take a look at the example above, line by line:

 The @font-face at-rule is used as the selector. It’s recommended to define

the @font-face ruleset at the top of your CSS stylesheet.
 Inside the declaration block, the font-family property is used to set a
custom name for the downloaded font. The name can be anything you
choose, but it must be surrounded by quotation marks. In the example,
the font is named 'MyParagraphFont', as this font will be used for all
paragraphs.
 The src property contains three values, each specifying the relative path
to the font file and its format. In this example, the font files are stored
inside a folder named fonts within the working directory.

Once the @font-face at-rule is defined, you can use the font in your stylesheet!

p {
font-family: 'MyParagraphFont', sans-serif;
}
Like using any other fonts, you can use the font-family property to set the font
on any HTML element. The downloaded font can be referenced with the name
you provided as the font-family property’s value in the @font-face ruleset—in
this case, 'MyParagraphFont'.
Instructions

Let’s change the font of the banner using local font files. If you open up
the fonts/ directory using the file navigator in the code editor, you’ll notice
that we have added local font files Glegoo-Regular.woff2, Glegoo-
Regular.woff, Glegoo-Regular.ttf.

At the top of style.css, create a @font-face ruleset and give it the font-

family property and 'GlegooBanner' as its value.
Stuck? Get a hint

Within the @font-face rule, add a src property with the following paths and

formats as values:

 url('../fonts/Glegoo-Regular.woff2') and a format of 'woff2'

 url('../fonts/Glegoo-Regular.woff') and a format of 'woff'
 url('../fonts/Glegoo-Regular.ttf') and a format of 'truetype'

Stuck? Get a hint

Inside the .banner p ruleset, add a declaration that sets the font family
to 'GlegooBanner', with a font size of 20px.

Press “Run” to see the changes in the browser.

<!DOCTYPE html>

<html>

<head>

<title>Typography Blog</title>

<link rel='stylesheet' href='styles/reset.css'>

<link rel='stylesheet' href='styles/style.css'>

<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">

</head>

<body>

<ul>

<li><a class='home' href='#top'>FAVORITE FONTS</a></li>

<li><a class='pagelink' href='#serif'>SERIF</a></li>

<li><a class='pagelink' href='#sans'>SANS-SERIF</a></li>

<li><a class='pagelink' href='#mono'>MONOSPACED</a></li>

</ul>

</nav>

<h1>Typography</h1>

<h2>Serif</h2>

<p>Serif fonts can often create a feeling of traditionalism and antiquity, due to their common use in
printed materials for many years.</p>

</div>

<div class='font-card garamond'>

<h2>Garamond</h2>

<h5 class='creator'>by Claude Garamond (16th Century)</h5>

<span class='bold text'>Abc</span>

</span>

<h2>Regular</h2>

<span class='regular text'>Abc</span>

</span>
<span class='sample'>

<h2>Italic</h2>

<span class='italic text'>Abc</span>

</span>

</div>

<h2>Sans-Serif</h2>

<p>Sans-serif fonts are often used to project an image of simplicity, modernity or minimalism.</p>

</div>

<div class='font-card helvetica'>

<h2>Helvetica</h2>

<h5 class='creator'>by Max Miedinger & Eduard Hoffman (1957)</h5>

<span class='bold text'>Abc</span>

</span>

<h2>Regular</h2>

<span class='regular text'>Abc</span>

</span>

<h2>Italic</h2>

<span class='italic text'>Abc</span>

</span>

</div>

<h2>Monospaced</h2>

</div>

<div class='font-card space'>

<h2>Space Mono</h2>

<h5 class='creator'>by Colophon Foundry (2016)</h5>

<h2>Regular</h2>

<span class='regular text'>Abc</span>

</span>

</div>

</body>

</html>

@font-face {

font-family: 'GlegooBanner';

src: url('../fonts/Glegoo-Regular.woff2') format('woff2'),

url('../fonts/Glegoo-Regular.woff') format('woff'),

url('../fonts/Glegoo-Regular.ttf') format('truetype')

/* Universal Styles */

html {

font-size: 16px;

font-family: 'Arial', sans-serif;

}
body {

background-color: #F2F2F2;

text-align: center;

h1 {

padding: 20px;

color: white;

font-size: 28px;

text-align: center;

font-family: Georgia;

text-transform: uppercase;

letter-spacing: 0.3em;

h2 {

padding: 40px 20px 0 20px;

font-size: 24px;

text-align: center;

text-decoration: none;

}
p{

max-width: 900px;

margin: 0 auto;

padding: 20px;

text-align: justify;

/* Header */

.header {

position: fixed;

top: 0;

width: 100%;

padding: 20px 0;

background-color: #fff;

font-size: 14px;

font-weight: 900;

.header li {

display: inline-block;

padding: 10px;

.header a {
color: #4A4A4A;

a.home {

color: #4D00FF;

/* Banner Section */

.banner {

margin-top: 74px;

padding: 40px 0 100px 0;

background-color: #4D00FF;

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

color: #ffffff;

font-weight: lighter;

word-spacing: 0.25em;

line-height: 1.4;

font-family: 'GlegooBanner';

font-size: 20px;

}
/* Editorial Sections */

.editorial {

padding-bottom: 40px;

color: #717171;

font-family: 'Trebuchet MS', 'Times New Roman', serif;

/* Font Card Sections */

.font-card {

padding: 10px 0 40px 0;

background-color: #ffffff;

text-align: center;

.font-card .creator {

padding: 10px 20px;

font-size: 16px;

font-style: italic;

.sample {

display: inline-block;

padding: 5px 40px;

}

.sample .text {

color: #4D00FF;

font-size: 100px;

.garamond {

font-family: Garamond;

.helvetica {

font-family: Helvetica;

.space {

font-family: 'Space Mono', monospace;

.bold {

font-weight: 900;

.regular {

font-weight: normal;
}

.italic {

font-weight: normal;

font-style: italic;

TYPOGRAPHY
Review
Great job! You learned how to style an important aspect of the user experience—
typography.

Let’s review what you’ve learned so far:

 Typography is the art of arranging text on a page.

 Text can appear bold or thin with the font-weight property.
 Text can appear in italics with the font-style property.
 The vertical spacing between lines of text can be modified with the line-
height property.
 Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
 Fallback fonts are used when a certain font is not installed on a user’s computer.
 The word-spacing property changes how far apart individual words are.
 The letter-spacing property changes how far apart individual letters are.
 The text-align property changes the horizontal alignment of text.
 Google Fonts provides free fonts that can be used in an HTML file with
the <link> tag or the @font-face property.
 Local fonts can be added to a document with the @font-face property and the
path to the font’s source.

Using your new knowledge of CSS typography, feel free to edit the code further to make
the web page more appealing!

Typography:

LEARN CSS
Typography
Aoife Conleavy is a novelist who has been writing about her travels for nearly two
decades. Before the launch of her new novel Tide Blade, which features the stories of
real-life characters in Morocco, the author wants to spruce up her professional website.
You’ll modify the typography on her site, changing the size, style, and font families, to
make the page easier to read.

Using your understanding of typography, help Aoife Conleavy improve the readability of
her site for her readers.

Index.html

<!DOCTYPE html>

<html>

<head>

<title>Morocco</title>

<link rel="stylesheet" type="text/css" href="styles/reset.css">

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

</head>

<body>

<span class="logo">AOFIE CONLEAVY</span>

<ul>

<li><a href="#">TRAVELS</a></li>

<li><a href="#">FICTION</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</nav>

<h1>Morocco</h1>

</div>

<div class="first photo">

</div>

<span class="caption">A convoy of camels criss-crossing the crests of the Sahara</span>

</div>

<p>
<span class="first-letter">I</span> am in the Great Sahara Desert for the third sundown in a row.
Fouad and I pass back and forth a sun-bleached map of the stars. It’s more of a tug-of-war to be honest.
With what remains of the daylight, we commit to memory the positions of spots on the page. We hope
to find some correlation in its negative, which slides overhead as the sun rapidly dies.

</p>

<p>

"Navigating by night is always easier." Fouad flicks these English words as ash from a cigarette.
"You’ll see."

</p>

<p>

"We won't see anything. That's my point!"

</p>

<p>

How did we get here?

</p>

<p>

It started eight days ago when I arrived in Malilla on the boat from Malaga. The sun hit me like a
judgement as I stepped onto the gangplank. A bit about Morocco:

</p>

</div>

<span class="caption">The long and winding road to Merrakec</span>

</div>

<p>
Morocco has a population of over 33.8 million and an area of 446,550 km2 (172,410 sq mi). Its capital
is Rabat, and the largest city is Casablanca. Other major cities include Marrakesh, Tangier, Tetouan, Sale,
Fes, Agadir, Meknes, Oujda, Kenitra, and Nador. A historically prominent regional power, Morocco has a
history of independence not shared by its neighbours.

</p>

<span class="quote">"Navigating by night is always easier."</span>

<p>

Since the foundation of the first Moroccan state by Idris I in 789, the country has been ruled by a
series of independent dynasties, reaching its zenith under the Almoravid and Almohad dynasty,
spanning parts of Iberia and Northwestern Africa. Marinid and Saadi dynasties continued the struggle
against foreign domination, and Morocco remained the only North-African country to avoid Ottoman
occupation.

</p>

<p>

The Alaouite dynasty, the current ruling dynasty, seized power in 1666. In 1912 Morocco was be
divided into a French and Spanish protectorates, with an international zone in Tangier, and regained its
independence in 1956. Moroccan culture is a blend of Arab, indigenous Berber, Sub-Saharan African,
and European influences.

</p>

</div>

<span class="caption">A stall at the Jemaa El Fnaa street market</span>

</div>

<p>

Morocco claims the non-self-governing territory of Western Sahara as its Southern Provinces.
Morocco annexed the territory in 1975, leading to a guerrilla war with indigenous forces until a cease-
fire in 1991. Peace processes have thus far failed to break the political deadlock.

</p>
<p>

Morocco is a constitutional monarchy with an elected parliament. The King of Morocco holds vast
executive and legislative powers, especially over the military, foreign policy and religious affairs.
Executive power is exercised by the government, while legislative power is vested in both the
government and the two chambers of parliament, the Assembly of Representatives and the Assembly of
Councillors. The king can issue decrees called dahirs which have the force of law. He can also dissolve
the parliament after consulting the Prime Minister and the president of the Constitutional court.

</p>

<span class="quote">“Navigating by night is always easier.”</span>

<p>

Morocco's predominant religion is Islam, and the official languages are Arabic and Tamazight.
Moroccan dialect, referred to as Darija, and French are also widely spoken. Morocco is an influential
member of the Arab League and a part of the Union for the Mediterranean. It has the fifth largest
economy of Africa.

</p>

</div>

<span class="caption">The desert at night is strange and beautiful</span>

</div>

<p>

<span class="author">Aoife Donleavy</span> has been writing on her travels for over two decades.

After graduating from the <em>Idaho Writers' Workshop</em>, she piloted a biplane on a two-year
voyage from <em>Anchorage</em>, <em>Alaska</em> to <em>Isafjorour</em>, <em>Iceland</em>
stopping along the way for adventures throughout Europe.

</p>

<p>

Since then, she has camped on all seven continents, and has been recognized worldwide for her
spare, ageless prose. Aoife's new novel, <em>Tide Blade</em>, is currently available from <em>Walrus
Publishing</em>.

</p>

</div>

</footer>

</body>

</html>

Style.css

html {

font-size: 18px;

@media only screen and (max-width: 1000px) {

html {

font-size: 16px;

}
@media only screen and (max-width: 680px) {

html {

font-size: 14px;

/* Header */

.header {

display: flex;

justify-content: space-around;

align-items: center;

height: 4.44rem;

padding: 0 12%;

background-color: white;

box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);

font-family: Verdana, sans-serif;

font-size: .77rem;

.header .logo {

flex-grow: 1;

color: #ffb78c;

}
.header li {

display: inline;

padding-right: 2.22rem;

.header li a {

text-decoration: none;

color: #4a4a4a;

@media only screen and (max-width: 550px) {

.header {

flex-direction: column;

.header .logo {

flex-grow: 0;

/* Banner */

.banner {

display: flex;
flex-direction: column;

justify-content: center;

align-items: center;

height: 50rem;

background: url("https://content.codecademy.com/courses/freelance-1/unit-6/project-
morocco/banner.jpg") center center no-repeat;

background-size: cover;

color: #ffb78c;

.banner h2 {

padding: .55rem 0;

border-top: 4px solid #ffb78c;

border-bottom: 4px solid #ffb78c;

font-size: 1.44rem;

letter-spacing: 2px;

.banner h1 {

padding-top: 1.11rem;

font-size: 11rem;

@media only screen and (max-width: 750px) {

.banner {

height: 40rem;
}

.banner h1 {

font-size: 8rem;

@media only screen and (max-width: 530px) {

.banner {

height: 30rem;

.banner h1 {

font-size: 6rem;

/* Journal */

.journal {

padding: 0 25% 4rem 25%;

background-color: rgb(254, 231, 218);

color: #4a4a4a;

}
.photo {

width: 75%;

padding: 1.11rem;

border-radius: 5px;

margin: 0 auto 4.44rem auto;

background-color: white;

.photo .image-container {

overflow: hidden;

margin-bottom: 1.11rem;

.photo .image-container img {

width: 100%;

.photo .caption {

font-style: italic;

.photo.first {

position: relative;

top: -2.77rem;

margin-bottom: 1.67rem;
}

.journal p {

padding-bottom: 2.77rem;

font-size: 1.5rem;

.journal .first-letter {

float: left;

padding-right: 1.4rem;

font-family: "Abril Fatface", serif;

font-size: 7.44rem;

color: #10b0d8;

.quote {

display: block;

padding: 4.44rem 0;

margin-bottom: 3.33rem;

border-top: 4px solid black;

border-bottom: 4px solid black;

text-align: center;

font-size: 3.55rem;

font-weight: 800;

}
@media only screen and (max-width: 680px) {

.journal {

padding: 0 10% 4rem 10%;

/* Footer */

footer {

display: flex;

align-items: center;

padding: 0 1%;

background-color: #212121;

footer .image-container {

width: 400px;

footer .content {

flex-grow: 1;

font-style: italic;

color: #9b9b9b;

}
footer p {

padding-bottom: 1.66rem;

footer p:last-child {

padding-bottom: 0;

footer .author {

color: #ffb78c;

footer em {

color: #cfcfcf;

@media only screen and (max-width: 750px) {

footer {

flex-direction: column;

padding: 0 10% 2rem 10%;

footer .image-container {

height: 300px;
margin-bottom: 2rem;

overflow: hidden;

}
LEARN CSS

Typography

Aoife Conleavy is a novelist who has been writing about her travels for nearly
two decades. Before the launch of her new novel Tide Blade, which features
the stories of real-life characters in Morocco, the author wants to spruce up
her professional website. You’ll modify the typography on her site, changing
the size, style, and font families, to make the page easier to read.

Using your understanding of typography, help Aoife Conleavy improve the

readability of her site for her readers.

Tasks

6/9 Complete

Mark the tasks as complete by checking them off

Morocco
1.

The header section of Aoife Conleavy’s site contains the author’s name, along

with the text “Travels”, “Fiction”, and “Contact”.

Change the font-weight of the header so that the text appears bold.

Hint

font-weight will accept bold as a value:

selector {
font-weight: bold;
}
2.

Moving down the page, the banner section contains a stunning image, two

blocks of text, an h2 tag with the text “DEC 20XX”, and an h1 tag with the text
“Morocco”.
Give the h2 tag a font weight of 500 and the h1 tag a font weight of 900.
Hint

Numeric font-weights are set with no units. To set a font-weight of 100, you

can use this format:

selector {
font-weight: 100;
}
3.

After reviewing the project, the author suggests that the line height seems a
bit off and needs to be altered throughout the page.

Work down the page and set line-height of the following page elements as
recommended:

 The paragraph within the journal section should have a line height

of 1.4 times the font size.
 The first letter of the journal section should have a line height
of .87 times the font size.
 The quote should have a line height of 1.2 times the font size.
 The footer content should have a line height 1.5 times the font size.

Hint
line-height can be set as a ratio when no units are supplied with its value. For
instance, to set a line-height of two times the font-size, you could use a rule
like this:

selector {
line-height: 2;
}
4.

The site currently uses common serif and sans-serif fonts found on users’

computers. Since the author first published the site, a number of new font
libraries have created fonts that you think would be a better fit for the site.
Using the Google Fonts API, add the following fonts to the index.html file:

 Abril Fatface
 Work Sans in font-weight 400, 500, and 800.
 Merriweather in font-weight 400 and 400 italic

You may either link these fonts in a single <link> tag, or three

separate <link> tags.
Hint

Select the three fonts and the correct weights from the API. Use the
provided <link> tag in the <header> to link the fonts to your page.
5.

You can now use the newly added fonts from Google Fonts within our project.
Moving down the page again, set the font-family and property as
recommended:

 Set the typeface of the h2 tag in the banner section to "Work Sans"

 Set the typeface of the h1 tag in the banner section to "Abril Fatface"
 Set the typeface of the journal section to Work Sans
 Set the typeface of the photo caption to Merriweather

Hint
font-family can be set in a CSS rule set:

selector {
font-family: 'Font-name';
}
6.

The page looks great, but you also have to account for users who may not be
able to access the Google Fonts. Find them several fallback fonts to use in case
they are restricted from accessing fonts from a third party:

Set the fallback fonts as follows:

 h2 tag in the banner section: "Arial" and sans-serif
 h1 tag in the banner section: sans-serif
 The journal section: serif
 The photo caption: serif

Hint
serif or sans-serif can be set as fallbacks in font-family, separated by a ,:

selector {
font-family: 'Font-name', serif;
}
7.

Instead of linking the font from index.html, you realize it would be a better to

import Google fonts in the files directly into stylesheets with the @font-
face property.

Use the @font-face property to import the fonts directly to the stylesheets, and

remove the <link> tags that reference the Google fonts from
the index.html page.
Stuck? Get a hint

Looking at the page, the author suggests the page really come together if we
used a specific font, CroissantOne-Regular.ttf, in the footer. The files have been
downloaded and added to our project within the fonts directory within
the styles/ directory where our CSS files are stored.

To complete the task you need to use the @font-face property to make these

fonts accessible in the stylesheets. Name the font "Croissant One".
Stuck? Get a hint

https://fonts.google.com/?query=serif
<!DOCTYPE html>

<html>

<head>

<title>Everyday with ILIAS AHMED</title>

</head>

// devoloped by ilias ahmed

<body>

<a href="#contact"> <img src="https://content.codecademy.com/courses/learn-html/elements-and-

structure/profile.jpg" /></a>

<h1>An Insider’s Guide to NYFW</h1>

<p><a href="https://en.wikipedia.org/wiki/New_York_Fashion_Week." target="_blank" >NYFW</a> can

be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to
give you an insider’s guide and make your first show a pleasurable experience. By taking my tips and
tricks, and following your gut, you’ll have an unforgettable experience!

</p>

<p>If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or
connected my first 2 years so I’m here to help you out. First, plan out which shows are most important
to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your
cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the
designers you want to see most. Lastly, purchase your tickets and get excited!

</p>

<h2>Getting Tickets & Picking the Shows</h2>

<p>Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it
will show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen
to express through their new lines. Also it’s important to wear shoes you’ll be comfortable in all day.
Obviously you want to look good, but you’ll be on your feet all day long, so be prepared

</p>

<h3>by Isabelle Rodriguez | 1 day ago</h3>

<h4>Related Content</h4>

<ul>

<ol>“How To Style Boyfriend Jeans”</ol>

<ol>“When Print Is Too Much”</ol>

<ol>“The Overalls Trend”</ol>

<ol>“Fall’s It Color: Blush”</ol>

</ul>

<strong>email</strong>

<strong>address</strong>

<p>email: isa@fashionblog.com | phone: 917-555-1098 | address: 371 284th St, New York, NY, 10001
</p>

</div>

</body>
</html>
Website building with html css

<!DOCTYPE html>

<html>

<head>

<title>Everyday with ILIAS AHMED</title>

</head>

// devoloped by ilias ahmed

<body>

<a href="#contact"> <img src="https://content.codecademy.com/courses/learn-html/elements-and-

structure/profile.jpg" /></a>

<h1>An Insider’s Guide to NYFW</h1>

<p><a href="https://en.wikipedia.org/wiki/New_York_Fashion_Week." target="_blank" >NYFW</a> can

</p>

</p>

<h2>Getting Tickets & Picking the Shows</h2>

</p>

<h3>by Isabelle Rodriguez | 1 day ago</h3>

<h4>Related Content</h4>

<ul>

<ol>“How To Style Boyfriend Jeans”</ol>

<ol>“When Print Is Too Much”</ol>

<ol>“The Overalls Trend”</ol>

<ol>“Fall’s It Color: Blush”</ol>

</ul>

<strong>email</strong>

<strong>address</strong>

<p>email: isa@fashionblog.com | phone: 917-555-1098 | address: 371 284th St, New York, NY, 10001
</p>

</div>

</body>
</html>

Tim Rifat - Understanding How To Defeat Radio Based Mind Control Systems Part 2
100% (2)
Tim Rifat - Understanding How To Defeat Radio Based Mind Control Systems Part 2
7 pages
Head Space
100% (3)
Head Space
18 pages
Hvac Package-2 Boq PDF
No ratings yet
Hvac Package-2 Boq PDF
2 pages
Jquery Animations - The Animate Method: $ (Selector) .Animate ( (Params), Speed, Callback)
No ratings yet
Jquery Animations - The Animate Method: $ (Selector) .Animate ( (Params), Speed, Callback)
16 pages
Chap2 Functions Arrays and Strings in PHP
0% (1)
Chap2 Functions Arrays and Strings in PHP
23 pages
Advanced Web Designing
No ratings yet
Advanced Web Designing
8 pages
Salary - SQL Interview Queries Examples For Fresher and Exprinced Set-4 Interview Questions PDF
No ratings yet
Salary - SQL Interview Queries Examples For Fresher and Exprinced Set-4 Interview Questions PDF
8 pages
Info2180 Lecture 3
No ratings yet
Info2180 Lecture 3
125 pages
Javascript Note
No ratings yet
Javascript Note
81 pages
Adv Java Notes For College
No ratings yet
Adv Java Notes For College
192 pages
Create A Simple HTML Website With Postgres Databas
No ratings yet
Create A Simple HTML Website With Postgres Databas
8 pages
JavaScript and XHTML Documents
100% (3)
JavaScript and XHTML Documents
40 pages
Working With Forms
No ratings yet
Working With Forms
26 pages
Presentation BDD
No ratings yet
Presentation BDD
43 pages
WPT Mock
No ratings yet
WPT Mock
6 pages
ExpressJS For CDAC
No ratings yet
ExpressJS For CDAC
22 pages
HTML5 Elements: Web Technology Assignment - 1947234
100% (2)
HTML5 Elements: Web Technology Assignment - 1947234
58 pages
Javascript Form Validation
No ratings yet
Javascript Form Validation
18 pages
Basics To Master HTML
No ratings yet
Basics To Master HTML
51 pages
Express - Js Mastery - Comprehensive Study Notes For Building Powerful Web Applications - by Marazzo - Medium
No ratings yet
Express - Js Mastery - Comprehensive Study Notes For Building Powerful Web Applications - by Marazzo - Medium
18 pages
Latest JavaScript Interview Questions and Answers PDF - CodeProject2019
No ratings yet
Latest JavaScript Interview Questions and Answers PDF - CodeProject2019
7 pages
Web Technology Lab: Department of Computer Science & Engineering
No ratings yet
Web Technology Lab: Department of Computer Science & Engineering
42 pages
Boostrap 3
No ratings yet
Boostrap 3
56 pages
CSS3 Interview Questions and Answers
No ratings yet
CSS3 Interview Questions and Answers
2 pages
Course 1: Building Layouts (Part A)
No ratings yet
Course 1: Building Layouts (Part A)
33 pages
WT Course Material
No ratings yet
WT Course Material
164 pages
Javascript (CodeAcademy) - Предавања v.2
No ratings yet
Javascript (CodeAcademy) - Предавања v.2
36 pages
Html5 Overview
No ratings yet
Html5 Overview
1 page
Network Security Basics Report
No ratings yet
Network Security Basics Report
4 pages
Javascript Tutor
0% (1)
Javascript Tutor
71 pages
WD File
No ratings yet
WD File
59 pages
What Is HTML
No ratings yet
What Is HTML
39 pages
Top 50 UI Developer Interview Questions and Answers UPDATED TCS Cognizant PDF
No ratings yet
Top 50 UI Developer Interview Questions and Answers UPDATED TCS Cognizant PDF
8 pages
HTML Css Notes
No ratings yet
HTML Css Notes
7 pages
Html5: By: Namita Singh
No ratings yet
Html5: By: Namita Singh
16 pages
PHP - File Uploading: Creating An Upload Form
No ratings yet
PHP - File Uploading: Creating An Upload Form
4 pages
Inline CSS:: CSS: Cascading Style Sheet
No ratings yet
Inline CSS:: CSS: Cascading Style Sheet
44 pages
MERN Stack CRUD Operations
100% (1)
MERN Stack CRUD Operations
22 pages
Android Notes
No ratings yet
Android Notes
24 pages
10 ASP - Net Session14
No ratings yet
10 ASP - Net Session14
23 pages
Java Fresher Resume
No ratings yet
Java Fresher Resume
2 pages
Developing Cascading Style Sheets Edited133
No ratings yet
Developing Cascading Style Sheets Edited133
62 pages
Responsive Web Design by Tim Davison
No ratings yet
Responsive Web Design by Tim Davison
30 pages
CSIT128 All Slides
No ratings yet
CSIT128 All Slides
421 pages
Javascript Validation
No ratings yet
Javascript Validation
24 pages
3-Tier Architecture: Step by Step Exercises
No ratings yet
3-Tier Architecture: Step by Step Exercises
71 pages
Module 2-Java Servlets: I) Introduction
No ratings yet
Module 2-Java Servlets: I) Introduction
11 pages
Bootstrap Interview Questions PDF
No ratings yet
Bootstrap Interview Questions PDF
13 pages
MG-Develop A Backend Application Using Node Js
No ratings yet
MG-Develop A Backend Application Using Node Js
16 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
113 pages
100 JavaScript Questions
No ratings yet
100 JavaScript Questions
52 pages
JavaScript Syllabus
No ratings yet
JavaScript Syllabus
3 pages
Clean Code
No ratings yet
Clean Code
22 pages
Built-In Objects in Javascript
No ratings yet
Built-In Objects in Javascript
39 pages
Javascript 1
No ratings yet
Javascript 1
88 pages
06 ASP - Net Session08
No ratings yet
06 ASP - Net Session08
26 pages
HTML Codes N Tags
100% (1)
HTML Codes N Tags
183 pages
Learn CSS - The Box Model Cheatsheet - Codecademy
No ratings yet
Learn CSS - The Box Model Cheatsheet - Codecademy
2 pages
SAINATH Web Developer
No ratings yet
SAINATH Web Developer
1 page
HTML CSS and JavaScript
No ratings yet
HTML CSS and JavaScript
4 pages
PL - SQL Useful Examples
No ratings yet
PL - SQL Useful Examples
37 pages
Java servlet Second Edition
From Everand
Java servlet Second Edition
Gerardus Blokdyk
No ratings yet
Building Engaging Travel Websites
No ratings yet
Building Engaging Travel Websites
14 pages
Introduction To Cybersecurity - Case Studies & Looking Ahead Cheatsheet - Codecademy
No ratings yet
Introduction To Cybersecurity - Case Studies & Looking Ahead Cheatsheet - Codecademy
2 pages
Kot Lin For Loop
No ratings yet
Kot Lin For Loop
33 pages
KotLin For Loop
No ratings yet
KotLin For Loop
119 pages
Learn JQuery - Learn JQuery - Introduction Cheatsheet - Codecademy
No ratings yet
Learn JQuery - Learn JQuery - Introduction Cheatsheet - Codecademy
2 pages
Learn Java - Arrays and ArrayLists Cheatsheet - Codecademy
No ratings yet
Learn Java - Arrays and ArrayLists Cheatsheet - Codecademy
2 pages
Learn JQuery - Learn JQuery - Traversing The DOM Cheatsheet - Codecademy
No ratings yet
Learn JQuery - Learn JQuery - Traversing The DOM Cheatsheet - Codecademy
2 pages
Web Development Fundamentals - Learn HTML - Elements Cheatsheet - Codecademy
No ratings yet
Web Development Fundamentals - Learn HTML - Elements Cheatsheet - Codecademy
5 pages
Learn Java - Object-Oriented Java Cheatsheet - Codecademy
No ratings yet
Learn Java - Object-Oriented Java Cheatsheet - Codecademy
7 pages
Programming Logic With Java - Conditionals and Control Flow Cheatsheet - Codecademy
No ratings yet
Programming Logic With Java - Conditionals and Control Flow Cheatsheet - Codecademy
4 pages
Learn Java - Access, Encapsulation, and Static Methods Cheatsheet - Codecademy
No ratings yet
Learn Java - Access, Encapsulation, and Static Methods Cheatsheet - Codecademy
6 pages
JavaScript Syntax, Part I - Learn JavaScript Syntax - Introduction Cheatsheet - Codecademy
100% (1)
JavaScript Syntax, Part I - Learn JavaScript Syntax - Introduction Cheatsheet - Codecademy
6 pages
Beginner HTML - Elements and Structure Cheatsheet - Codecademy
No ratings yet
Beginner HTML - Elements and Structure Cheatsheet - Codecademy
7 pages
Profile - Ilias Ahmed - Codecademycybersecurity
No ratings yet
Profile - Ilias Ahmed - Codecademycybersecurity
1 page
Git and Github, Part I - Introduction To Git Cheatsheet - Codecademy
No ratings yet
Git and Github, Part I - Introduction To Git Cheatsheet - Codecademy
3 pages
Path Menu Get Unstuck Tools: My Home
No ratings yet
Path Menu Get Unstuck Tools: My Home
4 pages
Profile - Ilias Ahmed - Codecademyfullstack Engg
No ratings yet
Profile - Ilias Ahmed - Codecademyfullstack Engg
1 page
Profile - Ilias Ahmed - Codecademyreactreduxapps
No ratings yet
Profile - Ilias Ahmed - Codecademyreactreduxapps
1 page
Learn JQuery - Learn JQuery - Event Handlers Cheatsheet - Codecademy
No ratings yet
Learn JQuery - Learn JQuery - Event Handlers Cheatsheet - Codecademy
2 pages
If Then Java
No ratings yet
If Then Java
82 pages
Java Basic With An Roid
No ratings yet
Java Basic With An Roid
3 pages
Sign in To Your Payoneer Account - Payoneer Login
No ratings yet
Sign in To Your Payoneer Account - Payoneer Login
1 page
Learn SQL - Manipulation Cheatsheet - Codecademy
No ratings yet
Learn SQL - Manipulation Cheatsheet - Codecademy
2 pages
Cheat Sheet Java
No ratings yet
Cheat Sheet Java
7 pages
Code Academy SQ L
No ratings yet
Code Academy SQ L
6 pages
Ilias Ahmed - Codecademy
No ratings yet
Ilias Ahmed - Codecademy
1 page
Learn SQL - Aggregate Functions Cheatsheet - Codecademy
No ratings yet
Learn SQL - Aggregate Functions Cheatsheet - Codecademy
2 pages
2
No ratings yet
2
107 pages
Learn SQL - Multiple Tables Cheatsheet - Codecademy
No ratings yet
Learn SQL - Multiple Tables Cheatsheet - Codecademy
2 pages
PSQCA 2WheelerAuto
No ratings yet
PSQCA 2WheelerAuto
11 pages
Towing Winch Emergency Release Systems-Cu Aplicare Din 2020
No ratings yet
Towing Winch Emergency Release Systems-Cu Aplicare Din 2020
4 pages
3512 1275 kVA Prime Low BSFC - EMCP4 - EU PDF
No ratings yet
3512 1275 kVA Prime Low BSFC - EMCP4 - EU PDF
6 pages
ACE™ Advanced Cement Evaluation Process: Wireline and Perforating Services
No ratings yet
ACE™ Advanced Cement Evaluation Process: Wireline and Perforating Services
2 pages
Lab Guide Coherence Web
No ratings yet
Lab Guide Coherence Web
27 pages
Veracity VOR-ORM-XT Instruction Manual
No ratings yet
Veracity VOR-ORM-XT Instruction Manual
2 pages
Presentasi Iso 9001 Patama
No ratings yet
Presentasi Iso 9001 Patama
8 pages
Yokogawa DPIT Model
No ratings yet
Yokogawa DPIT Model
11 pages
Activity No. 1 Let's Do The ACTIVITY!
No ratings yet
Activity No. 1 Let's Do The ACTIVITY!
3 pages
Lynsay Sands
No ratings yet
Lynsay Sands
2 pages
Log Management and ISO 27001: Rakesh Maheshwari Rakesh Maheshwari
No ratings yet
Log Management and ISO 27001: Rakesh Maheshwari Rakesh Maheshwari
29 pages
Radio Access Technologies For 5G: Takehiro Nakamura NTT Docomo, Inc
No ratings yet
Radio Access Technologies For 5G: Takehiro Nakamura NTT Docomo, Inc
22 pages
GALANZ Rekuperatori
No ratings yet
GALANZ Rekuperatori
8 pages
Falcon Inspection Presentation
100% (1)
Falcon Inspection Presentation
26 pages
DLK - Door & Lock PDF
No ratings yet
DLK - Door & Lock PDF
970 pages
AUTOSAR PRS DiagnosticLogAndTraceProtocol
No ratings yet
AUTOSAR PRS DiagnosticLogAndTraceProtocol
68 pages
04 Expqg 1 e
No ratings yet
04 Expqg 1 e
2 pages
ICTP - Online Applications - Application by Siwila, Stephen
No ratings yet
ICTP - Online Applications - Application by Siwila, Stephen
6 pages
Bushing
No ratings yet
Bushing
4 pages
Power Point PPST
100% (1)
Power Point PPST
39 pages
Manual Hanna EC HI 98130 PDF
No ratings yet
Manual Hanna EC HI 98130 PDF
2 pages
Liferay Intregation With CAS and LDAP
No ratings yet
Liferay Intregation With CAS and LDAP
20 pages
Product Design-7 PDF
No ratings yet
Product Design-7 PDF
14 pages
Charges For Certification Services For 2016: Psl/35 Issue
No ratings yet
Charges For Certification Services For 2016: Psl/35 Issue
2 pages
Bracing For Wall Formwork
No ratings yet
Bracing For Wall Formwork
4 pages
Howo Model
No ratings yet
Howo Model
54 pages
Bebo Concrete Arches Technical Guide: Bridge Materials
No ratings yet
Bebo Concrete Arches Technical Guide: Bridge Materials
12 pages