Tech Pedia » Web Design

A Little about Cascading Style Sheets

Abhinav Kaiser — Sun, 13 Apr 2008 18:24:19 +0000

Style sheets, as discussed earlier, is the third important component needed for creating the processing of a dynamic Colorado web designed pages. Styles sheets are a standard approved and recommended by the world wide consortium. They were essentially introduced to give the developer more control in page layout and styling of the document. In the following pages we will cover some basic features about style sheets. There are many ways of adding style to a web page. Style can be either declared in the head section of the page or directly within the HTML tag.

DEFINING STYLE WITHIN HTML TAGS

Style within an HTML tag is assigned using the style tag followed by an attribute.

In the above the style tag is written within the HTML tag. The style sheet tag used three properties color font-style-weight and font-family. Their respective values are blue color code, italic, bold and the Helvetica font. Notice there is a colon in between color and blue color code and a semicolon after each property. Isn’t it simple all you have to do is refer to a list of style sheet property and their values and use them according to you Denver web page design.

Defining style in the head section

Defining styles within an html tag is simple but can be quite tedious, especially when you intend using it on multiple html tags .A simpler way out be to declare the style within the head section of the page. By doing so all you intend to format.A style declaration in the head section must begin with the tag and end with the tag.

Style sheet as you know by now are groups of styles that define how an html element may appear in a web browser.

Cascading style sheet viewed within the Microsoft internet explorer.

Apart from the one discussed so far and this is by creating an external style file. Style sheet declaration in an external file is particular very useful in useful in cases where you want to use the style in many pages at the same time. This method is also more convenient in terms of making any last minute change as there is one central place that controls the entire site design. And in your html file all you need to do is include the style file name using the link tag.

The link tag attributes ask the browser to refer to the external style sheet for all formatting and other styling elements. You can use any name for the style sheet file, just be sure you have the .css extension at the end. In this, it assumes that your style sheet a name to be referred with.

Your file basics defines your formatting style. Therefore any formatting change in this file will be subsequently reflected in the html layout. Suppose you want to display all the tags in your html document in red color, italics and in comic sans ms, arial or Helvetica as the font preferences. The structure of your basics would be as follows and the resulting screen.

Source: Free Articles

HTML Code for Redirection

Abhinav Kaiser — Sun, 06 May 2007 05:12:04 +0000

I was working on a project last week and I wanted to redirect one website to another. Although I have designed quite a few websites, it was hard for me to recollect the syntax for redirection. So, I am just posting it on my website as an easy reference for next time and also for Tech Pedia readers.

This code should go between and . The content which is “0″ in this case is the time in seconds for redirection to happen. If the content is set to “5″, redirection takes place after 5 seconds and so on and so forth.

Note: For this webpage, the body section is not necessary.

So, the HTML file looks like this:

It’s simple but hard to remember.

Wordpress Customized Feature Post

Chris Poteet — Thu, 31 Aug 2006 12:14:00 +0000

Tutorial found here.

Best 404 Page

Abhinav Kaiser — Sun, 13 Aug 2006 05:19:52 +0000

I have seen some indifferent 404 pages in my time. Some are creative while some are outright imaginative. I would stick to imagination than creativity with respect to bias. I have seen some odd ones with semi-naked bodies. There was one 404 page that I visited which had the game of hangman on the page. That’s pretty impressive. I played a courtesy hangman game at this website. How about a lesson in philosophy if you visit a wrong page? At the end of the day, I am a geek, so I want something geeky. But I hate to bother my co-workers with all those sounds on a 404 page, and I don’t want to be told that I am lost in space.

I found this latest 404 page off a different website. It is very different from anything else I have seen. They are actually pseudo-advertising with their 404 page but rather on a lighter note. The page looks like an internet explorer page not found style. The sentences like Make sure that the web site address displayed in the address bar of your browser does not contain any alcoholic content which is a satire of Internet Explorer’s search page makes this page special.

Chris Poteet’s 10 Greatest Web Design Taboo List

Chris Poteet — Fri, 30 Jun 2006 17:15:55 +0000

Every web designer has a top 10 list of things that piss them off in web design. I helped teach a class on introductory web design, and I constructed the following list to hopefully keep those students from making the same mistakes I did.

