Description
What You Will Learn
-
How to use CSS to style HTML documents
-
How to use CSS selectors
-
The CSS box model
Approximate Time
The exercises in this lab should take approximately 45 minutes to complete.
QUICK TOUR OF CSS
PREPARING DIRECTORIES
-
If you haven’t done so already, create a folder in your personal drive for all the labs for this book.
-
From the main labs folder (either downloaded from the textbook’s web site using the code provided with the textbook or in a common location provided by your instructor), copy the folder titled lab04 to your course folder created in step one.
CSS is a W3C standard for describing the appearance of HTML elements. Another common way to describe CSS’s function is to say that CSS is used to define the presentation of HTML documents. With CSS, we can assign font properties, colors, sizes, borders, background images, and even the position of elements. CSS is a language in that it has its own syntax rules. CSS can be added directly to any HTML element (via the style attribute), within the <head> element, or, most commonly, in a separate text file that contains only CSS.
E x e r c i s e 4 . 1 — A D D I N G S T Y L E S
-
Open, examine, and test lab04-exercise01.html in browser.
-
Add the following internal style definition and test.
<header>
<h1 style=”color: red;”>Share Your Travels</h1>
Remember: these labs use the convention of red bolded text to indicate content to change/enter.
-
Modify the following and test.
<header>
<h1 style=”color: red; background-color:gray;“>Share Your Travels</h1>
-
Fundamentals of Web Development
3
E x e r c i s e 4 . 2 — E M B E D D E D S T Y L E S H E E T S
-
Add the following embedded style to the <head> element from the previous exercise.
<head>
<meta charset=”utf-8″>
<title>Share Your Travels — New York – Central Park</title>
<style> h1 {
color: blue;
background-color: yellow;
}
</style>
</head>
-
Test. Why didn’t it seem to work?
It didn’t work because of cascade specificity rules. The internal style created in last exercise overrides the embedded style we just created. To fix it, we will have to remove the internal styles.
-
Remove the internal styles created in last exercise. Test.
The <h1> element should now have blue text against a yellow background.
-
Add the following style rule and test. h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
This is a grouped selector which selects all three headings.
-
Add the following style rule after the one created in previous step and test. h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
h1 {
font-family: Georgia, Cambria, “Times New Roman”, serif;
}
Copyright © 2017 Randy Connolly and Ricardo Hoar
Notice that the new style rule for h1 overrides the earlier one due to the cascade principle of location (i.e., when rules have the same specificity, then the latest are given more weight).
-
Change the previous style rule to the following. Before you test it, ask yourself whether this will affect the font-family of the headings.
h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif; }
body {
font-family: Georgia, Cambria, “Times New Roman”, serif; }
Figure 4.1 – Exercise 4.2 Complete
-
Fundamentals of Web Development
5
E x e r c i s e 4 . 3 — E X T E R N A L S T Y L E S H E E T S
-
Create a new text document with the following content: header, footer {
color: white;
background-color: #213643;
}
nav {
background-color: #728B96;
}
h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
body {
font-family: Georgia, Cambria, “Times New Roman”, serif;
}
Notice that this document contains no HTML. Also notice that the first style rule uses a grouped selector, meaning that both the header and footer elements will receive the same style.
-
Save your file as lab04-exercise03.css.
-
Open lab04-exercise03.html (which has the same content as the last exercise).
-
Add the following to the <head> element.
<head>
<meta charset=”utf-8″>
<title>Share Your Travels — New York – Central Park</title>
<link rel=”stylesheet” href=”lab04-exercise03.css” /> </head>
-
Save and test lab04-exercise03.html in browser.
-
View the lab04-exercise03.css file (yes the css file) in the browser.
Copyright © 2017 Randy Connolly and Ricardo Hoar
At some point everyone will mistakenly load a css file into the browser rather than the HTML file. What will happen will vary depending upon the browser and one’s computer setup. For the author of this lab, if I open up the CSS file in Chrome or FireFox, the CSS text file is displayed; in Internet Explorer, it starts my default CSS editor, which just happens to be Adobe Dreamweaver.
CSS SELECTORS
When defining CSS rules you will need to first need to use a selector to tell the browser which elements will be affected by the styles. CSS selectors allow you to select individual or multiple HTML elements, elements that belong together in some way, or elements that are positioned in specific ways in the document hierarchy. The previous exercises used HTML selectors. The next exercises make use of other selectors.
E x e r c i s e 4 . 4 — E L E M E N T , C L A S S , A N D I D S E L E C T O R S
-
Open lab04-exercise04.html.
-
Add the following to the markup.
<section>
<h3 id=”reviews”>Reviews</h3> <div>
-
Open lab04-exercise04.css, add the following style, and test.
#reviews {
border-bottom: solid 3pt #213643;
color: #ed8030;
}
-
Change the previous selector to the following and test. h3#reviews
In this example the selector in step 3 and 4 are functionally equivalent. However, the one in step 4 is more specific, so in some situations will be preferable.
-
Fundamentals of Web Development
7
-
Switch to lab04-exercise04.html and add the following.
<section>
<h3 id=”reviews”>Reviews</h3> <div>
<p class=”first”>By Ricardo on <time>September 15, 2012</time></p> <p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class=”first”>By Susan on <time>October 1, 2012</time></p> <p>I love Central Park.</p>
</div>
<hr/>
</section>
-
Switch to lab04-exercise04.css and add the following style.
.first {
color: #728B96;
font-style: italic;
}
-
Test.
Remember that whenever the lab says “test” it means view the relevant HTML file in a browser.
Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute. This can be a very powerful technique, but because of uneven support by some of the browsers, not all web authors have used them.
Copyright © 2017 Randy Connolly and Ricardo Hoar
E x e r c i s e 4 . 5 — A T T R I B U T E S E L E C T O R S
-
Open lab04-exercise05.html and view in browser.
-
Open lab04-exercise05.css, add the following style, and test.
[title] { cursor: help;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
}
This will select every element that contains a title attribute. Examine the HTML to see which elements contain a title attribute.
-
Modify the attribute to the following and test.
[title=”Calgary”] {
This selects only the one element whose title attribute is exactly Calgary.
-
Modify the attribute (add the asterisk) to the following and test.
[title*=”Calgary”] {
This selects all elements that contain the text Calgary within in.
-
Modify the attribute (add the caret) to the following and test.
[title^=”Calgary”] {
This selects all elements that begin with the text Calgary.
Pseudo-Class Selectors
The next exercise illustrates the use of pseudo-class selectors, which do not apply to an HTML element, but targets either a particular state or, in CSS3, a variety of family relationships. The most common use of this type of selectors is for targeting link states. By default, the browser displays link text blue and visited text links purple. Exercise 4.6 illustrates the use of pseudo-class selectors to style not only the visited and unvisited link colors, but also the hover color, which is the color of the link when the mouse is over the link. Do be aware that this state does not occur on touch screen devices.
-
Fundamentals of Web Development
9
E x e r c i s e 4 . 6 — P S E U D O S E L E C T O R S A N D L I S T S
-
Open lab04-exercise06.html.
-
Switch to lab04-exercise06.css and add the following style. a:link {
font-weight: bold;
color: #47B3D7;
}
a:visited { color: #BB78FF;
}
-
Test in browser.
-
Add the following style to lab04-exercise06.css and test. a:hover {
background-color: #FFFF99;
}
To test this style, you must hover your mouse over a link.
-
Add the following style to lab04-exercise06.css and test. nav ul li {
list-style: none;
}
This removes the bullet from the navigation <li> elements.
-
Add the following and test. nav ul li {
list-style: none;
display: inline;
}
By changing the <li> elements from their default display: block value, the list items are no longer block elements (thus existing on their own lines) but are now inline elements.
Copyright © 2017 Randy Connolly and Ricardo Hoar
-
Add the following and test. nav ul li {
list-style: none;
display: inline;
margin: 1em;
}
This adds space to the left and right of each list item. Why doesn’t it also add space to the top and bottom as well? The answer is that top and bottom margins are ignored for inline elements.
-
Add the following and test. nav {
padding: 0.25em;
}
This adds padding space within the <nav> element.
-
Add the following and test. nav a {
padding: 0.25em;
}
This makes the size of the <a> element the same as the container, which makes the hover size the same as the container. The result should look similar to that shown in Figure 4.2. You will get more practice with margins and padding in the next exercise.
|
Fundamentals of Web Development |
11 |
Figure 4.2 – Exercise 4.6 Complete
Contextual Selectors
A contextual selector allows you to select elements based on their ancestors, descendants, or siblings. That is, it selects elements based on their context or their relation to other elements in the document tree. While some of these contextual selectors are used relatively infrequently, almost all web authors find themselves using descendant selectors.
Copyright © 2017 Randy Connolly and Ricardo Hoar
E x e r c i s e 4 . 7 — C O N T E X T U A L S E L E C T O R S
-
Open lab04-exercise07.html (which has the same content as the last exercise).
-
Switch to lab04-exercise07.css and add the following style and test. p {
color: #983C2A;
}
This changes the text color of every occurrence of the <p> element.
-
Modify the style as follows. Before you test, see if you can figure out which text will be affected by the change to this descendent selector.
section p {
color: #983C2A;
}
This selects all <p> elements that exist somewhere within a <section> element. That selects all of them except for the ones within the <footer> element.
-
Modify the style as follows and test. div p {
color: #983C2A;
}
This selects all <p> elements that exist somewhere within a <div> element.
-
Modify the style as follows and test. As with the previous steps, see if you can figure out which text will be affected by the change before you test it.
section>p {
color: #983C2A;
}
This doesn’t select the review <p> elements because they are contained within <div> elements, and thus are not direct children of a <section> element.
-
Modify the style as follows and test. h3+p {
color: #983C2A;
}
-
Fundamentals of Web Development
13
This selects any <p> elements that immediately follow an <h3> element.
-
Modify the style as follows and test. h3~p {
color: #983C2A;
}
This selects any <p> elements that share the same parent as an <h3> element.
CSS CASCADE AND BOX MODEL
E x e r c i s e 4 . 8 — C S S C A S C A D E
-
Open and examine lab04-exercise08.html.
-
Add the following style to lab04-exercise08.css and test. div {
font-weight: normal;
color: magenta;
}
p {
color: green;
}
-
Add the following style to lab04-exercise08.css and test.
.last { color: blue;
}
#verylast { color: orange; font-size: 16pt;
}
Notice that class selectors take precedence over element selectors and that id selectors take precedence over class selectors.
Copyright © 2017 Randy Connolly and Ricardo Hoar
In CSS, all HTML elements exist within an element box. It is absolutely essential that you familiarize yourself with the terminology and relationship of the CSS properties within the element box, which are shown in Figure 4.3.
Figure 4.3 – CSS Box Model
-
Fundamentals of Web Development
15
E x e r c i s e 4 . 9 — B O R D E R S , M A R G I N S , A N D P A D D I N G
-
Open lab04-exercise09.html and view in browser.
-
Switch to lab04-exercise09.css and add the following style to the very top of the file. Test in browser.
header, footer, nav, main, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img
{
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
This is an example of a CSS reset, that is, a way to remove any browser defaults. This way, any styling that is present is due to explicit styling rather than to browser defaults, which can potentially vary from browser to browser.
-
Add the following and test. figure {
margin: 2em;
}
-
Modify the style as follows and test. figure {
margin: 2em;
background-color: #EEEEEE;
}
-
Modify the style as follows and test. figure {
margin: 2em;
background-color: #EEEEEE;
padding: 1.5em;
}
Copyright © 2017 Randy Connolly and Ricardo Hoar
-
Modify the style as follows and test. figure {
margin: 2em;
background-color: #EEEEEE;
padding: 1.5em;
border: solid 1px #999999;
}
The result should look similar to that shown in Figure 4.4.
-
Add the following and test. h3+p+p {
margin: 2em;
}
This adds margin space to the paragraph above the figure. Notice that the space between the paragraph and the figure does not change. Can you figure out why?
Figure 4.4 – Exercise 4.9 at step 6.
-
Fundamentals of Web Development
17
E x e r c i s e 4 . 1 0 — B A C K G R O U N D S T Y L E
-
Open lab04-exercise10.html.
Notice that it has added the share images within the <figure> element.
-
Add the following style to lab04-exercise10.css and test. figure div {
margin-top: 0.25em;
font-size: 70%;
padding: 0.5em;
width: 485px;
background-color: #9FAAB0;
border: solid 1px #999999;
border-radius: 4px;
}
This adds a rounded rectangle to the <div> within the <figure>. You may want to try saving and testing after entering each line.
-
Add the following style and test. figure div p {
background: url(images/share.png) no-repeat;
padding-left: 18px;
}
Notice that the share icon is not aligned with the Share text. The next step will move it.
-
Modify the style as follows and test. figure div p {
background: url(images/share.png) no-repeat;
padding-left: 18px;
background-position: 0 4px;
}
-
Examine glyphicons-halflings.png in either a graphics editor or some type of graphics viewer. You can also simply drag and drop the image into a browser window.
It is common to package together a large number of images into a single image in order to improve performance (i.e., only one file to request and download rather than dozens
Copyright © 2017 Randy Connolly and Ricardo Hoar
of files). This typically involves using background-position in conjunction with widths and heights, as shown in the next step.
-
Modify the HTML as follows.
<figcaption><em>Conservatory Pond in Central Park</em></figcaption> <div>
<p><span class=”share”></span>Share:
…
-
Remove or comment out the style rule created in steps 3 and 4.
-
Add the following style and test. span.share {
display: inline-block;
background: url(images/glyphicons-halflings.png) no-repeat;
width: 14px;
height: 14px;
background-position: -120px -72px;
padding-right: 5px;
}
Notice the use of the inline-block value for the display property. This value keeps elements inline, but preserves their block capabilities such as setting width and height, margins, and paddings.
Notice also the negative background-position values. To make sense of these values, see Figure 4.5.
Figure 4.5 – Using background-position
-
Fundamentals of Web Development
19
E x e r c i s e 4 . 1 1 — C S S F O N T S I Z E S
-
Open lab04-exercise11.html.
-
Add the following style to lab04-exercise11.css. body {
font-size: 100%; /* about 16px */
}
This sets the base line size of textual content in the document.
-
Add the following styles and test. h1 {
font-size: 24px; /* for older browsers */
font-size: 1.5rem;
}
h2 {
font-size: 18px;
font-size: 1.125rem;
}
h3 {
font-size: 16px;
font-size: 1rem;
}
p {
font-size: 16px;
font-size: 1rem;
}
-
Add the following style and test.
.first, figcaption, h3+p { font-size: 14px; font-size: .875rem;
}
Copyright © 2017 Randy Connolly and Ricardo Hoar
E x e r c i s e 4 . 1 2 — C S S F O N T S
-
Open and view lab04-exercise12.html in the browser.
-
Use your browser to visit http://www.google.com/fonts.
-
Search for the Lobster font.
-
Click on the Quick Use button and copy the <link> element for the font that is provided onto the clipboard:
<link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>
-
Paste the <link> element into lab04-exercise12.html.
-
Modify the following rule in lab04-exercise12.css. h1, h2, h3 {
font-family: Lobster, Georgia, Cambria, “Times New Roman”, serif;
}
-
Test in browser.
-
Switch back to http://www.google.com/fonts and search for the font Lato. Add the appropriate <link> element for this font and modify the following rule:
body {
font-family: Lato, Helvetica, Arial, sans-serif; }
-
Test in browser.
E x e r c i s e 4 . 1 3 — CS S P A R A G R A P H S
-
Open and view lab04-exercise13.html in the browser.
-
Add the following rule in lab04-exercise13.css and then test in browser. p {
margin-bottom: 0.5em;
}
-
Fundamentals of Web Development
21
-
Add the following rule and then test in browser. p#first {
text-align: right;
}
You may need to reduce the size of your browser window in order to see the right alignment of the text.
-
The following rule and test. p#second {
text-indent: 2em;
line-height: 1.5em;
}
-
Modify the following rule and test.
h1 {
font-size: 250%;
text-transform: uppercase;
letter-spacing: 10px;
}
-
Add the following rule and test.
h1 {
font-size: 250%;
text-transform: uppercase;
letter-spacing: 10px;
text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
Copyright © 2017 Randy Connolly and Ricardo Hoar
COMPLETE YOUR LAB REPORT
Open lab 04 report.doc and answer the questions based on what you learned in this lab exercise. Save your lab 1 report as lab04_yourname and submit your report via dropbox in elearning under lab 04.
