ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 04

Week 04 – Topics

Navigation review

CSS Box Model

CSS Selector Types

Technical lab: CSS Box Model assignment

Assignments

1) Lab assignment: Using the CSS_BoxModel_exercise files, recreate the Cupcake Mama website using div tags as demonstrated in class. For your reference, here is a link to the Cupcake Mama web page. Please be sure to follow the steps in the class notes below. Also, apply what you have learned today to the 2-column or 3-column website you have been working on. Please upload your final files for both assignments to the class server.

2) Continue working on your Website re-design: Think out who your project’s demographic is for next week’s assignment: creating your personas. Develop a sitemap for your website, is the current sitemap a good one? Is there room for improvement? Start working on the homepage wireframe. Bring an 11×17″ print-out of sitemap and homepage wireframe to our next class.

3) Project due before next week: Find 3 articles that discuss using CSS for the Web. Post a link to these articles on your class blog and include a 5-6 sentence summary of the article. What does the article detail, how is it helpful to your understanding of CSS, and what did you learn by reading it? Be sure you have all your week 01-week 03 assignments posted to your process blog. Before our next class, I will be grading the assignments you’ve completed so far. I have deleted files that had no last name or moved your files into your folder. Please check to be sure everything is there.

4) Reading for next week: Stylin’ with CSS: Chapter 3: “Stylin’ Fonts and Text” (pg 66-99)

Answers to Quiz 1.

Be sure you know the answers to these questions and review any that you’ve missed. It’s possible I may ask you the same, or similar, question again.

2. We’ve set up our process blogs in WordPress and WordPress is referred to as a “CMS.” What does “CMS” stand for?

Content Management System

3. Setting up a correct file structure is very important when building a website. In the box below, outline file structure as we discussed in class. (* denotes a folder)

*id01

*final_web

index.html

*images

styles.css

*source_files

4. In the box below, outline an example of the HTML code for a simple web page using the 5 basic tags we discussed in class. (sorry, it’s actually 4 basic tags)

<html>

<head> <title> Jamie’s page</title>

</head>

<body>

</body>

</html>

5. What type of file will we use to style and position all of the content for our web projects?

.css (or CSS file)

6. What are two of the five naming rules or conventions you should follow when naming your web files?

Here are all five:

  1. No spaces in the file names
  2. Use all lowercase letters
  3. No special characters in the filenames: For example none of the following are acceptable in web filenames: “!~:&(,
  4. The files MUST have the proper suffix (.html, .gif, .jpg)
  5. Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always “zero-pad” your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile20.jpg.

7. If I wanted to add an image called “logo.gif” into my HTML page, what is the code I’d use to add this image?

<img src=”images/logo.gif” width=”200″ height=”100″ alt=”logo for acme company” />

8. If I wanted to add a link to the Los Angeles Times to my web page, what is the code I’d use to add a link to http://www.latimes.com?

<a href=”http://www.latimes.com/”>Link to the Los Angeles Times</a>

9. In the class notes, I provided a table with a list of web fonts, name one “serif” and one “sans-serif” font from the list.

Sans-serif:

Arial

Helvetica

Verdana

Trebuchet

Serif:

Times New Roman

Times

Courier New

Courier

10. What does “CSS” refer to? (What is it short for)

Cascading Style Sheet

Extra credit: And why is using CSS important?

“separation of presentation and content”

When I create my page layout, I can create an HTML pages containing all the CONTENT for my pages and I can create a separate CSS file containing all the PRESENTATION for my pages. Therefore, to change the presentation of all pages, I can modify my CSS file and it will change the site globally.

CSS box model

Figure: Detail of the Box Model

The term “box model” is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc.

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line – the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself – the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

box {
width: 200px;
border: 10px solid #99c;
padding: 20px;
margin: 20px;
}

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box). Note: just to be clear, the name of the div can be anything, not only “box.”

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

box {
width: 100px;
border: 1px solid #900;
padding: 10px;
margin: 0;
background: #fee;
}

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although “background” is defined as a shorthand property, it is more widely supported than the more correct “background-color”.)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels – the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

