CSS Continued...

In the previous lecture we discussed how CSS works. Lets do a quick review, and show a few more CSS options.

Locations for CSS

Examples of Styles

Examples of property values/units

Box Model

CSS uses the box model for objects, allowing you to describe the area around the objects. This allows you to solve issues with spacing.

Box model

Divs and positioning

<div> is an HTML element, while float and clear are properties in CSS. Using these three elements together, many web designers create the modern websites you visit today.

A <div> is just a container. Div, which is short for divider, isn't anything special on its own, it's just a box that can be filled with text, lists, images — whatever we want. Example:

<p>This is paragraph #1</p>
<div>
  This is some text in a div.
</div>
<p>This is paragraph #2</p>

You're probably not impressed. In fact, as far as we can tell, it looks like the div is pretty much invisible. It's useful! I promise! First, let's make sure it's even there by applying a border to it using CSS.

div {
  border: 1px solid black;
}

Ok, something happened. You'll notice that the border extends from end to end on the page. That's because divs are "block-level" elements — they start on a new line and extend across the width of the page. Other elements, like the anchor element, do not do this and are called "inline" elements, since they appear on the same line as others.

There are five different ways in which we can position elements within the browser they appear in: static, relative, fixed, sticky, and absolute. static positioning does nothing special to the HTML element; it is simply displayed as it normally is (and thus, we'll move on to relative positioning now). Even though we didn't specify it, the div on our page is displayed using position:static.

The next positioning property we'll discuss is position: relative. Relative positioning moves an HTML element (in our case, our div) relative to where it would normally be. Other elements are not moved to accomodate this displacement. Let's try it out:

div {
  position: relative;
  left: 20px;
  bottom: 40px;
  border: 1px solid black;
}

In relative positioning, we can specify how far we want to move away from our normal position from the left, right, top, or bottom. Try it out yourself.

Next, we'll take a look at position: fixed. Fixed position "fixes", or anchors, an element relative to entire browser window. Elements with fixed position will stay in that position even when the browser is scrolled. You may need to add enough text to your page to make the browser have to scroll so you can observe this behavior.

div {
  position: fixed;
  bottom: 0;
  right 0;
  width: 300px;
  border: 1px solid black;
}

The final positioning type we'll learn about is "absolute". Absolute positioning is positioned relative to its closest ancestor (AKA parent element) that is positioned (not static), instead of relative to the entire browser screen, like fixed. Note that if an element does not have any positioned ancestors, it will be positioned relative to the body and it will act like a fixed positioned element and be positioned relative to the whole window. In order to demonstrate absolute positioning, we'll make two div boxes, and position one inside the other. First, make a div with relative position. 

<p>This is paragraph #1</p>
<div class="relative">
  This is some text in a div.
</div>
<p>This is paragraph #2</p>

div.relative {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

Next, we'll add a new div inside of the previous div.

<p>This is paragraph #1</p>
<div class="relative">
  This is some text in a div.
  <div class="absolute">
    Other text.
  </div>
</div>
<p>This is paragraph #2</p>

Now, we need to specify how far away this div should be from the edges of the div it's inside of:

div.absolute {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;
  right: 10px;
  border: 1px solid blue;
}

We also have float and clear. Oftentimes it's useful to have text (and other HTML elements) flow around a div rather than it taking up the width of the page. In order to achieve this, we apply the CSS "float" property with a direction of left or right.

<p>
  This is paragraph with a whole bunch of words!
  ...words words words...
  words die down
</p>
<div class="float">
  This is some text in a div.
</div>
<p>This is paragraph #2
  ...words words words...
  words die down
</p>

Apply some CSS magic!

div.float {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

What happens if we add another div right underneath our floating div in the HTML? Can we make it float too?

We can force an element not to float by applying the "clear" property to the right, left, or both. This tells our browser, "hey, don't let any floats be next to me!" on those particular sides. Try adding another div that clears any floats next to it.

Centering Secrets

Often people want to center text or images on a page. How to do that? Centering text within a block element is done using center value for the text-aling property, and centering a block element on a page is done by setting the left and right margins to auto as in the stylesheet below: 

 
.tcenter  {text-align: center}            
.dcenter  {margin-left: auto;             
           margin-right: auto;           
           text-align: center}
We can use the classes defined as follows: 

...
<h1 class=“tcenter”>Centered title<h1>

<table class=“dcenter”> …</table>
<div class=“dcenter”>
  <img src = "..." alt = "centered image" >
</div>

Hide and Seek Menus

Have you ever wondered how those nice drop-down menus are created, where the menu items are revelead when you click or hover over some element? Wonder no more - CSS is the answer. In particular, use of the display property, which can have values of none (which makes elements invisible), inline, block, and inline-block, in combination with the hover pseudo-class, can make elements appear and dissaper when the user moves their mouse over some element.

View the source of this no CSS menu to see the initial code, with no CSS, and this full CSS menus to see how the same HTML code looks like when CSS is applied.

Practice Problems

  1. What attributes does the <p> get assigned? 
    
...
<style>
	body { font-weight: bold }
	td { font-size: 14pt; font-color: green }
	.cool { font-color: red }
	p { font-size: 12pt }
	td p { text-decoration: underline; font-color: yellow }
</style>
...
<table><tr>
	<td><p class=“cool”>Let’s get it started</p></td>
</tr></table>
...
  2. Write HTML5 code to simulate this with only h3 and p tags and inline CSS:
    set13-ex2
  3. Draw this output: 
    
<!DOCTYPE html>
<html lang = "en">
  <head>
    <title>Example</title>
    <style>
	  .pane { float:right; width:20%; height:600px; border:1px solid black }
	  .header { width:75%; height:100px; border:1px solid black  }
	  .main { width:75%; height:500px; border:1px solid black  }
    </style>
  </head>
  <body>    
	<div class=“pane”> some content </div>
	<div class=“header”> the header </div>
	<div class=“main”> the main body </div>
  </body>
</html>