Learning CSS for ASP.NET

Several weeks ago, I started implementing an ASP.NET 2.0 interface for a postal systems project. Although I had previous experience with n-tier web architectural design, the ASP.NET programming model was new to me, as were the constellation of languages and constructs used in modern web design. My first objective was to prototype all screens in the new interface. Initially, I thought of using Visio to layout the content, but I soon realized that it’s better to put a working “skeleton” in front of the user. The skeleton may lack tier 2 connections, but it should represent the interaction model, which includes:

Link structure between forms.
Dynamic, client-side content such as hover boxes and timers.
Proposed color scheme, which is an accessibility concern for colorblind users.
Site-wide style sheets.

This article addresses the last point. CSS syntax is straightforward, but several key insights took me days to internalize. Cross-browser issues further complicate the matter, but for now I will describe high-frequency concepts that CSS designers must thoroughly understand. Unless otherwise noted, the reference “CSS” refers to the CSS Level 2 (CSS2) standard.

The Document Object Model (DOM)

W3C’s “What is the DOM?” article summarizes technical information that I will not reproduce here. From the CSS perspective, the designer should simply remember that the DOM is a hierarchy with nodes and that a style may be associated with each node (See below).

Further, styles cascade to child nodes, but may be overridden by selectors associated with those child nodes. For example,

#header
{
   font-size: 14px;
   margin-left: 5px;
}  

#header div
{
   font-size: 10px;
}

The first selector sets the font size for all text in the header section to 14 pixels. Inside the header section’s <div> block (or blocks), the font changes to 10 pixels. But what is the left margin for header <div> blocks? The margin-left style cascades down from the #header declaration to the child block. Therfore, the <div> block’s margin-left property is also 5 pixels.

Here it is useful to note that the DOM gave rise to the concept of Dynamic HTML (DHTML). DHTML is not a language, but rather a collection of three technologies that allow client-side modification and update of the browser display:

Static markup (eg, HTML or XHTML)
Client-side scripting (eg, JavaScript)
A presentation definition language (eg, CSS)

Taken together, these three tools allow the designer to implement a variety of dynamic features that do not require a page refresh (for example, “On Hover” text boxes, expanding text areas, and real-time clocks).

id v. class

The code above uses selectors to identify nodes in the DOM. The id and class selectors concern us now. Here is how to declare and use them:

/* This is an id */
#id-declaration
{
   font-size: 10px;
   border: solid 1px #000000;
}  

/* This is a class */
.class-declaration
{
   font-size: 8px;
   padding-left: 1em;
}

Next, associate the selectors with specific nodes in the static HTML:



This is a class

 This is another one!

Incidentally, this example reveals the guidelines for using id and class :

Use class when an item appears more than once in a page.
Use id when an item appears only once in a page.

Note that classes may also be defined within ids and that ids may be associated with standard HTML tags:

/* The title class only applies to children of header */#header .title
{
   font-size: 10px;
}  

/* The name id only applies to <p> elements */
p#name { font-size: 10px; }

div v. span

The “id-declaration” example applies a style to a <div> tag. A <div> is a containing block that may be used to layout elements on a page. Positioning styles applied to the <div> then move all of the elements within the <div>. By default, divs follow a flow-layout, meaning that they align vertically on the page in the order of declaration. Conversely, a <span> should be used for inline elements, such as bits of text.

CSS provides selector attributes to modify these layout schemes. float is probably the most confusing. Consider the following:

#content-container{
   float: left;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a floated element.

Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.

The floated element will align itself with the left-side of the innermost enclosing container, in this case, the body. The text (and other elements) will then flow around the <div>. Follow these rules of thumb when using floated elements:

Specify a width. Unpredictable results may occur otherwise!
If an element must align below combination of left and right-floated elements, use clear:both. This is especially useful when making page footers.

Positioning

In addition to float, brute-force positioning techniques exist. By default, all elements align as if position:static were declared. In other words, elements flow sequentially according to the HTML markup. Declaring position:absolute removes the element from that sequential flow:

#top-left{
   position:absolute;
   top:0;
   left:0;
}

This element will align to the top-left of the browser window, overlapping any elements if necessary. This may not be the desired effect, in which case the position:relative method exists to simply move the element relative to its position in the normal flow. The following code results in a 10-pixel indentation from the normal layout flow.

#nudged-left{
   position:relative;
   top: 0;
   left: 10px;
}

Bumped left 10 pixels!

Spence Green

التكرار يعلم الحمار