body { color: navy; }
The color for all h1 headers will be navy because they inherit the color
from the parent tag body.
h1 { color: navy; }
body { color: maroon; }
The color of the h1 tag will be navy because h1 is more specific than body.
h1 { color: navy; }
h1 { color: maroon; }
In this case, the maroon color is applied last to the h1 tag will be maroon.#ff00ff #800080 #000080 #800000 #008080 #c0c0c0 #e0e0ff #e0ffffHint: Here is a color wheel to help you.
#ff00ff magenta or fuschia #800080 purple #000080 navy #800000 maroon #008080 teal #c0c0c0 silver #e0e0ff pastel blue #e0ffff pastel aqua or cyan
.twf { font-family: "Courier New";
font-weight: bold; }
Ans: This is a CSS class. The leading dot on the class name .twf indicates
that this class can be used on any selector. In the HTML code, to apply this
class to a selector, for example <p> (paragraph), add a
class attribute to the tag:<p class="twf">This is a paragraph.</p>
public_html
it238
index.html <-- index of proj1a and proj1b
styles.css
proj1a
index.html <-- stub files
script.js
styles.css <-- if needed
proj1b
index.html <-- stub files
script.js
styles.css <-- if needed
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<style>
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
</style>
<script>
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
</script>
</head>
<body>
<h1>Birthday Riddle</h1>
<p id="p1">Riddle: The day before yesterday I was 21,
and next year I will be 24. When is my birthday?</p>
<p id="p2"></p>
<input type="button" value="Show Answer"
onclick="showAnswer( )">
<body>
</html>
Answer:
---- index.html ----------------------
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Birthday Riddle</h1>
<p id="p1">Riddle: The day before yesterday I was 21,
and next year I will be 24. When is my birthday?</p>
<p id="p2"></p>
<input type="button" id="btn1" value="Show Answer">
<body>
</html>
---- styles.css ----------------------
/* BirthdayRiddle Example */
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
---- script.js -----------------------
// BirthdayRiddle Example
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
function init( ) {
var button = document.getElementById("btn1");
button.onclick = showAnswer;
// or
// button.addEventListener("click", showAnswer);
}
window.onload = init;
// or
// window.addEventListener("load", init);
--------------------------------------
p { font-weight: bold; font-size: 200%;
font-family: arial, sans-serif; }
The shorthand abbreviation for the preceding line is
p { font: bold 200% arial, sans-serif; }
Test both styles.
font-style: normal (default), italic
font-variant: normal, Small-caps
font-weight: normal (default) bolder lighter
100 (light) 200 300 400 500 600 700 800 900 (bold)
font-size/line-height: available units are pt, px, %, in, cm, mm
font-family: check fonts that are available on computer
The font-size and font-family styles are required. If any of the other properties are omitted,
the default values are used.
p { font: italic small-caps bold 12pt/30px Georgia, serif; }
Answer:
p { font-style: italic; font-variant: small-caps;
font-weight: bold; font-size: 12pt; line-size: 30px;
font-family: Georgia, serif; }
Test the shorthand and non-shorthand versions.
img { padding-top: 10px; padding-right: 15px;
padding-bottom: 20px; padding-left: 25px; }
Answer:
img { padding: 10px 15px 20px 25px; }
img { padding-top: 10px; padding-right: 25px;
padding-bottom: 20px; padding-left: 25px; }
Answer:
img { padding: 10px 25px 20px; }
img { padding-top: 10px; padding-right: 25px;
padding-bottom: 10px; padding-left: 25px; }
Answer:
img { padding: 10px 25px; }
img { padding-top: 25px; padding-right: 25px;
padding-bottom: 25px; padding-left: 25px; }
Answer:
img { padding: 25px; }
img { border-width: 200%; border-style: solid; border-color: red; }
Answer:
img { border: 200% solid red; }