Class on Thursday 9.26.13

Today we are going to continue our work on CSS but first we will talk about the assignment that is due on Thursday.

Details on Assignment 3

There are a few web design principles that are behind what I’m requiring for this assignment. We’ll talk about them briefly

  • Consistency and Repetition. When someone comes to your site it is good if it is clear that each page on the site is part of the same website. One of the ways you do that is to be consistent in the way you lay out pages and to repeat elements of the design. In the assignment that is seen in the requirements:
    • that you have the same h1 heading on each page (with the same text inside)
    • there is an image directly after the h1
    • there is navigation directly after the image
    • each page is centered
    • each page uses the same .css stylesheet
  • Usability. This refers to how easy it is for people to use your site. Following the guidelines of Consistency and repetition go a long way towards helping to make the site usable. Some of the requirements that help with usability are:
    • The navigation must be exactly the same on each page and come near the top of the page.
    • Not using a font-size less than 16px
    • The width of the page is not allowed to be too wide (makes it easier to read)
  • Scanability. This refers to how easy it is for peopel to recognize the various sections of your page so they can quickly understand what it is about.
    • Everything for consistency and repetition pretty much also applies to scanability. People will remember where things are on the page as they click through and not have to search as much
    • Adding space inbetween elements shows the eye that one section has stopped and the next is beginning. The sections of the pages for this assignment are heading, top image, navigation, main content

We will also talk about wireframes uploading and turning it in

CSS Continued

For this make sure you have the files from last class. If you don’t, you can download this file:100class_9.24.13_inClass.zip

We will continue to look into CSS. To make sure you have what you need for the assignment we will cover:

  • Setting the font-family
  • setting the font-size
  • The CSS Box Model: and go over block vs inline elements again
  • Setting padding and margins.
  • setting width of elements
  • Centering the page

I don’t think that we will get through everything listed here today. So whatever we don’t cover we will cover on Tuesday. The assignment isn’t due until the end of the day on Tuesday so you will have time to work on it in class and after class. I recommend that you get started over the weekend if you haven’t gotten started already.

Fonts

There are two basic things that you will want to style

  1. The font that is used
  2. The size of the font

font-family

You set the font with the font-family property. The value for the property is a list of fonts you would like the computer to use. The browser will try to use the first font in the list and if the user’s computer doesn’t have that, then will try the second and so on. Use quotes if the name has spaces. Here’s an example:

p{
    font-family: "Helvetica Neue", Helvetica, Arial;
}

So what happens if the users’s computer doesn’t have any of the fonts? What we do is specify one of five generic font types at the end and the computer will pick a font of that type:

  1. serif
  2. sans-serif
  3. monospace
  4. cursive
  5. fantasy

Something you will have to learn is the differnce between those and what fonts belong to which of the generic families. For the above example we would add sans-serif like so:

p{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

We will cover that in more detail in a later class. For now remember these guidelines:

  • most font’s are serif or sans-serif. Use these 90% of the time.
  • Fonts that look like handwriting or fancy old text are often cursive
  • fonts that are totally different with wild shapes and such are fantasy

You often learn at first by imitating

I would recommend at first that you use a site like this one: http://cssfontstack.com/
They allow you to copy
fonts and have thought about it a lot.

font-size and line-height

You set the size of the font with the aptly named font-size property. Here’s an example:

p{
    font-size: 16px;
}
Units

When you set a property like font-size you need to say what units you are using. For now, it’s easiest if you think in pixels which is px later we will learn some more units.

line-height

Whenever you set the font-size it’s a good idea to set the line-height too. This controls how much space there is between the lines. It is similar to setting single space or double space lines in MS Word, but you have more control. Line-height is one of the few that don’t need units. Most of the time just use a number between 1.3 and 2. Here’s an example:

p{
    font-size: 16px;
    line-height: 1.5;
}

The CSS Box Model

I’ve said it before and I”ll say it again: Everything on a web page must be inside of tags the other part to that is that visually, to the browser, all tags are boxes. To see that in action copy the CSS below and paste it at the very top of your styles.css file, then look at your .html page in a browser again.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

There how that works. The * is called the universal selector. It selects all elements on the page. When you put in more than one of them at a time it it selects child elements.

Let’s look at this HTML as an example (we’re only including the body because you can’t style html and head elements).

<body>
    <h1>Heading</h1>
    <p> SOme text with <em>emphasis</em></p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>list item 3</li>
    </ol>
</body>
  1. The * is the first level, which starts with the body and includes everything else, so everythign would get a dotted red outline
  2. The * * would target just elements that were children of body and change their outline to dotted green. h1, p, ol in this case
  3. The * * * would target the elements inside of the previous elements and give them a dotted orange outline, em and li in this case.

So, once you get this example you are on your way to understanding:

  • Everything is in an element
  • Elements are boxes
  • These boxes(elements) can be nested inside each other
  • When one box is nested in another box, it is called the child element of that outside box and the outside box is called the parent element.
  • When we talk about layout, you will also hear the parent element referred to as the containing element because it contains the other elements.

Box Model Diagram

Open the link to this web site and we will see a visual diagram of how the box model works: http://www.redmelon.net/tstme/box_model/

This, http://www.w3.org/TR/CSS2/box.html, is the offical explanation, but may be a bit too complex for you right now. You may want to come back to it later when you have a more specific question about the model.

Block vs Inline

The final concept to get is that not all of the boxes are treated the same for each element. The two types are called Block and Inline. The basic difference is that

Styling the Box Model

Then you’re ready to learn the different properties

  • width
  • height
  • padding (can be set at once or for each side: top, right, bottom, left)
  • margin (can also be set at once or for each side: top, right, bottom, left)
  • border (can also be set at once or for each side: top, right, bottom, left)

For Inline elements you can only set:

  • padding-left
  • padding-right
  • margin-left
  • margin-right

Top and bottom padding and margin will not work and width and height settings wont’ take effect either. However you can change the

  • line-height

to make an inline element have a bigger height. I recommend not just randomly doing that but have a good reason and make sure you are targeting just the thing that needs more height with your selector.

Let’s look at an example. I have an element with a class of highlight. To give it a width and height of 200 pixels, add a 1px solid red line around the element and give it a 10px padding inside that border, you would write:

.highlight{
    width: 200px;
    height: 200px;
    border:1px solid #ff0000;
    padding: 10px;
}

A note about height
Generally you don’t want to set the height of elements. The content inside of the element will set the height for you.

Padding and margin use that number for each side of the box. You can also style each side individually. If I just wanted the padding and border on the top and bottom I could use:

.highlight{
    border-top:1px solid #ff0000;
    border-bottom:1px solid #ff0000;
    padding-top: 10px;
    padding-bottom:10px;
}

There are other ways to write this, which we will learn as we go along.

A note about border
Border might need a bit more explaining. It is a compound property that lets you set the border-width, border-style and border-color at once. You kind of need all three for a border to show so most people use border and then give a value for each one of those (order is not important). But to show you, both of the examples below are the same:

.highlight{
    border:1px solid #ff0000;
}

/* or */

.highlight{
    border-width:1px;
    border-stye: solid;
    border-color: #ff0000;
}   

Centering the page

To center the page we need to do two things to the body element (we use the body because it contains everything on the page):

  1. give it a width
  2. set the left and right margins to auto

Here is an example of setting 600 pixel width page that is centered:

body{
    width:600px;
    margin-left: auto;
    margin-right: auto;
}

You can also use shorthand with the margin property. That looks like

body{
    width:600px;
    margin: 0 auto;
}

The first number, 0, applies to the top and bottom margin and the second value, auto, applies to the left and right margins. You must use auto for the second value to center, but you can change 0 to another number, just don’t forget the unit value:

body{
    width:600px;
    margin: 50px auto;
}

Leave a Reply