Essential Question: How can I use different fonts in CSS for each section?
Mastery Objectives:
SWBAT edit the CSS style sheet to specify font-family and use web-friendly fonts.
SWBAT edit the CSS style sheet to specify font-size which controls the size of text displayed.
SWBAT edit the CSS style sheet to specify font-weight which defines how thin or thick text is displayed.
SWBAT edit the CSS style sheet to specify text-align property which places text in the left, right, or center of its parent container.
SWBAT edit the CSS style sheet to specify color and background-color. Color defines the color of the text, while background-color defines the color behind the text.
SWBAT edit the CSS style sheet to specify opacity property.
SWBAT edit the CSS style sheet to set the background of an element to an image with the background-image
property.
SWBAT use the T !important flag will override any style, however it should almost never be used, as it is extremely difficult to override.
Directions:
To change the typeface of text on your web page, you can use the font-family property.
h1 {
font-family: Garamond;
}
In the example above, the font family for all main heading elements has been set to Garamond.
When setting typefaces on a web page, keep the following points in mind:
The font specified must be installed on the user’s computer or downloaded with the site.
Web safe fonts are a group of fonts supported across most browsers and operating systems.
Unless you are using web safe fonts, the font you choose may not appear the same between all browsers and operating systems.
When the name of a typeface consists of more than one word, it’s a best practice to enclose the typeface’s name in quotes, like so:
h1 {
font-family: 'Courier New';
}
Steps to Complete the Project:
Copy the code for style.css, index.html, and style-library.css and create the files for them
Inside style.css, set the font family of the main heading (h1) and subheading (h2) to Georgia.
Note that certain font changes may be hard to recognize at first. Feel free to remove and add the declaration a few times until you notice the change!
Next, add a style rule that sets the font family of the paragraph (p) to Helvetica.
You can use the font-size property.
p {
font-size: 18px;
}
In the example above, the font-size of all paragraphs was set to 18px. px means pixels, which is one way to measure font size.
In style.css, set the font-size of paragraph (p) elements to 18 pixels.
In style.css, set the font weight of paragraph (p) elements to bold.
The text-align property can be set to one of the following commonly used values:
left— aligns text to the left side of its parent element, which in this case is the browser.
center — centers text inside of its parent element.
right— aligns text to the right side of its parent element.
justify— spaces out text in order to align with the right and left side of the parent element.
In style.css, set the text-align property of the main heading (h1) so that it appears in the center.
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;
}
Take a look at the caption on the image at the bottom of the page. In style.css, set the background color in the .caption selector to white.
Then, in the same ruleset, set the color of the text to black. That should make the text a bit easier to read!
Let’s give the caption on the image some transparency! In style.css, set .caption to have 0.75 opacity.
In style.css, change the background image of the element with the.image class. The image is stored in the following URL: https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg
Imagine style-library.css is a stylesheet that is full of good styles! But, you don’t like how it is turning the color of <h1> yellow.
In style.css, add an !important rule to the color style of inside the h1 ruleset to change the color back to #FFF (white). CSS !important Property (w3schools.com)
index.html
<!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>
<div class='content'>
<img src='https://content.codecademy.com/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>
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%;
}
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%;
}
p {
color: aliceblue;
line-height: 1.3em;
text-align: left;
width: 100%;
font-family: Helvetica;
}
.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;
}
style-library.css
h1{
color: yellow;
}
/* Imagine this is a CSS library that contains a lot of other good styles. */