IS 360 CSS Lab 1
Positioning
Learning Objectives
In this lab, you will work with CSS formatting.
Show the Google CSS tools.
Work with embedded, internal, and external style sheets and see how style rules are applied
and how style rules cascade.
Work with different forms of selectors.
Format text and work with fonts.
Format and shape tables.
Style Summary
Style
color
background-color
Desc
Foreground color
Background color
font
font-family
font-size
font-style
font-weight
All properties
Family
Size
Style
Weight
margin
margin-left
margin-right
margin-top
margin-bottom
padding
padding-left
padding-right
padding-top
padding-bottom
Inherit
Yes
No
border
border-left
border-right
border-top
border-bottom
Note that munch of the content for this lab was derived from the following sites and links
http://developer.mozilla.org
http://reference.sitepoint.com/css/inheritance
Creating Embedded and Internal Styles
Recall that when working with styles, they are applied from the most general to the most specific. That
is, external styles are applied first, then internal styles, and finally inline styles. As those styles are
applied, remember the idea of inheritance. New styles are added to existing rules. One rule might
override the style in another rule.
Hands-on Activity: Creating internal and inline styles:
1. Start Visual Studio 2015 and create an empty Web Project. File, New, Web site.
Select ASP.NET Empty Web Site as you have been doing:
2. IMPORTANT: From the CSS formatting page on my Web site, download the file named
IS360CSSLabCode.html. It contains the HTML that goes along with this lab. I’m hoping that you
can save some typing of a bunch of HTML. Save this file into your project folder. Refresh the
solution explorer. The file should appear.
3. Take a look at the document. As you can see, it’s is a pure HTML document with some text and a
few simple tables.
4. Create a <style> block inside of the <head> section of the HTML 5 page. See the example in
the next step.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
5. I have already created the document for you. As part of these steps, you will not modify any of
the HTML that I have written. You will however add inline styles to a few elements that I have
already created so as to demonstrate the
Color
There are three common ways to specify a color:
Color name (background-color: red)
A HEX value (background-color: #FF0000)
An RGB value (background-color: rgb(255,0,0)
And there are a couple common properties associated with color:
Use the color property to define the foreground color. The color property inherits.
Use the background-color property to define the background color. The background-color
property does not inherit and the default background color is transparent.
Hands-on Activity: Exploring color and scope:
One of your peers mentioned this site. It’s a great color wheel with which you can use colors.
https://color.adobe.com/create/color-wheel/
In this first exercise, you will see how to apply color to various elements:
1. Note that the document has an outer <div> tag that “wraps” the entire document <body>
element. This is a common formatting practice. And we will use this idea throughout this and
other labs.
2. In the internal style, set the background color to aliceblue as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
background-color: aliceblue;
}
</style>
</head>
3. Now, try the following other forms. As you do, refresh the browser window and see what
happens. You should see nothing happen as these there the HEX and RGB values for Alice blue.
Also, try a couple of other colors based on what you see in cone of the color wheels mentioned.
background-color: #F0F8FF;
background-color: rgb(240,248,255);
Look at the browser window. While the content is aliceblue, the empty space between the
bottom of the content and the browser window is not. The <div> tag is contained in the
<body> so the background only applies to the content not the browser window. To fix this, add
the following inline style to the <body> element as follows.
<body style="background-color: aliceblue">
Here, you are writing an inline style that applies to the document body.
4. If you view the style again, you should see that the entire region of the browser window is filled.
The Basics of the CSS Box Model
We will revisit the CSS Box model in more detail when we talk about positioning, But for now, we need it
to layout the page and the objects within it.
In CSS rectangular boxes are described using the standard box model. This model describes the content
of the space taken by an element. Each box has four edges: the margin edge, border edge, padding
edge, and content edge. And they are organized as follows:
The visible content such as the text appearing in a paragraph appears in the content edge.
Whitespace (padding) surrounds the content.
An optional visible border surrounds the padding.
And the boxes themselves can have an optional outside margin.
Every box has a width. And the width of that box can be fixed or vary. As mentioned in class, one layout
strategy is to layout the page such that it has a fixed size (1024px), and gutters along the sides. One
common way to do this is to “wrap” the document body in a <div> tag and format that <div> tag as
follows:
We set the width property to a fixed size (width: 1024px). This causes all of the child content
to be contained in this 1024px fixed-width box.
By default, the box is aligned along the left side of the <body> (browser window).
The next step in the process is to center the 1024px box inside of the browser window. This is
accomplished by setting the margins. You can manually set the margin-left and marginright properties to fixed or percentage values. But since you don’t know the width of the
user’s screen, this won’t work well for all screens. Take a look at the following:
div {
background-color: aliceblue;
width:1024px;
margin-left: auto;
margin-right: auto;
}
By setting the margin-left: auto and margin-right: auto, you tell CSS to automatically
define the margin, which causes the box to be centered inside of the parent box (again, in this case the
browser window itself
Hands-on Activity: Centering the document:
1. Add the following code to the CSS style:
<style type="text/css">
div {
background-color: aliceblue;
width:1024px;
margin-left: auto;
margin-right: auto;
}
</style>
2. Test the outcome in the browser window. You should see the 1024px window centered in the
browser window with the gutters in place along each side
Borders
In this next section, you will begin to work with borders. The purpose is twofold. First, you will see how
borders work. But you will also use borders to visualize how the CSS box model is working and the effect
of margins and padding. Finally, later in the lab, you will work with table and cell borders: You can do
significant fiddling with borders to create some interesting effects, but I’m going to keep it simple here.
Use the border property to set all sides of the border. This is setting the border pattern,
(solid, dashed, etc.)
Use the border-width property to set the border thickness.
Use the border-radius property to round the corners. Each of these has top, bottom,
left, and right properties.
Hands-on Activity: Creating a document border:
In this next sequence of steps, you will create a border for the outer div tag with which you have been
working. Again, one of the purposes of this exercise is to get a feel for the size of the box:
1. Add the following properties to the div style with which you have been working:
border: solid;
border-width: 2px;
border-radius: 25px;
2. Test the change in the browser. You should see the border surrounding the 1024px box. But the
text is jammed up against the border along the left margin. To fix, we can set the padding
property as follows. Add the following to put padding between the text (content) and the
border. You are adding 25px to all sides of the box.
padding: 25px;
3. Try it again and see that there is now room between the content and border.
Text / Fonts
In this section, you will see how to work a bit with text and fonts. My strategy is generally to set default
font types and sizes in the most general way possible. Here, you will define a default font and font colors
using this same outer level div tag. Note the following about text and fonts.
Text is aligned using the text-align property. This property aligns the text within a box but
not the box itself. Values include (center, left, right, justify).
The text-indent property defines the indentation of the first line of text. Positive value
indent. Negative values outdent.
The font itself is set via the font-family property. Recall from the lecture that CSS fonts are
categorized as named or generic families. Named fonts are quoted names like “Times New
Roman”, “Arial Black”. Generic fonts have predefined names such as Time, serif and sans-serif.
The font-size property defines the size of the font.
Use the font-weight property to change thickness (normal, bold). Font sizes inherit.
A good discussion of font families and web safe fonts
https://www.w3schools.com/cssref/css_websafe_fonts.asp
Hands-on Activity: Setting general font information:
1. Add the following properties to the div style with which you have been working:
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
font-size: 13pt;
text-align:justify;
2. Test your changes in the browser, you should see that the font information has been applied to
all of the children of the <div> tag because fonts inherit.
Using Class Selectors
So far, you have been using element selectors for everything. Suppose however, that in your document
you want to format a “special” type of paragraph that had a unique meaning within your document. In
this example, suppose that we wanted to mark some paragraphs as pointing out some type of odd
content. Here, we can use a simple class:
p.quirk
{
width:80%;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
}
Here, I’m
The document already contains the following paragraph to do this:
<p class="quirk">
Hands-on Activity: Using a class selector to set fonts:
1. Add the above code to your embedded style: when you render the page, you should see one of
the paragraphs using a smaller font. The paragraph should be centered in within the parent
window. Why?
Tables
You can get pretty creative formatting tables. In addition to using all of the formatting properties
already discussed, there are a few properties that apply to tables are work a bit differently when applied
to tables.
Table Border
When you draw a border around a table, the border surrounds the table but not the cells themselves.
The style
table
{
border:solid;
border-width: 1px;
}
Produces
The border surrounds the table body but not the caption or header.
Drawing a border around a table row has no effect.
Drawing a border around a table cell creates the border around the cell itself, which has an interesting
side effect. The following style rule:
td
{
border:solid;
border-width: 1px;
}
Creates the following borders.
The cell borders appear duplicated. The following property fixes the problem.
table
{
border:solid;
border-width: 1px;
border-collapse: collapse;
}
And the table appears as follows:
In the code that follows, you will work through the steps to format this table’s parts:
Hands-on Activity: Formatting a table
All the following styles should be added the embedded style with which you have been working: In the
following steps, add the style as written. Following the style that you are adding, appears a description.
1. Add the following style to format the table.
table {
border:solid;
border-collapse: collapse;
border-width: 1px;
margin-bottom: 10px;
width: 75%;
margin-left: auto;
margin-right: auto;
text-align:right;
}
Here is what you have done:
The table has a 1px border. Cell borders will be collapsed.
The table occupies 75% of the parent window.
The margin-left: auto and margin-right: auto properties center the table within
its parent, which is the outer <div> tag. The text in the child cells will be right justified. The
table header will not though.
2. Now go ahead and format the table caption with the following:
caption
{
font-size: 20pt;
background-color: darkblue;
color:lightgrey;
}
Again, here is what happened.
The selector picks up all <caption> tags.
It sets the font size and colors.
Note that the caption is the width of the table. So the formatting will be applied to a rectangle
that is the same width as the table.
3. And now format the <th> tags.
th
{
border:solid;
border-width: 1px;
height: 45px;
padding-right: 5px;
vertical-align:bottom;
}
The above rule defines the formatting for the table header.
Here the border has a fixed height of 45px. So it appears taller than the other rows.
The vertical-align property aligns the text position within the cells.
4. And finally format the cells.
td
{
border:solid;
border-width: 1px;
padding-right: 5px;
}
Your table should look like the following when rendered.
A second table example
In this second example, try and add the following rules to format a second table. This table mimics one
of the objectives from your assignment.
table.SevenColumnTable
{
text-align:center
}
tr.SevenColumnRow
{
height:70px;
}
td.SevenColumnCell
{
width: 50px;
background-color: honeydew;
}
© Copyright 2026 Paperzz