Essential Question: How can I add CSS Styling Sheets to my web site?
Mastery Objectives:
SWBAT create an external style sheet using CSS.
SWBAT format html elements in CSS.
SWBAT create specific CSS styles.
SWBAT understand how CSS prioritizes styles based on combinations.
Do Now: Organize these shapes. CSS on Scratch
Do Now 2: Take this quiz as many times as you want until you get the grade you want: https://www.quia.com/quiz/8554460.html
Directions:
Let’s link the stylesheet style.css to the HTML file index.html.
Add a <link> element within the <head> section.
Next, add the href attribute to the <link> element and set it equal to style.css.
Add the rel attribute and set it to the correct value. Keep an eye on the first paragraph’s font—it should appear different from the destinations’ descriptions when your stylesheet is linked correctly. <link href='./style.css' rel='stylesheet'>
Add a ruleset using the type selector to target all <h1> elements. Inside the curly braces of the h1 selector, add the declaration below:
color: maroon;
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.
There is an <h1> element with the class title: <h1 class='title'>Historic Events</h1>
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 can add multiple classes to an HTML element’s class attribute by separating them with a space. This enables us to mix and match CSS classes to create many unique styles without writing a custom class for every style combination needed. For the element: <h1 class='title'>Historic Events</h1> Add a second class named uppercase to this element. CSS Selectors
Add a ruleset using the .uppercase class selector. Then, add the declaration below inside of the curly braces.
text-transform: uppercase;
Oftentimes it’s important to select a single element with CSS to give it its own unique style. If an HTML element needs to be styled uniquely, we can give it an ID using the id attribute. In contrast to class which accepts multiple values, and can be used broadly throughout an HTML document, an element’s id can only have a single value, and only be used once per page. Inside the h1 opening tag <h1 class='title'>Historic Events</h1> and after the class attribute, add an id with the value article-title. Add a ruleset using the ID selector to target the article-title ID. Inside of its curly braces, write the declaration:
font-family: cursive;
The attribute selector can be used to target HTML elements that already contain attributes. Elements of the same type can be targeted differently by their attribute or attribute value. This alleviates the need to add new code, like the class or id attributes. To use the attribute selector to select the <a> element with an href attribute value containing ‘Massacre’, add the following code to style.css:
a[href*='Massacre'] {
color: lightgreen;
}
Use the attribute selector to select the <a> element that has an href attribute value containing 'Chapel'. Add a declaration of color: lightblue; to make the link appear light blue.
Use the attribute selector change the <a> element that has an href attribute value containing 'Tea' to lightpink.
Add a ruleset to the end of style.css that selects the <a> elements on the page. Leave the declaration block empty for now. Next, add a :hover pseudo-class to the a selector you just created. Lastly, set the text color to dark orange by adding the following CSS declaration inside the declaration block:
color: darkorange;
Now when you hover the mouse over a hyperlink it will be dark orange.
To demonstrate using classes on multiple elements, let’s give a few elements the same style.
In index.html, there are four <h2> elements. Give each of them a class of heading-background.
Now, let’s give a unique style to a single element using ID.
There’s an <h6> element that displays the time the article on the page was published. <h6>Published: 2 Days Ago</h6> Add an id attribute to the <h6>, and give it a value of publish-time.
Create a ruleset targeting the new heading-background class, and give it a declaration of:
background-color: aqua;
Notice how all of the <h2> elements now have the same style. This heading-background class can continue to be applied to any element you wish to bestow that amazing style onto.
Create another ruleset using the publish-time ID selector. Add the declaration:
color: gray;
Since ID’s are single-use, this element now has a unique ID that can’t be used again in this document
To compare type, class, and ID specificity, let’s add a class and ID to an existing element.
There is an <h5> element with the author’s name, <h5>By: Ms. Moylan</h5>. Give the element a class of author-class and an ID of author-id. The element now has 3 ways of selecting it, by type, class, and 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”?
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.
Let’s use chaining to select only the <h2> elements with destinations, and add a style to them.
In style.css, write a CSS selector for <h2> elements with a class of .destination. Inside the selector’s curly braces, add this declaration:
font-family: Tahoma;
This will change the font of the h2 elements that also have the class destination.
h2.destination{
font-family: Tahoma;
}
The last <h2> element (“More Events”) will remain unchanged. h1.special Chained | CSS-Tricks {}
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”.
Add a ruleset that uses the descendant combinator to target only the <h5> descendants of elements with the class .description.
Each destination has a paragraph with a description class below it. Nested within each description paragraph, is an <h5> element with a title to a list. They’re a little hard to read since they turned yellow. Add a ruleset that uses the descendant combinator to target only the <h5> descendants of elements with the class .description. Inside the curly braces of the selector, add a declaration of:
color: blueviolet;
.description h5{
color: blueviolet;
}
To show how specificity increases with additional selectors, let’s create another ruleset with the descendant combinator and then compare it to a ruleset without. Write a ruleset using the descendant combinator to select the <h4> elements nested in the <li> elements. Inside of the curly braces, write:
color: gold;
See the <h4> elements under “More Events” appear gold.
li h4{
color: gold;
}
Create a ruleset targeting elements with just the h4 type, and add a declaration of:
color: dodgerblue;
Will the <h4> elements turn blue? The elements stay gold because there is a more specific selector for <h4> elements you wrote in the last step. Because of the more specific CSS selector (li h4), the more general selector of h4 will not take hold.
h4{
color: dodgerblue;
}
In style.css, write selectors for the <h5> and <li> elements so they will both be styled with the same CSS rule. Apply this style declaration:
font-family: monospace;
Notice that both the <h5> and <li> element’s fonts will change, without writing the same CSS declaration twice. Multiple selectors are written with a comma between each selector!
h5,li{
font-family: monospace;
}
<!DOCTYPE html>
<html>
<head>
<title>Historic Events</title>
</head>
<body>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/ISH_WC_Boston4.jpg/1280px-ISH_WC_Boston4.jpg ' width=300 height=300 />
<h1 class='title'>Historic Events</h1>
<h5>By: Ms. Moylan</h5>
<h6>Published: 2 Days Ago</h6>
<p>Several amazing historic events occurred in Boston. Let's explore them together.</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>Crispus Attucks</li>
<li>Samuel Gray</li>
<li>Samuel Maverick</li>
<li>James Caldwell</li>
<li>Patrick Carr</li>
</ul>
</div>
<h2 class='destination'>2. 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 class='destination'>3.Boston Tea Party</h2>
<div class='description'>The Boston Tea Party was an American political and mercantile protest on December 16, 1773, by the Sons of Liberty in Boston in colonial Massachusetts.[2] The target was the Tea Act of May 10, 1773, which allowed the East India Company to sell tea from China in American colonies without paying taxes apart from those imposed by the Townshend Acts. The Sons of Liberty strongly opposed the taxes in the Townshend Act as a violation of their rights. In response, the Sons of Liberty, some disguised as Native Americans, destroyed a shipment of tea sent by the East India Company.
<a href='https://en.wikipedia.org/wiki/Boston_Tea_Party ' target='_blank'>Learn More</a>.
<h5>Participants</h5>
<ul>
<li>Phineas Stearns</li>
<li>George Robert Twelves Hewes</li>
</ul>
</div>
<h2> More Events </h2>
<ul>
<li><h4 class='destination'>Anne Hutchinson Excommunicated</h4></li>
<li><h4 class='destination'>Mather School: First Public School in America</h4></li>
<li><h4 class='destination'>Battle of Bunker Hill</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>