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 / Desc / Inherit
color / Foreground color / Yes
background-color / Background color / No
font / All properties
font-family / Family
font-size / Size
font-style / Style
font-weight / Weight
margin
margin-left
margin-right
margin-top
margin-bottom
padding
padding-left
padding-right
padding-top
padding-bottom
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

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.
    <!DOCTYPEHTML
    htmlxmlns="
    head
    titleUntitled Page</title
    styletype="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.

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:

!DOCTYPEhtml

htmllang="en"xmlns="

head

metacharset="utf-8"/>

title</title

styletype="text/css">

div {

background-color: aliceblue;

}

</style

</head

  1. 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.
bodystyle="background-color: aliceblue">

Here, you are writing an inline style that applies to the document body.

  1. 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 CSSrectangular boxes are described using the standardbox model. This model describes the content of the space taken by an element. Each box has four edges: themargin edge,border edge,padding edge, andcontent 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 margin-right 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:

styletype="text/css">

div {

background-color: aliceblue;

width:1024px;

margin-left: auto;

margin-right: auto;

}

</style

  1. 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;

  1. 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;
  2. 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

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;

  1. 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:

pclass="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.
  1. 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.
  1. 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.
  1. 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;

}