My HTML Way...: CSS Styling and HTML

We saw in my earlier post that anchor tag changes the color and style of the anchor text. We can either change it back to default or make it little more enjoyable by proving some special effects.

For this we need CSS styles.

CSS styling is the most common way to provide styling effects to HTML documents.

CSS styling can be added to HTML in three ways.

1. Add style into the Tag directly as an attribute.

2. Add style in the header section so that it can be used in the entire document (like having a global variable)

3. Have a CSS file for all the styling.

1. CSS style as attribute.

Its a simple way to to style the web page.

For example, you can change the font of the text in the heading tag.

<H1 Style="font-family:verdana">CSS Style</H1>

or have the color and size of the text changed:

<H1 Style="font-family:verdana;color:Blue;font-size:10px;">CSS Style</H1>

You can change the background color for the text:

<B Style="background-color:Gray">CSS Style</B>

or change the text alignment to "justified" in HTML

Here is the code and output:

<HTML>

<BODY>

<H1 Style="Font-family:verdana">CSS Style</H1>

<H1 Style="Font-family:verdana;color:Blue">CSS Style<//H1>

<H1 Style="Font-family:verdana;color:Blue;font-size:10px;">CSS Style</H1>

<B Style="Background-color:Gray">CSS Style</B>

</BODY>

</HTML>

2. CSS style in the Header.

The CSS styling can be added to the header section so that it can apply to all the document.

For example, here I show to to add special styling to anchor tag <A>

Providing Special Effects to Anchor Tag:

<HTML>

<HEAD>

A:link { COLOR: Blue; TEXT-DECORATION: None; font-weight: Normal }

A:visited { COLOR: Darkred; TEXT-DECORATION: None; font-weight: Normal }

A:active { COLOR: Blue; TEXT-DECORATION: None}

A:hover { COLOR: Red; TEXT-DECORATION: None; font-weight: Bold }

</STYLE>

</HEAD>

<BODY>

This is the link to

My Blog

</A>

</BODY>

</HTML>

As you can see in the code that I want the color of the anchor text to be Blue by default, change to DarRed if the link is already visited once, Blue again when it is active and Red when the mouse hovers over it. I also change the text to bold on mouse hovering.

So anywhere there is anchor tag in the document, this style would apply an you will see all anchor texts have this special styling to them:

3. CSS style in a .css file (Importing .css file).

We can also write all the styling code in a file, save it with .css extension and import that file into out webpage. This is a good idea when you have a lot of styling to do so that HTML and CSS can be separated.

Here I have stored the anchor tag styling to a file called anchorStyle.css. I import that file into my HTML like this:

<HTML>

<HEAD>

@import url("C:/anchorStyle.css");

</STYLE>

</HEAD>

<BODY>

This is the link to

My Blog

</A>

</BODY>

</HTML>

You can play with the style to have some great effects to your web page.

My HTML Way...

Saturday, February 19, 2011

CSS Styling and HTML

7 comments: