Introduction to Styles

Adding styles to an HTML tag does wonders both to the appearance and functionality of the page content. Although page elements can be modified by using tag attributes, styles make them even more so by introducing additional options that cannot be done by attributes. In some cases, styles serve as a substitue to attributes while in others they replace them.

For example, we have seen that we can add 2px thick borders to a table by including border="2" attribute. This makes borders for every cell of the table, but we cannot make borders only around a single cell. On the othe hand, we can do this and more with styles. we can even selectively place the border at one or more of the four sides of the cell. Morever, we can choose the color of the border, we can even make it with dashes.

Let's take the <b> tag as another example. This tag does not have attributes except the core attributes, so, with HTML alone, we cannot modify the appearance of a bold text. But, with the help of styles, we can make it bigger or smaller, wider or narrower, we can place borders around it, we can even make it 'not bold!'.

look at it : bold text made not bold by styles

The code that generated this text is:
<b style = "letter-spacing:5px; color:red; background-color:#ffffcc; border:2px solid black; font-weight:normal"> bold text made not bold by styles </b>

We used the <b> tag to illustrate what can be done with any text formatting tag; otherwise the generic tag that we normally use to define styles of an inline element is the <span>...</span> tag. Elements are broadly classified as inline elements and block-level elements. Inline elements are those that can be contained within a line. Block elements are elements that must occupy a rectangular space. Examples of block elements are tables, headings, and paragraphs. You cannot insert these within a flow of a text, they start their own new line and whatever follows goes to a new line again. For example, if you insert an <h1> tag right here, the browser breaks the line to a new line, writes the heading, then goes to another line to continue the content. The generic tag for block elements is the <div>...</div> tag. So, whenever you want to use style on some word or phrase place it in a <span>, and to crete a block like our menu on the left, place the whole content inside <div>.

Besides text formatting, another importat application of styles is their ability to position an element anywhere on the screen. As you might have noticed, the flow of elements is nomally left to right and top to bottom, that is, every time we add a text or other elements such as a table or a list, it will be added either to the right or to the bottom of the existing content. However, by using style properties and values, we can break this normal flow and position the new element anywhere. For example, we wrote some text in parenthesis and in light gray right here (CSS positioning), but it is positioned somewhere else on this page. Can you find it? Element positionig will be seen in detail in our CSS part.

Now, let't move to the technical stuff. Styles are specified by the pair property:value, separated by a semi-colon. Note that a colon separates the property and its value while a semi-colon is used to separate a series of styles. There are a number of properties to which are assigned possible specific values. Some properties accept pre-defined values like, left or right, while others accept numbers, like 100px or 25%. There are a few that accept both pre-defined values and specific numbers. For instance, the property border-width can have any one of the pre-defined values thin, medium, or thick; or it can have a numerical value like 2px.

Hoping that you have a general idea, the next step is to look at the specifics. Keep in mind that we are just introducing styles, therefore the foregoing discussions are by no means complete.

TOP

Text handling styles

Background specification

Element size, borders, padding, margins

TOP

One big question at this point is "Do we have to write styles to every element?" The answer is yes, if you want to, but it is not necessary. This type of declaring styles to individual elements is called inlline style. Another method is by use of CSS (Cascading Style Sheets). The purpose of CSS is that you can write a series of styles and give them class names. Then, whenever you want an element to have those styles, assign to it that class name. You may also define a style for an element so that all occurences of the element will acquire that style. For example, you may define color:green for h3 so that every time you use <h3> it will be displayed in green.

Another question is "How many style properties are there". There are quite few, but not that hard to remember - List of Style Properties

TOP

Introduction to Cascading Style Sheets(CSS)

Style sheets separate style declaration from content. They are listed either in the head section of the HTML document or in anoher file. To place styles in the head section, use the following format.

To place list of styles in a separate file, you have specify the link to the file in the head section as follows,

<link rel="stylesheet" type="text/css" href="stylesFile.css" />

where stylesFile.css is the file that contains the style list. It is a text file with a name of your choice, with any extension, but preferably .css or .txt.

The list of styles is prepared according to the following format:

selector { property : value; property : value...}

There are three types of selectors,

1. tag name
2. a class name preceded by a dot (e.g., .par    --  for a class named par)
3. an id name preceded by the number symbol (e.g., #Lst    --  for an id named Lst)

A brief explanation of each with examples:

1. When the selector is a tag, then all ocurrences of that tag will acquire the style properties and values listed. For example, if the declaration is
   h1 {font-size:20px; color:white; background-color:#003366 }
   then, everytime you use the h1 tag in your document, it will be displayed in white with 20px size,and with background color of #003366.

2. When the selector is a class name, then all elements that are assigned that class name will acquire the style properties and values listed. For example, if the declaration is
   .inRed {font-weight:bold; color:red }
   then, all elements that are assigned a class name of inRed will be displayed in bold red. For example, you may write <span class="inRed">tags</span> to display that word in bold red, or <p class="inRed">paragraph content >/p< to dsplay the entire paragraph in bold red.

3. When the selector is an id name, then the element that is assigned that id name will acquire the style properties and values listed. Note that an id name is unique to an element, that is, no two or more elements can have the same id. Therefore, this type of style delaration applies only to one element. For example, if the declaration is
   #topDiv {padding:20px; border:solid blue 1px }
   then, the element that has been identified by the id topDiv will be displayed in a box with four borders of 1px, solid, blue, and the content written at 20px distance from all the four borders. For example, you may specify the style one div as <div id="topDiv">...</div>. In fact, since this appllies to only one element, you might as well use an inline style assinment unless you want to separate style from content.

A more detailed study of CSS involves various uses of these basic principles, one of which is declaring the style based on the structure of the document elements. For example, the style declaration may be speccified as,

div ol li a {font-size:12px; color:yellow; background-color:#000000 }

This means -- look for an 'a' tag that is contained in an 'li', which in turn is contained in an 'ol' tag, again contained in a 'div' tag. If an element is found contained with such structure, it will be displayed in yellow with black background and with 12px font size.

Another common and very useful use of CSS is the use of pseudo-classes which are applied only to the 'a' tag (link tag). The style declaration may have the following form:

The first displays the link in its normal state, the 'a:visited' is the style for visited links, 'a:hover' is when mouse is over the link, 'a:active' for active links (push mouse and stay before lifting your finger). Instead of directly specifying for all 'a' tags, you may do so for classes or ids of links. Here is a complete example for an anchor tag that with a class name of 'zLink',

The following is the code for link example that follows,
<a class="zLink" href="index.php">A link to home page</a>
A link to home page

TOP