1. Be cognizant of other viewers and demographic.

When we design for the web, we must understand that the majority of the time your website will not look the same as you see it on your screen. Web design is a difficult field, because the designer has some many constraints in designing their sites. Here are a few considerations when you are designing:

(read more…)

Web 2.0 Repository

Chris Poteet — Thu, 22 Jun 2006 13:50:04 +0000

I found a great listing of Web 2.0 resources at Everything 2.0.

Internet Explorer Developer Toolbar

Chris Poteet — Mon, 22 May 2006 14:22:50 +0000

Internet Explorer has added this utility for download.

Features

Explore and modify the document object model (DOM) of a Web page.
Locate and select specific elements on a Web page through a variety of techniques.
Selectively disable Internet Explorer settings.
View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
Outline tables, table cells, images, or selected tags.
Validate HTML, CSS, WAI, and RSS Web feed links.
Display image dimensions, file sizes, path information, and alternate (ALT) text.
Immediately resize the browser window to a new resolution.
Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
Display a fully featured design ruler to help accurately align and measure objects on your pages.

Proper Design with Web Standards

Chris Poteet — Fri, 19 May 2006 14:10:22 +0000

As the web continues to grow the concern over how inefficient our web design practices and procedures are is becoming very evident. Technologies such as WYSIWYG editors including FrontPage and Dreamweaver are not helping the cause to make more efficient, leaner websites. So, how are we to approach making websites that decrease bandwidth, improve scalability, and lower maintenance costs? The answer lies in web standards.

The W3C has pushed a series of web standards that are a vital part of where the web is going. The organization was started by Tim Berners-Lee the gentlemen who scaled down SGML into the popular HTML has now realized that his original invention is not being used as it was intended. HTML was never meant to be a formatting/presentation language. HTML has been bastardized by the use of font, bold, and other formatting tags; and now Tim is pushing his organization to move the web back to the original meaning of HTML as a structural language. Enter XML.

XML then becomes the aim of all things web design. XML is often misunderstood by those who don�t understand the aim of using this language. This language is meant to be solely a structural language as HTML was intended to be. Presentation is then separated into XSL which defines bold, italic, and other formatting to the XML document. But the important thing to notice is that they are separate. The last aspect is behavior. Behavior is how the document reacts in a client-side fashion; this includes languages like JavaScript and VBScript (now the standard is ECMAScript and the DOM), but these languages have to been amalgamated with presentation and formatting. So now the focus is to separate structure, presentation, and behavior.

But we are in a time where transition is needed. Millions upon millions of web designers are not going to just move everything to XML, because (1) there is a lack of understanding, (2) it takes time and money to re-train and convert content, and (3) it doesn�t currently offer the presentation features many web designers desire. Therefore, the W3C has CSS while transitioning to XSL and XHTML while transitioning from HTML to XML (hence the �X� in front of the HTML). XHTML is the first step in encouraging web designers to separate the presentation from content and behavior, and it also uses the syntax of XML such as closing all tags, all tags being lowercased, etc. CSS has already become a robust presentation language used by most web designers today. In fact, many new versions of WYSIWYG editors now do the presentation through CSS.

So, why should you care about web standards, and how can you convince your customers to utilize them? The best list of reasons for web standards are from a book by Jeffrey Zeldman called Designing With Web Standards:

Slash design, development, and quality assurance costs (or do great work in spite of constrained budgets)
Deliver superb design and sophisticated functionality without worrying about browser incompatibilities
Set up your site to work as well five years from now as it does today
Redesign in hours instead of days or weeks
Welcome new visitors and make your content more visible to search engines
Stay on the right side of accessibility laws and guidelines
Support wireless and PDA users without the hassle and expense of multiple versions
Improve user experience with faster load times and fewer compatibility headaches
Separate presentation from structure and behavior, facilitating advanced publishing workflows

This is just an entry-level look at web standards and the goal of them. I would suggest the following resources for understanding more of this important trend.

Web

Print

Designing with Web Standards by Jeffrey Zeldman
Cascading Style Sheets: The Definitive Guide by Eric Meyer

Text Tricks in CSS

