You can use the <link> element to link the HTML and CSS files together.

The <link> element must be placed within the head of the HTML file. It is a self-closing
tag and requires the following three attributes:
1. href - like the anchor element, the value of this attribute must be the address, or path,
to the CSS file.
2. type - this attribute describes the type of document that you are linking to (in this
case, a CSS file). The value of this attribute should be set to text/css.
3. rel - this attribute describes the relationship between the HTML file and the CSS file.
Because you are linking to a stylesheet, the value should be set to stylesheet.

When linking an HTML file and a CSS file together, the <link> element will look like the
following:
<link href="https://www.codecademy.com/stylesheets/style.css" type="text/css" rel="stylesheet">
Note that in the example above the path to the stylesheet is a URL:
https://www.codecademy.com/stylesheets/style.css
Specifying the path to the stylesheet using a URL is one way of linking a stylesheet.

If the CSS file is stored in the same directory as your HTML file, then you can specify
a relative path instead of a URL, like so:
<link href="/style.css" type="text/css" rel="stylesheet">
Using a relative path is very common way of linking a stylesheet.
Although named colors provide 147 different options, this is a small amount when you
consider the flexibility of CSS. To take advantage of the full spectrum of colors that CSS
supports, you have the option of using RGB colors.
RGB (Red, Green, Blue) colors offer the option of 16,777,216 possible colors. How is that
possible?

RGB colors work by mixing together different amounts of red (R), green (G), and blue
(B). Each color (R, G, or B) can take on 1 of a possible 256 values (between 0 and 255).
This results in 16,777,216 possible colors.

To use RGB colors, you can use the rgb() value when styling a color.
h1 { color: rgb(123, 20, 233); background-color: rgb(99, 21, 127); }
In the example above, the value of color is set to rgb(). The three numbers in the
parentheses represent the values for R, G, and B, in that order. Note that you can
use rgb() for background colors as well.

How can you tell what color the RGB values in the example above will result in? Are you
expected to memorize 16,777,216 possibilities? Thankfully, no!

There are many resources on the Internet known as "color pickers" that allow you to
view the result of different RGB values before you decide to use a certain color. If you're
ever in need of a color picker resource, a quick Google search will yield the results you
are looking for.

The current revision of CSS, CSS3 (at the time of this writing), introduces a new
way to specify colors using HSL colors.
HSL stands for Hue, Saturation, and Lightness. Specifically, this is what each means:
1. Hue - the technical term that describes what we understand as "color." In HSL, hue is
represented on a color wheel. It can take on values between 0 and 360.
2. Saturation - the amount of gray in a given color. In HSL, saturation is specified using a
percentage between 0% and 100%. The percentage 0% represents a shade of gray,
whereas 100% represents full saturation.
3. Lightness - the amount of white in a given color. Similar to saturation, lightness is
specified using a percentage between 0% and 100%. The percentage 0% represents
black, whereas 100% represents white. 50% is normal.
You can use HSL colors in your CSS like this:
h1 { color: hsl(182, 20%, 50%); }
Notice that using HSL is very similar to using RGB.

Note: Because HSL is a part of CSS3, older browsers may not support it. In a later
exercise, you'll learn how to work around support issues for colors.
 You learned that RGB and hex color codes are two different methods of
representing the same thing: color. However, there is one feature that RGB colors
support that hex color codes do not: opacity.

Opacity is a measure of how transparent a color is. To modify opacity in RGB colors, CSS
offers the rgba() value. Note the slight difference in rgb()and rgba().

The extra a character in the rgba() value is known as the alpha value. It represents the
opacity of a color. The alpha value can be a number between 0 or 1, inclusive.
h1 { color: rgba(123, 88, 9, 0.5); }
In the example above, the alpha value has been set to 0.5. This indicates that the color
of the heading will be set to 50% of its normal opacity.

Note: The alpha value can also be used for HSL colors, using hsla():
h1 { color: hsla(239, 45%, 22%, 0.4); }

RGB colors, hex color codes, and HSL colors offer web developers an
extraordinary amount of color customization options. As these properties become more
advanced, however, it's important to keep in mind that not all users browse the Internet
with the same browser, let alone the same version of a given browser.

How does this affect web development? Newer revisions of HTML and CSS affect older
browsers. Older browsers, over time, will become dated (possibly obsolete) and not be
able to support newer CSS features. For example, many older browsers do not support
RGBa, HSL, or HSLa.

Because of this, we must include redundant color options in our CSS code that can cater
to a wide audience of different browsers.

Specifically, we can add multiple CSS color declarations, just in case a user's browser
can't support a certain declaration.
h1 { color: rgb(22, 34, 88); color: rgba(22, 34, 88, 0.4); }
In CSS, the latter of multiple declarations takes priority. In the example above, if the
user's browser supports rgba(), then that color will be applied to the heading. If it does
not, then CSS will use the first rgb() color declaration, as a backup.

Using redundant declarations allow you to support as many users as possible across
multiple versions of different Internet browsers.
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://s3.amazonaws.com/codecademy-
content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg");
height: 400px;
background-position: center center;
}

h1 {
color: rgb(3, 150, 100);
color: rgba(3, 101, 100, 0.75);
font-family: 'Covered By Your Grace', sans-serif;
font-size: 100px;
line-height: 76px;
margin: 0;
position: relative;
text-align: center;
top: 20%;
}

/** List style **/

h2 {
background-color: #AA8EB5;
color: #E4BB97;
 font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 500;
text-align: left;
text-transform: uppercase;
}

ul {
margin: 0 auto;
padding: 0;
width: 50%;
}

li {
border-bottom: 1px solid #E4BB97;
list-style: none;
margin: 100px 0px;
padding-bottom: 60px;
}

p{
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;
}

Html
<!DOCTYPE html>
<html>
<head>
<title>The Best Coffee - By Region</title>
<link
href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600
,800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
<h1>The Best Coffee Regions</h1>
</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>
 The practice of typography has been around for centuries! Over time,
typographers have refined their craft and have developed many different typefaces,
which has allowed them, in some cases, to classify them as one of the following two
types: serif fonts and sans-serif fonts.
1. Serif - the letters in these fonts have extra details on the ends of each letter. Examples
include fonts like Times New Roman or Georgia, among others.
2. Sans-Serif - the letters in these fonts do not have extra details on the ends of each
letter. Instead, letters have straight, flat edges. Some examples
include Arial or Helvetica.
The majority of fonts that we'll study in this lesson will be either serif or sans-serif fonts.

Earlier, you learned that users must have the fonts specified in the stylesheet
installed on their computer in order for their browser to display that font. What happens
when a font is not installed on a user's computer?
Most computers have a small set of typefaces pre-installed. This small set includes serif
fonts and sans-serif fonts, like Times New Roman and Arial, respectively.

When the stylesheet specifies a font not installed on a user's computer, the pre-installed
fonts can be used as fallback fonts for users.
To use fallback fonts, the following syntax is required:
h1 { font-family: Garamond, Times, serif; }
The CSS rule above says: "Use the Garamond font for all <h1> elements on the web page.
If that font is not available, use the Times font. If both of those fonts are not available,
use any serif font pre-installed on the user's computer." The fonts specified
after Garamond are the fallback fonts.

Fallback fonts help ensure a consistent experience for the diverse audience of users that
visit a site.

New fonts are constantly being developed. Because there are so many new fonts
available, it would be unrealistic to expect users to have all of them installed on their
computers.

Fortunately, you don't have to predict which fonts are installed on a user's computer.
Many (but not all) of the new fonts that emerge on a daily basis are being centralized in
directories made available for public use.

For example, Google offers Google Fonts, a directory of thousands of open-source fonts
that are free to use by anyone.
To use these fonts, you can link to a specific Google Font in your HTML code and use it
immediately in your stylesheet. Because the HTML file links directly to the Google Font,
a user's browser can display the typeface you specify. This avoids having to determine
whether or not that font is installed on a user's computer.

To use a Google Font, you can use a <link>element, just like you did for a CSS
stylesheet:
<head> <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet" >
</head>
In the example above, the href attribute is set to the following URL, which was retrieved
from Google Fonts:
https://fonts.googleapis.com/css?family=Raleway
The URL in the example above specifies the Raleway typeface from Google Fonts.

You can use the new font just as you would use any other font:
h1 { font-family: Raleway, Georgia, serif; }
You now have access to thousands of new, modern, free-to-use fonts!

Html:
<!DOCTYPE html>
<html>
<head>
<title>The Rise of Soccer in The US</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="content">
<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-
4/htmlcss1-img_writer-avatar.jpg" class="writer-img">
<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>

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

</body>
</html>

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-family: Georgia, Garamond, serif;

font-size: 32px;

padding-top: 100px;

text-align: left;

text-transform: uppercase;

width: 60%;

h2 {

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

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

font-family: Georgia, Garamond, serif;

font-style: italic;

font-weight: 100;

font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

word-spacing: 0.05em;

letter-spacing: 0.02em;

}
p{

font-family: Helvetica, arial, sans-serif;

font-size: 20px;

color: AliceBlue;

line-height: 1.7em;

text-align: left;

width: 100%;

font-weight: 100;

.byline {

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

float: left;

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

font-weight: 100;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

.caption {

background-color: rgba(0, 0, 0, 0.6);

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

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://s3.amazonaws.com/codecademy-content/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;

}
 Text on a web page must also be easy to read. When text is styled to appear
larger, the vertical spacing between lines of text can decrease, creating text that is
difficult to read, particularly in paragraphs.

To avoid this problem, you can modify the spacing between lines of text with the line-
heightproperty.
p { line-height: 1.5em; }
When the line height of an element is modified, you are manipulating
the leading (pronounced "ledding") of the font. When the line height is increased, the
spacing between lines of text increases, which can make text easier to read.
The line height can be modified using pixels or ems, but the unit of ems is preferred,
since ems offer a spacing relative to the size of the text on the page.

You can also increase the spacing between words in a body of text, technically
known as word spacing.
To do so, you can use the word-spacing property:
h1 { word-spacing: 0.3em; }
The default amount of space between words is usually 0.25em. In the example above,
the word spacing is set to 0.3em, which represents an increase of only .05em in word
spacing.

It's not common to increase the spacing between words, but it may help enhance the
readability of bolded or enlarged text. Note, again, that the preferred unit is ems.

You've learned how to increase the spacing between lines of text and words, but
it's possible to get even more detailed: increasing the spacing between individual letters.

The technical term for adjusting the spacing between letters is called "kerning". Kerning
can be adjusted with the letter-spacing property in CSS.
h1 { letter-spacing: 0.3em; }
Like word spacing, it's not common to increase the kerning in text, but sometimes it
enhances the readability of uppercase text.

You've probably noticed bolded text across many different web sites. It's
common to bold important headings or keywords.
In CSS, the font-weight property turns bold on or off.
p { font-weight: bold; }
In the example above, all paragraphs on the web page would appear bolded.

The font-weight property has a second value: normal. Why does it exist?
If we wanted all text on a web page to appear bolded, we could select all text elements
and change their font weight to bold. If a certain section of text was required to appear
normal, however, we could set the font weight of that particular element to normal,
essentially "shutting off" bold for that element.
In later units, you'll learn how to be more selective about what parts of your site you'd
like to style.

You can also italicize words with the font-styleproperty.

h3 { font-style: italic; }
The italic value causes text to appear in italics. The font-style property also has
a normalvalue, for the same reasons discussed in the previous exercise.

Text can also be styled to appear in either all uppercase or lowercase with
the text-transformproperty.
h1 { text-transform: uppercase; }
The code in the example above formats all <h1>elements to appear in uppercase,
regardless of the case used for the heading within the HTML code. Alternatively,
the lowercase value could be used to format text in all lowercase.

Since text can be directly typed in all uppercase or lowercase within an HTML file, what
is the point of a CSS rule that allows you to format letter case?
Depending on the type of content a web page displays, it may make sense to always
style a specific element in all uppercase or lowercase letters. For example, a website that
reports breaking news may decide to format all <h1> heading elements such that they
always appear in all uppercase, as in the example above. It would also avoid uppercase
text in the HTML file, which could make code difficult to read.

No matter how much styling is applied to text (typeface, size, weight, etc.), text
always appears on the left side of the browser.

To move, or align, text, we can use the text-alignproperty.

h1 { text-align: right; }
The text-align property can be set to one of the following three values:
1. left - aligns text to the left hand side of the browser.
2. center - centers text.
3. right - aligns text to the right hand side of the browser.

Later in the course, you'll learn exactly how the browser positions HTML elements by
default, which will help you understand how the browser "aligns" text, since "align" is a
relative term. For now, it's enough to know that text can be moved to the left, center, or
right side of the web page.