Essential Question: How can I apply CSS formatting to my web page?
Mastery Objectives:
Create a CSS file called style.css in the same folder as your web page.
Create a link in the <head> <link href='./style.css' rel='stylesheet'>
Open style.css. On line 5, add a ruleset using the type selector to target all <h1> elements. Leave the declaration block ({ }) empty for now.
Inside the curly braces of the h1 selector, add the declaration below:
color: maroon;
Note that the content of the web page will update because we’ve already linked style.css to index.html.
To see how the universal selector targets all elements on a page, copy the rule below and paste it on the first line of style.css.
* {
border: 1px solid red;
}
Since the universal selector targets all elements, every element on the page now has a red border. Not a visually pleasing look, but you can see how all of the elements have been modified.
On line 11 of index.html there is an <h1> element with the class title.
Now, open style.css. On line 13, use the class selector to create a ruleset that selects that HTML element using the class title.
Inside the curly braces of the .title selector, add the declaration:
color: teal;
This code will change the color of the h1 with the title class to teal.
We’ll see in a later exercise why using .title overrides the h1 selector.
In index.html, on line 11, there is an <h1> element with a class of title. Add a second class named uppercase to this element.
Next, navigate to style.css, and add a ruleset using the .uppercase class selector. Then, add the declaration below inside of the curly braces.
text-transform: uppercase;
On line 11 of index.html, inside the h1 opening tag and after the class attribute, add an id with the value article-title.
Navigate to style.css. Add a ruleset using the ID selector to target the article-title ID. Inside of its curly braces, write the declaration:
font-family: cursive;
You’ll see the title change to a cursive font bringing some beauty and elegance to the page! Okay, maybe not so much. But the font does change.
To use the attribute selector to select the <a> element with an href attribute value containing ‘florence’, add the following code to style.css:
a[href*='florence'] {
color: lightgreen;
}
Next, in style.css, use the attribute selector to select the <a> element that has an href attribute value containing 'beijing'. Add a declaration of color: lightblue; to make the link appear light blue.
Finally, use the attribute selector change the <a> element that has an href attribute value containing 'seoul' to lightpink.
To compare type, class, and ID specificity, let’s add a class and ID to an existing element. On line 12 of index.html, there is an <h5>with the author's name. Give the element a class of author-class and an ID of author-id.
Add the 3 following rulesets to the bottom of style.css utilizing each of the selectors:
h5 {
color: yellow;
}
.author-class {
color: pink;
}
#author-id {
color: cornflowerblue;
}
Each of these rules selects the same element in a different way. Which style will win the
“specificity war”? Click “Run” to find out!
Because ID is the most specific selector, the element will change to cornflower blue. You may have noticed the other <h5> elements changed to yellow. This is because the most specific (and only) selector they have is their type.
<!DOCTYPE html>
<html>
<head>
<title>Vacation World</title>
</head>
<body>
<img src='https://en.wikipedia.org/wiki/Boston#/media/File:ISH_WC_Boston4.jpg ' />
<h1 class='title'>Historic Events</h1>
<h5>By: Ms. Moylan</h5>
<h6>Published: 3 Days Ago</h6>
<p>Boston is home to many historical events. Let's explore them.</p>
<h2 class='destination'>1. Boston Massacre</h2>
<div class='description'>The Boston Massacre, known in Great Britain as the Incident on King Street, was a confrontation, on March 5, 1770, during the American Revolution in Boston in what was then the colonial-era Province of Massachusetts Bay. <a href='https://en.wikipedia.org/wiki/Boston_Massacre' target='_blank'>Learn More</a>.
<h5>Victims</h5>
<ul>
<li>Samuel Maverick</li>
<li>James Caldwell</li>
<li>Crispus Attucks</li>
<li>Samuel Gray</li>
<li>Samuel Carr</li>
</ul>
</div>
<h2 class='destination'>2. State House</h2>
<div class='description'>The Massachusetts State House, also known as the Massachusetts Statehouse or the New State House, is the state capitol and seat of government for the Commonwealth of Massachusetts, located in the Beacon Hill neighborhood of Boston. The building houses the Massachusetts General Court (state legislature) and the offices of the Governor of Massachusetts. The building, designed by architect Charles Bulfinch, was completed in January 1798 at a cost of $133,333 (more than five times the budget), and has repeatedly been enlarged since. It is one of the oldest state capitols in current use. It is considered a masterpiece of Federal architecture and among Bulfinch's finest works, and was designated a National Historic Landmark for its architectural significance.
<a href='https://en.wikipedia.org/wiki/Massachusetts_State_House ' target='_blank'>Learn More</a>
<h5>Architecs</h5>
<ul>
<li>Charles Bullfinch</li>
<li>Charles Brigham</li>
<li>Sturgis, Bryant, Chapman & Andrews</li>
</ul>
</div>
<h2 class='destination'>3. King's Chapel</h2>
<div class='description'>King's Chapel is an American independent Christian unitarian congregation affiliated with the Unitarian Universalist Association that is "unitarian Christian in theology, Anglican in worship, and congregational in governance." It is housed in what was for a time after the Revolution called the "Stone Chapel", an 18th-century structure at the corner of Tremont Street and School Street in Boston, Massachusetts. The chapel building, completed in 1754, is one of the finest designs of the noted colonial architect Peter Harrison, and was designated a National Historic Landmark in 1960 for its architectural significance. The congregation has worshipped according to a Unitarian version of the Book of Common Prayer since 1785, currently in its ninth edition.
<a href='https://en.wikipedia.org/wiki/King%27s_Chapel ' target='_blank'>Learn More</a>.
<h5>Ministers</h5>
<ul>
<li>Robert Ratcliff, rector 1686–1689</li>
<li>Samuel Myles, rector 1689–1728 (d. 1728)</li>
<li>Roger Price, rector 1729–1746</li>
<li>Henry Caner, rector 1747–1776</li>
<li>James Freeman, rector 1787–1836 (d.1836)</li>
<li>Samuel Cary, minister 1809–1815 (d.1815)</li>
<li>F.W.P. Greenwood, minister 1824–1843 (d. 1843)</li>
<li>Ephraim Peabody, minister 1845–1856 (d. 1856)</li>
<li>Henry Wilder Foote, minister 1861–1889 (d. 1889)</li>
<li>Howard Nicholson Brown, minister 1895–1921</li>
<li>Harold Edwin Balme Speight, minister 1921–1927</li>
<li>John Carroll Perkins, minister in charge 1927–1931, minister 1931–1933 (guardian of Emily Hale)</li>
<li>Palfrey Perkins, minister 1933–1953</li>
<li>Joseph Barth, minister 1953–1965 (d. 1988)</li>
<li>Carl R. Scovel, senior minister 1967–1999</li>
<li>Charles C. Forman, affiliate minister 1980–1998 (d. 1998)</li>
<li>Matthew M. McNaught, interim minister 1999–2001</li>
<li>Earl K. Holt, minister 2001–2009</li>
<li>Dianne E. Arakawa, interim minister 2009–2013</li>
<li>Joy Fallon, minister 2013–present</li>
</ul>
</div>
<h2> More Destinations </h2>
<ul>
<li><h4 class='destination'>Paul Revere's House</h4></li>
<li><h4 class='destination'>Castle Island</h4></li>
<li><h4 class='destination'>George's Island</h4></li>
</ul>
<p>—Have a wonderful time visiting your city.</p>
</body>
</html>