box {
width: 78px;
border: 1px solid #900;
padding: 10px;
margin: 0;
background: #fee;
}

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

Above material about The Box Model from Added Bytes website. Content on the site is licensed under a Creative Commons License.

Cascading Style Sheets

Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

  • Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height.
  • Style Sheets can define new styles which can be applied to any text selection.
  • The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).

Defining a CSS rule

Here is a style I’ve created. I’ve created a CSS rule (in this case, a class) and named it “coolstyle.

.coolstyle {
font-family: "Courier New", Courier, mono;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FF3300;
border: 1px dotted #000000;
background-color: #FFFF99;
}

One method for applying the style to text is by using a span tag:

<span class=”coolstyle”>text to be be styled</span>

This is what it looks like in a browser:

Applying CSS

If you’ve modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.

If you’ve created a new style, then:

Select the text you want to apply the style to and:

  • Click on the desired style in the Style drop down in the Properties window
  • OR, you can do this by selecting TEXT>CSS STYLES> and select the style
  • OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected. You should always check your code to see if the CSS tag has been applied properly. You should also preview in both Safari, Firefox, and Internet Explorer to verify that the style is formatting consistently on both platforms and multiple browsers.

More to know about CSS

While HTML structures the document and tells browsers what a certain element’s function is (it is a link to another page? Is it a heading?), CSS gives the browser instructions on how to display a certain element—styling, spacing and positioning. If HTML is the struts and bricks that make up the structure of a house, CSS is the plaster and paint to decorate it.

This is done using a system of rules, the exact syntax of which you’ll learn more about below. These rules state what HTML elements should have styling added to them, and then within each rule list the properties (eg colour, size, font, etc.) of those HTML elements they want to manipulate, and what values they want to change them to. For example, a CSS rule might state “I want to find every h2 element and colour them all green”, or “I want to find every paragraph with a class name of author-name, color their backgrounds in red, make the text inside them twice the size of normal paragraph text, and add 10 pixels of spacing around each one.

CSS is not a programming language like JavaScript and it is not a markup language like HTML—actually there is nothing that can be compared to it. Technologies that defined interfaces before web development always mixed presentation and structure. This is not a clever thing to do in an environment that changes as often as the web, which is why CSS was invented.

CSS Selector Types: Defining style rules

Without further ado, let’s have a look at a CSS code example, and then dissect it:

selector {
  property1:value;
  property2:value;
  property3:value;
}

The pertinent parts are as follows:

  • The selector identifies the HTML elements that the rule will be applied to, identified by the actual element name, eg body, or by other means such as class attribute values—we’ll get on to these later.
  • The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons,
  • The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect element colour, background colour, position, margins, padding, font type, and many other things.
  • The values are the values that you want to change each property of the selected elements to. The values are dependent on the property, for example properties that affect colour can take hexadecimal colours, like #336699, RGB values like rgb(12,134,22) or colour names like red, green or blue. Properties that affect position, margins, width, height etc can be measured in pixels, ems, percentages, centimeters or other such units.

Now let’s look at a specific example:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

The HTML element this rule selects is p—every p in the HTML document(s) that use this CSS will have this rule applied to it, unless they have more specific rules also applied to them, in which case the more specific rule(s) will overwrite this rule. The properties affected by this rule are the margins around the paragraphs, the font of the text inside the paragraphs, and the colour of that text. The margins are set at 5 pixels, the font is set as Arial, and the colour of the text is set as blue.

We will come back to all of these specifics later—the main goal of this tutorial is to cover the basics of CSS and not the nitty-gritty details.

A whole set of these rules goes together to form a style sheet. This is the most basic syntax of CSS there is. There is more, but not much—probably the coolest thing about CSS is its simplicity.

CSS comments

One thing to know early on is how to comment in CSS. You add comments by enclosing them in /* and */. Comments can span several lines, and the browser will ignore these lines:

/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

