Tryangled Solutions web designing tips tricks

When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).

So, instead of writing

1. div#content { /* declarations */ }
2. fieldset.details { /* declarations */ }

you can write

1. #content { /* declarations */ }
2. .details { /* declarations */ }

and save a few bytes for each selector.

This is especially useful for id selectors since they must be unique in a document, which reduces the risk of rules conflicting with each other. class names on the other hand can be used any number of times in a document, and different element types can be assigned the same class name (or names). To style element types with the same class name differently you will need to specify the element types in the selector.

Be aware that the above rules are not identical. If you write one rule with and one rule without the element type in the selector, the rule that uses the element type will have higher specificity.

The <span> and <div> tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes.
<div>

The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections.

<div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.

But that’s not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can’t have a <div> inside a paragraph.

The primary attributes of the <div> tag are:

* style
* class
* id

Even if you don’t use style sheets or DHTML, you should get into the habit of using the <div> tag. This will give you more flexibility when more XML parsers become available. Also, you can use the id and name attributes to name your sections so that your Web pages are well formed (always use the name attribute with the id attribute and give them the same contents).

Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using

<div style=”text-align: center;”>

to center the content inside your div.

More About the <div> Tag
<span>

The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won’t change the enclosed items at all.

The primary difference between the <span> and <div> tags is that <span> doesn’t do any formatting of it’s own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.

The <span> tag has no required attributes, but the three that are the most useful are:

* style
* class
* id

Use <span> when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with

<span style=”color : #f00;”>2ndWord</span>

and it would still be a part of the <h3> tag, just red.

I admit, I have been guilty of this. Once you get started doing CSS layouts, it’s easy to get sucked into the use of DIV tags for everything. At one point, I was even working on a site where every paragraph was surrounded by <div class=”para”>…</div>. That’s a bit excessive. But it’s completely understandable. When you’re first learning CSS layouts, it’s hard enough to understand how to get the page to look the way you want it to look without worrying about whether or not you’re using semantic markup to create your Web page. And besides, nearly every example written uses the div tag to demonstrate how to put up CSS layouts, why should you be any different?
Start Thinking Semantically

When you’re trying to set up a Web page where the styles are separated from the content, you should also be trying to markup your content so that it defines the content that is contained in it. The way you do this is by thinking about the structure of your page and what the elements you’re placing on the page are rather than just what they’re going to look like. For example, this About Web page has some standard elements in the design.

* At the top is the breadcrumb trail
* The About logo
* A search bar/box
* Navigation on the left (divided into sub-sections)
* Navigation in two columns on the right
* A title, sub-title, and author information
* Body content in the middle of the page
* Ads in various locations on the page

Now it would be easy to simply mark up these sections as divs and then give them all unique ids and be done with it. But semantically, these are not all just divisions of the content, in fact, in many cases they have very specific roles on the page.

* The breadcrumb
Arguably, this is not the most important part of the page, but it still is a header of sorts. I would mark this up as an <h5> or <h6> to state to the browser that it’s a header, but it’s not a very important one.

REMEMBER
Using CSS we can style these tags to look however we want them to look. Don’t think of <h1> as “big, bold, and ugly” - think of it as “the most important header on the page”. So an h5 header is saying “this is a fairly low-importance header on the page”, not “small and bold”.

* The About logo
You have a choice here. If you think that this logo should be given prominence on the page, then use an <h1> header on the image. If you just want it to be an image - then use an <img> tag and put an id on it that indicates it’s the logo.
* The search bar/box
Another header - probably <h4>. It’s more important than the breadcrumb, but not really high priority.
* Navigation - left or right
Navigation is 99.99% of the time a list of links. So, if you’re using a list for your navigation, then use a list for your markup. The About lists tend to have a header item at the top (”Essentials” on the left or “More About the DIV Tag” on the right). I would call these out with a header tag around the list item:

<li><h4>Essentials</h4></li>

Then you can use IDs descendant selectors to style the specific areas (like the left and right headers).
* Title, sub-title, and author information
These are clearly headers. Even the image in the author information can be styled using headers - you don’t even need an img tag if you don’t want to use one.
* Body content
Here’s our first div. But be sure to use paragraph tags for the paragraphs inside it and header tags for headers, etc.
* Advertisements
These can also be divs, but many sites are using iframes to place their ads. If you do this, you don’t need to surround it with a div, just style the iframe.

Use Divs for Divisions

I’m, by no means, advocating that we stop using divs. Let’s just start using them where we need to use them, and use the other tags we have available when they should be used. Divs are meant to be logical divisions of content on the page.

In the above example, there may be div tags that I didn’t mention to help lay out the page. But use them only once you’ve used up your semantic markup.