<Run success="The styles from the linked CSS files are still applied when the web page is displayed." />
</Exercise>
<Exercise
task="Congratulations, you've learned how to include CSS in this lesson! Now play with the code a bit on your own. Change the text which is shown and run it as often as you like. Then continue with the next lesson." >
</Exercise>
</Lesson>
<Lesson
title="Class Selectors"
example="class="blue-text""
description="In this lesson you'll learn to use CSS class selectors to style HTML elements.">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<h1>My Website</h1>
<p>A paragraph.<p>
<p>Another paragraph.<p>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
]]>
</SourceCode>
<Run success="The web page has two paragraphs. Let's style them." />
</Exercise>
<Exercise
task="In the CSS file we define a rule set for !_p_! tags which sets the !_color_! style to !_Blue_!."
code_file="styles.css"
level="1" >
<SourceCode code_file="styles.css">
<![CDATA[
$space$
p$code_hint$ { color: Blue; }
]]>
</SourceCode>
<CodeHint />
<Run success="Both paragraphs are now blue. Let's learn to define a different color for each paragraph next." />
</Exercise>
<Exercise
task="Instead of using a tag selector we now define a class selector !_blue-text_!. A class selector starts with a dot."
code_file="styles.css"
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<h1>My Website</h1>
<p class="blue-text"$code_hint$>A paragraph.<p>
<p$code_hint_1$>Another paragraph.<p>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
$space$
.blue-text$code_hint$ { color: Blue; }
$code_hint_1$
]]>
</SourceCode>
<CodeHint />
</Exercise>
<Exercise
task="We set the class !_blue-text_! using a !_class_! attribute for the first !_p_! tag."
level="1" >
<CodeHint />
<Run success="Now only the first paragraph is blue because the CSS rule set only applies for HTML elements with the class !_blue-text_!. Let's make the second paragraph green." />
</Exercise>
<Exercise
task="Add a CSS rule set for the class !_green-text_! which sets the !_color_! style to !_Green_!."
code_file="styles.css"
level="3" >
<CodeHint_1 />
<ExpectedCode
fail="Just add the CSS code !_.green-text { color: Green; }_!.">
<![CDATA[.green-text { color: Green; }]]>
</ExpectedCode>
</Exercise>
<Exercise
task="Set the class !_green-text_! for the second paragraph."
level="3" >
<CodeHint_1 />
<ExpectedCode
fail="Add attribute !_class="green-text"_! at the blue arrow.">
<![CDATA[class="green-text"]]>
</ExpectedCode>
<Run success="Awesome! You have styled the second paragraph." />
</Exercise>
<Exercise
task="Congratulations, you've learned to use CSS class selectors in this lesson! Now play with the code a bit on your own. Change the text which is shown and run it as often as you like. Then continue with the next lesson." >
</Exercise>
</Lesson>
<Lesson
title="Text Style"
example="font-size: 2em;"
description="In this lesson you'll learn to define text styles.">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<h1>My Website</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisici elit,
sed eiusmod tempor incidunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquid ex ea
commodi consequat. Quis aute iure reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum.
<p>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
$space$
p {
$code_hint$
}
]]>
</SourceCode>
<Run success="Let's change the visual style of the text." />
</Exercise>
<Exercise
task="Set the !_color_! style to !_Green_!."
code_file="styles.css"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the CSS style !_color: green;_!.">
<![CDATA[color: Green;]]>
</ExpectedCode>
<Run success="Great! Let's change the text alignment next." />
</Exercise>
<Exercise
task="Set the !_text-align_! style to !_center_!."
code_file="styles.css"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the CSS style !_text-align: center;_!.">
<![CDATA[text-align: center;]]>
</ExpectedCode>
<Run success="Good job! Let's change the text decoration next.