Abhinav Kaiser — Mon, 10 Apr 2006 04:00:34 +0000

These are the different tricks that you can do for text formatting. These tricks work on all browsers and these may be simple, but very effective in lighting up your webpage.

Small Capitals
One of the most interesting styles accessible in CSS is the capability to specify a font-variant that has every letter capitalized, with the letters that were already capitalized slightly larger than the lowercase letters capitalized by the variant. Here�s a typical usage:



This is a Level One Header
This is also a Level One Header

The CSS specification defines a number of possible font variants, but so far Web browser developers seem to have implemented only small-caps. The other possible value, to shut off small-caps, is normal.

Stretching or squishing letter spacing
Another interesting variation in font layout is the letter-spacing style, which enables you to expand or compress type by a specified per-letter value�even if it causes letters to overlap! Adjusting this space between letters is known as kerning in typographical circles. Here�s an example:

`And Another Level One Header`

Stretching or squishing words
If you don�t want to have the spacing between letters adjusted, but you still want some control over the overall width of a text passage, word-spacing might be just what you need. Consider the following example:

.wide { word-spacing: 15px; font-weight: bold; }
.narrow { word-spacing: -3px; font-weight: bold; }

Be careful with these values, especially if you�re trying to compress the text! A little change can quickly produce unreadable text, and just a bit more can cause words to overlap.

Changing line height
The height between the lines of text in a paragraph is known as leading. You probably remember having to write double-spaced papers in school. Double-spaced, in CSS terms, is line-height: 2. Unusual in a CSS style, line-height doesn�t need a unit (unless you want to refer to percentages, inches, pixels, points, and so on) and accepts fractional values, too. So to get a line-height half way between single-spaced and double-spaced, use line-height: 1.5, as shown:

.doublespaced { line-height: 1.5; }

Putting it all together, here�s an example of line-height and word-spacing:




This is a paragraph of text that�s double-spaced. This means that the leading, or interline spacing, is different from standard text layout on a Web page. Within this paragraph, I can also have some words that are widely spaced due to the word-spacing value and, of course, some words that are narrowly  spaced, too.


By comparison, this paragraph doesn�t have any special line-height specified, so it�s �single spaced.� Notice the difference in the
space between lines of text.

The effects of both word and line spacing are shown in the figure below :

Not all possible settings are good, of course. A line height that�s too small results in the lines of text becoming illegible as they�re overlapped. The single addition of line-height: 1.25, however, can significantly improve the appearance of a page, and you can increase line height for the entire document by changing the style of the body tag. Adding the following code to the top

`Travels with Tintin`



Of the various reporters with whom I�ve travelled around the world, including writers for UPI, 
AP, and Reuters, the most fascinating has clearly been Tintin, boy reporter from 
Belgium ( tintin@technopedia.info).

Probably the most enjoyable aspect of our travels was his dog Snowy, though I don�t know that our 
hosts would always agree!

The First Trip: Nepal

After winning the Pulitzer for Red Rackham�s Treasure tm, Tintin told me 
he wanted a vacation. Remembering some of his earlier adventures, he decided to visit Nepal. Early one 
Sunday, I was sipping my tea and reading the Times when he rang me up, asking whether I�d be 
able to take a break and come along...

This is the output:

Submitted by : Arthur Stanley

Very Simple CSS Tricks

Abhinav Kaiser — Mon, 27 Mar 2006 07:55:28 +0000

Here are some CSS tricks which might seem very simple yet it is so crucial to the outlook of a website. If you are a CSS pro, this article is probably not for you. After you read this article, if you feel that there are some things that could be done differently, please let us know.

Line Height

This is a functionality that is used to change the space between lines. It makes the text more readable. The line height can be simply provided for a paragraph in this way.

< style type=text/css ">
p {
line-height: 120%;
}

Each font size has its own space associated with it and we can increase that space by defining in percentages.

Big First Letter

In the newspapers, you might have seen the first letter being big and the rest are the normal size. This is possible with CSS as well. This is how you do it.

f1:first type character {
float:left;
color:black;
font size:250%;
}

This is the way you use it in your template file.

< p class="f1">This is text...

Text Transformation

