Lab 3: Expand Your World Styling Inline versus Block

Lab 3: Expand Your World Styling Inline versus Block Content
Problem: CSS has its own terminology, syntax, and concepts such as the box model, float, and
inline versus block content, all of which is critical to your ability to successfully apply styles and
position content on your webpages. In this exercise you will create an external style sheet to
experiment with styles as they relate to inline and block content. The webpages that you are
styling summarize CSS terminology, syntax, and tips. The final, styled webpages are shown in
Figures 4 – 52, 4 – 53, 4 – 54, and 4– 55.

Instructions:
1. Open the cssterminology04.html, csssyntax04.html, cssdeclarations04.html,
and cssblock04.html files in your HTML editor from the Data Files for Students and then
modify the comment at the top of each of the four pages to include your name and today’s date.
2. Enter CSS terminology within the <title> tags of cssterminology04.html, CSS syntax
within the <title> tags of csssyntax04.html, CSS declarations within the <title> tags of
the cssdeclarations04.html page, and CSS block styles within the <title> tags of the
cssblock04.html page.
3. Open the cssterminology04.html page in the browser and read the page. Tap or click the links
for the three other pages and read them as well. Note that the content goes “wall-to-wall” in
your browser. To center the content within a small left and right margin, add padding between
the content and border, and then change the background color to light gray. To do so, create
an external style sheet with the following rules for the content marked up between <div
id="main"> and </div> tags:

#main { width: 90%;
margin: 0 auto 0 auto;
padding: 2%;
background-color: #D7D7D7;
}
4. Save the file as css04.css in the same folder as the HTML webpages and then add a
comment as the first line of the file with your name and the current date.
5. Link the css04.css stylesheet to each page by entering the following element to the <head>
section in each page.
<link rel="stylesheet" href="css04.css">
6. Save and refresh your webpages after every step and tap or click each link to see the impact of
each new set of rules on the four pages. Style <h1> content with a dark red text color by adding
the following style to the external style sheet:
h1 { color: #CF0000; }

7. To study how borders are applied to block paragraph content, add the following rule to apply a
blue, 1px, solid border to all sides of every paragraph:
p { border: blue 1px solid; }
Save your changes and then refresh your webpages and view the borders around the
paragraphs.
8. To study how float is applied, you will work with the cssblock04.html page. Read the
paragraphs that surround each example. Example 1 proves that when an image is followed by
another image, they arrange themselves in a line, as inline content. Example 2 shows how a
single image “appears” to be block content, but only because the content that follows the image
is a block and thus starts on its own line.
You will modify the image after the Example 3 paragraph to float left. To do this, add
class="floatleft" to the <img> tag that follows the Example 3paragraph. (Hint: The
order of attribute value pairs in an HTML tag is not technically significant, but it is common
to put the most important attributes first. Typically class and id attribute values are listed early
in the tag.)
Add the following rule to the external style sheet:
.floatleft { float: left; }

Save css04.css and cssblock04.html and then refresh the cssblock04.html page in the browser
to observe how the image after the Example 3 paragraph floats left. Content that follows the
floated image fills the space to the right of the floated image.
9. You want the Example 4 paragraph to start on its own line, so you need to clear the float at that
point. To study how float is cleared, add class="clearfloat" to the opening tag for
the Example 4 paragraph. Add the following rule to the external style sheet:
.clearfloat { clear: both; }
Save the fies and refresh the cssblock04.html page in the browser to observe how the Example
4 paragraph is “cleared of the float” and acts as normal block content again, starting on its own line.
10. You want the image after the Example 4 paragraph to oat right. To do this, add
class="floatright" to the <img> tag that follows the Example 4 paragraph. Add the
following rule to the embedded style sheet:
.floatright { float: right; }
Save the files and refresh the cssblock04.html page in the browser to observe how the
image following the Example 4 paragraph floats right. Floating content right can be tricky
considering that people read English from left to right. Content that floats right is positioned
before the content that flows next to it in the HTML file.

11. Change the existing navigation content into a horizontal navigation bar. To do this, first
remove the bullets from the list items in the nav area. List item content naturally flows as block
content, with each list item on its own line. To create a horizontal navigation system with each
of the links on the same line, you also must add a rule to change the list item content from
block to inline. To do this, add the following rules to the style sheet:
nav li { list-style-type: none;
display: inline;
}
Save the files and refresh the pages in the browser to observe the new horizontal navigation
system.
12. Tap or click the CSS Terminology link to open the cssterminology.html page in the browser.
This page lists several key CSS terms. You want to style the terms in bold. To do this, you
will mark up the CSS key terms using the … tags. (The span element is
an inline element that allows you to mark up and style content within a paragraph without
creating a new line.) Mark up the following CSS terms using both the tag and a
class="cssterm" attribute in the opening tag as follows: (Hint: Be careful to add
only the opening and closing tags and not change or delete any of the existing content
or HTML code.)

External styles (first paragraph)
Embedded styles (second paragraph)
Inline styles (third paragraph)
Rules (fourth paragraph)
selector (fifth paragraph)
declaration (sixth paragraph)
Inheritance (seventh paragraph)
Specificity (eighth paragraph)

Add the following rule to the external style sheet to style the terms marked up by the
class="cssterm" attribute value:
.cssterm { font-weight: bold;}
Save the files and refresh the pages in the browser to observe the new bold terms on the
cssterminology04.html page.
13. Validate your HTML and CSS pages and fix any errors.
14. Submit your assignment in the format specified by your instructor.
15. Create a document with these four headings: Terminology, Syntax, Declarations, and Block
Versus Inline. Reread cssterminology04.html webpage in your browser. After the Terminology
heading in your document, write a sentence or two about something that you want to learn
more about or still have questions about in regard to CSS terminology. Repeat this process for
the other three pages in this exercise that discuss CSS syntax, CSS declarations, and CSS block
versus inline styles. Your answers should prove that you have read the webpages. Save the file
with the name Chapter4Lab3CSS.

The Tradition of Sharing

Help your friends and juniors by posting answers to the questions that you know. Also post questions that are not available.

Why should I post the question or an answer?

Question