You can add comments either between rules or inside the property block—for example in the following CSS the 2nd and 3rd properties are enclosed inside comment delimiters, so they will be ignored by the browser. This is useful when you are checking out what effect certain parts of your CSS are having on your web page; just comment them out, save your CSS, and reload the HTML.

selector{
  property1:value;
  /*
  property2:value;
  property3:value;
  */
}

Unlike other languages, CSS only has block level comments—single line comments do not exist. You can of course constrain the comment to a single line if you wish, but you still need to include the opening and closing comment delimeters /* and */).

Grouping selectors

You can also group different selectors. Say you want to apply the same style to h1 and p—you could write the following CSS:

h1 {color:red}

p {color:red}

This however is not ideal, as you repeat information that is the same. Therefore you can shorten the CSS by grouping the selectors together with a comma—the rules within the brackets are applied to both selectors:

h1, p {color:red}

Selectors

There are several different selectors, each matching a different part of the markup. The three most basic ones that you’ll encounter most often are as follows:

p { }: element selector (Redefines an HTML element)
            matches all the elements of that name on the page (p elements, in the case above)

.example{ }: class selector (Apply to any HTML element)matches all elements that have a class attribute with the value specified, so the above would match <p>, <li class=”example”> or <div>, or any other element with a class of example. Note that class selectors don’t test for any specific element name

#example{ }: id selector (Applies to only one HTML element)
matches all elements that have an id attribute with the value specified, so the above would match <p id=”example”>, <li id=”example”> or <div id=”example”>, or any other element with an id of example. Note that ID selectors don’t test for any element name, and you can only have one of each ID per HTML document—they are unique to each page.

You can see the above selectors in action in the following examples. Notice that when you open the example in a browser the warning style gets applied to both the list item and the paragraph (if the bullet disappears it’s because you are setting a white text color on a white background).

You can join some selectors to define even more specific rules:

p.warning{}
matches all paragraphs with the class of warning
div#example{}
matches the element with the id attribute example, but only when it is a div
p.info, li.highlight{}
matches paragraphs with a class of info and list items with a class of highlight

In the following example I use these to differentiate between the different warning styles:

This information about CSS Basics is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Additional Resources

Adobe videos

“Using CSS”

“Styling Text using CSS”

Readings from lynda.com

Cascading Style Sheets

Getting Started

Understanding CSS

Recommended Readings from lynda.com

Selectors and the Cascade

Using CSS to Affect Page Layout

 

CSS Box Model Exercise

Using the CSS_BoxModel_exercise files, recreate the Cupcake Mama website using div tags as demonstrated in class. Please be sure to follow the steps below:

  • Set up the proper file structure by creating both a final web and source files folder. Be sure to move the images into the images folder.
  • Insert 5 divs: wrapper, header, photo, content and footer. Be sure that the wrapper div contains the 4 other divs.
  • Below are the properties we know from referencing the Photoshop file:
  • wrapper div width is 750 px

    header div height is 150 px

    photo div width is 390 px

    content div width is 340 px

    footer div height is 20 px

  • Dont’ forget your floats and clears!
    photo div needs to float left, content div needs to float right, and the footer div needs to clear both.
  • Remember in order to center the entire site, you need to set the left and right margins of your wrapper div to “auto.”
  • Insert a UL to insert the rollovers for your navigation.
  • Create CSS styles using the compound selector for the following: (be sure to include the h1 tag in your HTML code)#photo img {

    }

    #content p {

    }

    #content h1 {

    }

  • Okay, now take this layout a couple steps further and add additional content (like an image or extra text to the content and/or photo divs). In the divs that form the 2-columns you can’t use absolute positioning because it will break your 2-column structure.
  • Position your new content for these two divs using margins, padding and floats. Experiment and play around with the properties! This will help you understand how to position content in inner divs and how to create more complex layouts.
  • Post your exercise files to the class server in a folder called “lastname_firstname/week04/boxmodel/”

Category: Classes

Tagged:

Comments are closed.