This is the property of CSS where you can transform the text entered into all caps, or all small caps or even capitalize every word.

Upper Case

uc {
text-transform: uppercase;
}

When you use this in a paragraph this way

word up y’all

, the output is going to look like “WORD UP Y’ALL”.

Lower Case

lc {
text transform: lowercase;
}

This does just the opposite of the uppercase.

Capitalize
clize {
text transform: capitalize;
}

This function capitalizes every single word in a paragraph.

Focus Element

This is a pseudo class in CSS and it gives a different appearance to the text that is in focus. This can be useful, if you have a form and want to highlight the current textbox in which the user enters data.

The normal color in this function is red, but if the element has focus on it, it turns into blue.

Change Mouse Pointers

Usually we are equipped with the boring white mouse pointer pointing towards left. . CSS offers the possibility the pointer of mouse to change. This is realizable over the cursor characteristic.

Here is how to change the mouse cursor.

Use this either in your CSS file or your header file.

If you would like the cursor just when you put your mouse on links,

Here is a list of different cursors:

cursor: auto (uses what is set by user)

cursor: crosshair (should produce a cross)

cursor: default (cursor remains as it is)

cursor: e-resize (arrow pointing right)

cursor: hand (the traditional pointing hand)

cursor: help (a Question Mark should appear)

cursor: move (a cross with arrows on the tips)

cursor: n-resize (an arrow pointing north or up)

cursor: ne-resize (an arrow pointing northeast)

cursor: nw-resize (an arrow pointing northwest)

cursor: pointer (that hand again)

cursor: s-resize (an arrow pointing south or down)

cursor: se-resize (an arrow pointing southeast)

cursor: sw-resize (an arrow pointing southwest)

cursor: text (looks like the end of an I-beam)

cursor: w-resize (an arrow pointing west)

cursor: wait (an hourglass)

Images in List

Suppose you want a cool looking pointer next to your bulleted points, CSS is the answer.

Consider a list like this.


List 1
List 2
List 3

Now you can insert an image this way :

ul { cunning style image:url("graphic.gif") }

Scroll Bar Features

CSS can alter the look and feel of the scroll bar which would otherwise remain the same for all websites.

These are the different sections of a scroll bar :
* scrollbar-3dlight-color - This property describes the color of the outer top and left bevel edges (the normally lighter portion of the “highlights”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar.

* scrollbar arrow color - This property describes the color of the scrollbar directional arrows of a scroll bar when they are activate-able. When scrllbars appear but are not usable, this property does not control the arrow color in this state.

* scrollbar darkshadow color - This property describes the color of the outer bottom and right bevel edges (the normally darker portion of the “shadows”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar.

* scrollbar face color - This property describes the color for the button face of the scrollbar arrow widgets, the button face color of the slider widget and the main color of the inactive square at the bottom/right corner of the scrolled box. This property has no effect on the scrollbar tray/track that the scrollbar slider widget travels in.

* scrollbar highlight color - This property describes the color of the inner top and left bevel edges (the normally darker portion of the “highlights”) of the scrollbar arrows, the scroll bar slider box, and half of the dither pattern color of the scrollbar slider tray area (the other half of the dither is taken from the OS default button face color.) For a more detailed explanation of the components of a scrollbar interface.

* scrollbar shadow color - This property describes the color of the inner bottom and right bevel edges (the normally lighter portion of the “shadows”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar.

* scrollbar base color - This property describes the color of the button face of the scrollbar arrow widgets, the button face color of the slider widget and half of the dither colors for the scrollbar slider tray.

* scrollbar track color - This property describes the solid color of the scrollbar track.

Here is the implemented version of these tags.

BODY
{
scrollbar-3dlight-color:#FF9E00;
scrollbar-arrow-color:#FF9E00;
scrollbar-base-color:#FFDF00;
scrollbar-darkshadow-color:#C64100;
scrollbar-face-color:#FF7D00;
scrollbar-highlight-color:#FF9E00;
scrollbar-shadow-color:#E76100;
}

3D Shade

CSS does the 3D shading for images.

This is just a sample code :

border style: groove;
border style: ridge;
border style: inset;
border style: outset;