Categories
CSS

CSS Cookbook

Class and ID attributes

These two attributes specify where and how styles are applied to elements.

Class

You use the class attribute to define styles for elements with the same class name. When you update the style definition, all elements in your document that have that class attribute are effected. Here’s an example of a class definition:

<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>

Note: Notice the use of the period before the class name.

Here’s an example the demonstrates how to use a class attribute:

<body>
<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

ID

You use the id attribute to define a style for a unique (one-off) element. When you update the style definition, only one element is effected (the one with that ID attribute). Here’s an example of an ID definition:

<style>
#myTwoCents {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

Note: Notice the pound sign before the ID name.

Here’s an example that demonstrates how to use an ID attribute:

<div id="myTwoCents">
  <p>I like traffic lights.</p>
</div>

Positioning

This sections explains how to control content flow within the page. For more information, see CSS position property.

static

The default positioning is static. Static positioned elements simply render in the order that they appear in the document flow. Static positioned elements are not affected by the top, bottom, left, and right properties.

fixed

Fixed positioned elements:

  • are removed from the normal flow.
  • are positioned relative to the browser window,
  • will not move, even if the window is scrolled.
  • can overlap other elements.

Note: The document and other elements behave like the fixed positioned elements don’t exist.

relative

In the same way that fixed position allows you to place an element up against the browser window border, position relative allows you to do the same thing, but up against a container’s borders. Set the containing box’s position to relative, and then set the position of the box that it contains to absolute.

Example

If you set relative positioning on div-1, then any elements within div-1 are positioned relative to div-1. Then if you set absolute positioning on div-1a, then you can move it to the top right of div-1.

#div-1 {
        position:relative;
}

#div-1a {
        position:absolute;
        top:0;
        right:0;
        width:200px;
}

The element is positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position.

Notes

  • Relative positioned elements are often used as container blocks for absolute positioned elements.
  • If you want scroll bars, then don’t use relative position.
  • If you switch to relative, then you’ll loose the scroll bars.
  • To get scroll bars, set values for “top” and “bottom” (e.g., top: 120 px, bottom: 30 px), and then set the position to either fixed or absolute.

Absolute

Absolute positioned elements:

  • are positioned relative to their first positioned enclosing element (or body element, if there aren’t any).
  • are removed from the normal flow.
  • don’t participate in the normal flow of the static elements in the document.

Note

  • Absolute positioning doesn’t work for variable-height columns (boxes).
  • You can see the blue outline of a selected div only when you set it’s positioning to Absolute.
  • This is the type of position you want for the title in your page header. It allows you to move the text to the right, away from the logo (padding-left: 20 px).

Inherit

The value of the position property is inherited from the parent element.

Display

The display property specifies the type of rendering box used for an element.

Block

As far a flow is concerned, content won’t appear beside a block. As far as that block taking up all the available horizontal space – you have to specify width = 100%.

Margins and padding

  • Margins are used to setup a space around content to keep other content away.
  • Padding is used to distance content away from the sides of a container (e.g., a div).

Scroll bars

To get scroll bars to appear, and to force the div element to keep it’s shape: Overflow=scroll

Not sure

div#mainSection table {} Match any table that is within a division that has an id=mainSection. I.e., must match the entire division, not just an element.

How to use DIVs to layout your page with a header, a footer, and nav bar along the left, and an iFrame content pane

Divs can come one after the other, in succession, and they can also be nested. What are the rules of thumb about when it’s appropriate to use these two approaches?

I want the nav pane and the content pane to have scroll bars – but I want them to be independent from one another.

What I learned in order to solve the page layout problem

Divs, divs, divs! It’s all about Divs. You have to put every part of your web page inside its own div. It’s the div that gets scroll bars, it’s the div that is positioned static and therefore stays put, it’s the div that get the high z-order to stay on top of content in other divs.

I was able to get things working by starting from scratch; by creating a test web site. I did this to make sure I could clearly see the result of each change/addition to the web page as I progressed.

I began by creating a Body div, and styling it with a dark blue background. I made sure that the divs that it encapsulated appeared inside and on top of it – by making them slightly smaller. E.g., by making their boundaries slightly inside the body division (like a box within a box).

Second, I created a generic wrapper div, styled it with a green background, made it relatively positioned, and positioned its boundaries 10pt from the edges of the body background so I could see it on top of the blue body background.

Then I created a generic container div – to contain the navigation and content panes; and I positioned those two panes absolutely withing this container pane. Again I positioned these panes such that I could see that they were inside of (that is, top of) their parent container.

Notes

Don’t confuse “.body” with “Body Text”. 🙂

Leave a Reply